screenshots 0.1.7 copy "screenshots: ^0.1.7" to clipboard
screenshots: ^0.1.7 copied to clipboard

outdated

Auto-generation of screenshots for Apple and Play Stores using emulators and simulators with support for locales. Compatible with fastlane for upload to both stores.

pub package Build Status

alt text

A screenshot image with overlaid status bar and appended navigation bar placed in a device frame.

For an example of images generated with Screenshots on a live app in both stores see:
GitErDone GitErDone

See a demo of Screenshots in action: Screenshots demo

For introduction to Screenshots see https://medium.com/@nocnoc/automated-screenshots-for-flutter-f78be70cd5fd.

Screenshots #

Screenshots is a standalone command line utility and package for capturing screenshot images for Flutter.

Screenshots will start the required android emulators and iOS simulators (or find attached devices), run your screen capture tests on each emulator/simulator (or device), process the images, and drop them off to Fastlane for delivery to both stores.

It is inspired by three tools from Fastlane:

  1. Snapshots
    This is used to capture screenshots on iOS using iOS UI Tests.
  2. Screengrab
    This captures screenshots on android using android espresso tests.
  3. FrameIt
    This is used to place captured iOS screenshots in a device frame.

Since all three of these Fastlane tools do not work with Flutter, Screenshots combines key features of all three Fastlane tools into one tool. Plus, it is much easier to use!

Features #

Screenshots main features includes:

  1. One test for both platforms
    Write one test for both iOS and Android.
    (No need to write separate iOS UI Tests or Espresso tests.)
  2. One run for both platforms
    Screenshots runs your tests on both iOS and Android in one run.
    (as opposed to making separate Snapshots and Screengrab runs)
  3. One run for multiple tests
    Screenshots will run all the tests listed in config file.
  4. One run for multiple locales
    If your app supports multiple locales, Screenshots will optionally set the locales listed in the config file before running each test.
  5. One run for frames
    Optionally places images in device frames in same run.
    (as opposed to making separate FrameIt runs... which supports iOS only)
  6. One run for clean status bars
    Every image that Screenshots generates has a clean status bar.
    (no need to run a separate stage to clean-up status bars)
  7. Works with Fastlane
    Screenshots drops-off images where Fastlane expects to find them. Fastlane's deliver and supply can then be used to upload to respective stores.

Additional automation features:

  1. Screenshots runs in the cloud.
    For live demo of Screenshots running with the internationalized example app on macOS in cloud, see below
  2. Screenshots works with any CI/CD tool.
    For live demo of uploading images, generated by Screenshots, to both store consoles, see demo of Fledge at https://github.com/mmcc007/fledge#demo

Installation #

On macOS:

$ brew update && brew install imagemagick
$ pub global activate screenshots

Usage #

$ screenshots

Or, if using a config file other than the default 'screenshots.yaml':

$ screenshots -c <path to config file>

Modifying your tests for Screenshots #

A special function is provided in the Screenshots package that is called by the test each time you want to capture a screenshot. Screenshots will then process the images appropriately during a Screenshots run.

To capture screenshots in your tests:

  1. Include the Screenshots package in your pubspec.yaml's dev_dependencies section
      screenshots: ^<current version>
    
  2. In your tests
    1. Import the dependencies
      import 'package:screenshots/config.dart';
      import 'package:screenshots/capture_screen.dart';
      
    2. Create the config map at start of test
           final Map config = Config().config;
      
    3. Throughout the test make calls to capture screenshots
          await screenshot(driver, config, 'myscreenshot1');
      

Note: make sure your screenshot names are unique across all your tests.

Note: to turn off the debug banner on your screens, in your integration test's main(), call:

  WidgetsApp.debugAllowBannerOverride = false; // remove debug banner for screenshots

Configuration #

Screenshots uses a configuration file to configure a run.
The default config filename is screenshots.yaml:

# A list of screen capture tests
tests:
  - test_driver/main1.dart
  - test_driver/main2.dart

# Note: flutter driver expects a pair of files for testing
# For example:
#   main1.dart is the test app (that calls your app)
#   main1_test.dart is the matching test that flutter driver 
#   expects to find.

# Interim location of screenshots from tests
staging: /tmp/screenshots

# A list of locales supported by the app
locales:
  - de-DE
  - en-US

# A list of devices to emulate
devices:
  ios:
    - iPhone X
    - iPad Pro (12.9-inch) (2nd generation)
  android:
    - Nexus 6P

# Frame screenshots
frame: true

Note: emulators and simulators corresponding to the devices in your config file must be installed on your test machine.

Integration with Fastlane #

Since Screenshots is intended to be used with Fastlane, after Screenshots completes, the images can be found in your project at:

android/fastlane/metadata/android
ios/fastlane/screenshots

Images are in a format suitable for upload via deliver and supply.

Tip: The easiest way to use Screenshots with Fastlane is to call Screenshots before calling Fastlane. Calling Fastlane (for either iOS or Android) will then find the images in the appropriate place.

(For a live demo of using Fastlane to upload screenshot images to both store consoles, see demo of Fledge at https://github.com/mmcc007/fledge#demo)

Changing devices #

To change the devices to run your tests on, just change the list of devices in screenshots.yaml.

Make sure the devices you select have supported screens and corresponding emulators/simulators.

Note: In practice, multiple devices share the same screen size. Devices are therefore organized by supported screen size in a file called screens.yaml.

For each selected device:

  1. Confirm device is present in screens.yaml.
  2. Add device to the list of devices in screenshots.yaml.
  3. Install an emulator or simulator for device.

Screenshots will check your configuration before running.

Upgrading #

To upgrade, simply re-issue the install command

$ pub global activate screenshots

Note: the Screenshots version should be the same for both the command line and package:

  1. If upgrading the command line version of Screenshots, also upgrade the version of Screenshots in your pubspec.yaml.
  2. If upgrading the version of Screenshots in your pubspec.yaml, also upgrade the command line version.

Sample run on Travis #

To view Screenshots running with the internationalized example app on macOS in the cloud see:
https://travis-ci.com/mmcc007/screenshots

To view the images generated by Screenshots during run on travis see:
https://github.com/mmcc007/screenshots/releases/

  • Running Screenshots in the cloud is useful for automating the generation of your screenshots in a CI/CD environment.
  • Running Screenshots on macOS in the cloud can be used to generate your screenshots when developing on Linux and/or Windows (if not using locally attached iOS devices).

Issues and Pull Requests #

Issues and pull requests are welcome.

Your feedback is welcome and is used to guide where development effort is focused. So feel free to create as many issues and pull requests as you want. You should expect a timely and considered response.

97
likes
0
pub points
60%
popularity

Publisher

unverified uploader

Auto-generation of screenshots for Apple and Play Stores using emulators and simulators with support for locales. Compatible with fastlane for upload to both stores.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

args, path, resource, yaml

More

Packages that depend on screenshots