Automated Screenshots For Flutter
Among hybrid mobile development solutions, Flutter takes a unique approach. From a developer perspective, it is unique in it’s clean partitioning from the underlying native platform, while still being able to efficiently reach-out to the native platform as needed.
One of the neat by-products of this clean partition, is that there is no need to depend on native integration test tools.
Integration Tests
Most native and hybrid mobile developers are required to learn multiple native integration test tools, such as UI Tests for iOS and Espresso for Android.
With Flutter, integration tests can be developed in a single, and familiar, Flutter development environment. The same development environment that is used to develop the app. This is a huge convenience for Flutter developers.
However, when it comes to navigating the hairy process of deploying to the Apple and Google stores, the same familiar problems rear their ugly heads.
Screenshots!
One of the most time-consuming of these problems is the repetitive task of capturing ever-changing screen shots, on multiple devices… and even for multiple locales(languages). This can quickly get into hundreds of screens, on a regular basis, and can quickly become a time-sink and error prone.
Screen capture automation tools have emerged that help automate screen capture using the native integration testing process. In particular, Fastlane, with its screen capture automation for iOS (Snapshots — based on iOS UI Test) and Android (ScreenGrab- based on android’s Espresso), being the most prominent.
However, because of Flutter’s unique separation from the underlying native platform, Fastlane’s Snapshot and ScreenGrab do not work with Flutter. So what’s a programmer to do?
Introducing 'screenshots' for Flutter
Luckily an equivalent tool, that combines key features of Fastlane’s Snapshots and ScreenGrab, has emerged for Flutter called, simply, screenshots… and it’s much simpler to use!
Whereas, Snapshots and ScreenGrab run as two separate tasks, with two sets of integration tests written using two separate test harnesses and two programming languages…
…in contrast, thanks to the clean partitioning of Flutter from the native platform, screenshots runs in one task, with one set of integration tests written using one test harness and one programming language (the same programming language as was used to write the app!).
How does it work?
screenshots provides a special method that you insert into your tests wherever you want to capture screenshots. It uses this method to store captured screen-images in a known location on disk. Then, you select the devices and locales(languages) you want to run your tests on, in a config file. Run screenshots from the command line and… that’s it… your done!
screenshots will then fire-up the appropriate android emulator or iOS simulator for each device and locale you specified in your config file, one at a time. For each device and locale, it runs the configured set of integration tests, and processes the captured screen images.
No fiddling with Gradle build files, or Xcode configurations. No need to integrate with two test harness and write tests for two mobile platforms, etc... The learning curve is much gentler (in fact, there’s practically no learning curve at all!).
screenshots is compatible with Fastlane’s Deliver and Supply for upload to the Apple and Google stores. screenshots can also optionally place the images in device frames, similar to Fastlane’s FrameIt.
Guarantee your user experience!
Before uploading to the stores, an especially useful step is to use screenshots to generate images from all the devices and locales (languages) your app supports. This can be a convenient way to review your screen layout to find inconsistencies unique to a device or a language. You can then be assured that users on all devices and all languages have the intended experience on your app.
Images can also be used in QA or marketing for further analysis.
Let’s see it in action!
To see screenshots in action:
Here is a before-and-after image of a Flutter screenshot captured via screenshots during a test run. It shows the originally captured screenshot and how screenshots then processes it (in this case including a device frame):
For each device (android or iOS), and each locale, and each test you specify, screenshots will generate a pixel-perfect image for each screenshot you capture in your tests. This can be a handful… or hundreds of images.
Click below to see how the screenshots appear in the Google Play Store:
and in the Apple App Store:
How do I use it?
Using screenshots is straightforward.
Setup:
- Install the
screenshotscommand line utility.
Usepub global activate screenshots. - Add
screenshotsas a test package to your project.
(see README for details). - Add calls to screenshots to your tests.
In your tests, make a method call viascreenshotseach time you want to capture a screen. No API to learn, just a single method call.
(see README for details). - Setup your configuration file.
This includes a list of tests, a list of devices, and a list of locales.
(see README for details). - Install emulators and simulators.
Install the emulators and simulators for the list of devices in your config file.
Running `screenshots`:
Whenever you need to generate screenshots, call screenshots from the command line.
screenshots will fire-up the emulators and simulators for each specified device and locale, run your latest tests, capture the images, process them, and drop them off in the Fastlane directories for upload. It’s like magic!
Never worry about screenshots again
screenshots integrates nicely with CICD (Continuous Integration/Continuous Delivery). In an upcoming article, I will show a new CICD tool tailored to Flutter. This new CICD will automate the creation and delivery of screenshots (in addition to all the other things necessary to get your most recent code delivered to your users). You never have to worry about keeping screenshots up-to-date again.
How do I get it?
You can find screenshots, together with documentation and source code, in the Dart package repository. Instructions are provided to walk you thru adding screenshots to your tests and auto-generating the screenshots:
Conclusion
Managing screenshots can be a time consuming, repetitive, and error prone task. screenshots is a new package that automates this process for Flutter. screenshots is an important part of any Flutter CICD solution (see upcoming article).
Finally…
Let me know if you have any questions or comments about screenshots and how you can use it in your Flutter project, below or on GitHub or Twitter.
If you think this article is interesting, you can find more related articles here.
