screenshots 0.1.2 screenshots: ^0.1.2 copied to clipboard
Auto-generation of screenshots for Apple and Play Stores using emulators and simulators. Compatible with fastlane for upload to both stores.
Screenshot with overlayed status bar and appended navigation bar placed in frame
For an example of screenshots generated with screenshots
on a live app see:
For information on automating screenshots
with a CI/CD tool see fledge.
Screenshots #
screenshots
is a standalone command line utility and package for capturing screenshots for Flutter. It will start the required android emulators and iOS simulators, run your screen
capture tests, process the images, and drop them off for Fastlane for delivery to both stores.
It is inspired by three products from Fastlane:
- Snapshots
This is used to capture screenshots on iOS using iOS UI Tests. - Screengrab
This captures screenshots on android using android espresso tests. - FrameIt
This is used to place captured iOS screenshots in a device frame.
screenshots
combines key features of all three Fastlane products.
- Captures screenshots from any iOS or android device.
- Frames screenshots in an iOS or android device frame.
- The same Flutter integration test can be used across all devices.
No need to use iOS UI Tests or Espresso. - Integrates with Fastlane's deliver and supply for upload to respective stores.
See related article for more information.
Usage #
$ screenshots
Or, if using a config file other than the default 'screenshots.yaml':
$ screenshots -c <path to config file>
Writing tests for screenshots
#
Taking screenshots using this package is straightforward.
A special function is provided in
the screenshots
package that is called by the test each time you want to take a screenshot. screenshots
will
then process the images appropriately during a screenshots
run.
To take screenshots in your tests:
- Include the
screenshots
package in your pubspec.yaml's dev_dependencies section
... or whatever the current version is.screenshots: ^0.1.2
- In your tests
- Import the dependencies
import 'package:screenshots/config.dart'; import 'package:screenshots/capture_screen.dart';
- Create the config map at start of test
final Map config = Config().config;
- Throughout the test make calls to capture screenshots
Note: make sure your screenshot names are unique across all your tests.await screenshot(driver, config, 'myscreenshot1');
- Import the dependencies
Configuration #
screenshots
depends on a configuration file, screenshots.yaml
:
# Screen capture tests
tests:
- test_driver/test1.dart
- test_driver/test2.dart
# Interim location of screenshots from tests
staging: /tmp/screenshots
# A list of locales supported in the app
locales:
- en-US
# - de-DE
# A list of devices to emulate
devices:
ios:
# - iPhone X
- iPhone 7 Plus
- iPad Pro (12.9-inch) (2nd generation)
# "iPhone 6",
# "iPhone 6 Plus",
# "iPhone 5",
# "iPhone 4s",
# "iPad Retina",
# "iPad Pro"
android:
- Nexus 5X
# Frame screenshots
frame: true
Emulators and Simulators #
screenshots
automatically starts the emulators and simulators corresponding to devices
in the screenshots.yaml
, on which
you want to run your tests.
screenshots
expects that the emulators and simulators corresponding
to the devices in the configuration file are installed in the test machine.
Installation #
To install screenshots
on the command line:
pub global activate screenshots
To upgrade, simply re-issue the command
pub global activate screenshots
Note: the screenshots
version should be the same for both the command line and package.
- If upgrading the command line version of
screenshots
, it is helpful to also upgrade the version ofscreenshots
in your pubspec.yaml. - If upgrading
screenshots
in your pubspec.yaml, you should also upgrade the command line version.
Dependencies #
screenshots
depends on ImageMagick.
Since screenshots are generally required for both iOS and Android, testing should be done on a Mac (unless you are only testing for android).
brew update && brew install imagemagick
Integration with Fastlane #
Since screenshots
is intended to be used with Fastlane, after screenshots
completes
the images can be found in
android/fastlane/metadata/android/en-US/images
ios/fastlane/screenshots/en-US
in a format suitable for upload via deliver and supply
If you intend to use fastlane it is better to install fastlane files in both ios
and android
prior to running screenshots
. See fledge for more info.
Resources #
A minimum number of screen sizes are supported to meet the requirements of both stores. The supported screen sizes currently supported, with the corresponding devices, can be found in devices.yaml.
Only supported devices can be used in your config file.
Note: This file is part of the package and is shown for information purposes only. It does not need to be modified. You can find the latest version in devices.yaml
ios:
screen1:
size: 1242x2208
resize: 75%
resources:
statusbar: resources/ios/1242/statusbar_black.png
frame: resources/ios/phones/iPhone_7_Plus_Silver.png
offset: -0-0
phones:
- iPhone 7 Plus
screen2:
size: 2048x2732
resize: 75%
resources:
frame: resources/ios/phones/iPad_Pro_Silver.png
offset: -0-0
phones:
- iPad Pro (12.9-inch) (2nd generation)
android:
screen1:
size: 1080x1920
resize: 80%
resources:
statusbar: resources/android/1080/statusbar.png
navbar: resources/android/1080/navbar.png
frame: resources/android/phones/Nexus_5X.png
offset: -4-9
phones:
- Nexus 5X
destName: phone
Current limitations #
- More screens can be added as necessary (the minimum required by Apple and Google stores are already provided).
- Ipad screens currently have no status bar (waiting for artwork).
- Locales not supported (the default is whatever locale currently set in the emulator/simulator).
Issues and Pull Requests #
This is an initial release and more features can be added. Issues and pull requests are welcome.