Automatic Screenshots with Fastlane & Detox
It all started with doing various kinds of boring stuff before deploying the app. increasing version numbers, running tests, taking screenshots, building the app, …
Then I was introduced to Fastlane, a tool to facilitate your deployments. in fact, based on the Fastlane docs:
Fastlane is a tool for iOS and Android developers to automate tedious tasks like generating screenshots, dealing with provisioning profiles, and releasing your application.
So I started using the awesome docs to automate everything. since everything about setting up the Fastlane is well explained in the docs, I don’t want to re-explain everything and make this post long. So, I’m gonna leave this step to you (if you already haven’t used Fastlane) and start doing what matters here. The only advice that I can give to you here is to use Fastlane in android part of your application first. since it is easier to use & learn.
The first thing you’ll realize after setting up the Fastlane is that there doesn’t seem to be a clear and straightforward way for generating the screenshots in the React Native projects. But, The auto screenshot generation was too good to leave it behind. So, to achieve it, I started using something else.
Detox
Detox is a gray box end-to-end testing and automation library for mobile apps. By using it, you’ll be able to test your UI, interactions, and flows of the app. The main part will be passing `testID` prop to your components and using it for interaction or validations (if the component exists etc).
Again, Since everything is well documented and is too much for a post, I’m just gonna skip the initial steps for setting up the Detox in your project.
after setting up, you can automatically use Detox to navigate through the pages that you want to take a screenshot from and by using the following code you can take a screenshot from desired position and save it to the directory that Fastlane will use to update the screenshots of your app in the AppStore/GooglePlay.
here is the code:
each time that you call the takeScreenshot method a new screenshot will be taken and saved in the needed directory.
Here is a simple example of how it can be used in your screenshots.spec.js file.
I additionally should remind that the Fastlane supports the automation of uploading screenshots for multi-language, so you can do more things on the Detox to achieve this.
