Screenshot automation on iOS with Bitrise & Fastlane
Screenshot automation is an important feature if you need to make sure everything is displayed properly on all the variations of languages and screen sizes. This can save you a huge amount of time testing all these cases.
I spent some time trying to find the best tool to do this and since I’m using Bitrise for CI/CD I wanted to keep everything in the same channel.
For running UI Tests on real devices, I’m using Firebase Test Lab, but it doesn’t support making screenshots for iOS (for Android apps FTL is a good solution).
I’m going to use the iOS project named ScreenshotAutomation with UITests included for this example and a new Bitrise project named ScreenshotAutomation.
Fastlane
The first step we need to do is add the Fastlane to this project and set it up for making screenshots.
Make sure you have the Fastlane installed and in the terminal just run `fastlane` in the project root folder.
This will start to configure Fastlane for your project, you just have to follow the steps provided.
Don’t forget to create a new Schema and mark it as Shared. I named it FastlaneScreenshotAutomation.
Your project should look like this
Now you can continue with Fastlane setup. Select the new schema you created.
I’m not going to use these screenshots for App Store Connect so I’ll skip this step.
This will create a new Fastlane directory in your project. There are two here that we are going to need.
Snapfile — configuration for our screenshots
Fastfile — defines the lanes that Fastlane can use
In the Snapfile, I’m only going to set up the English language and a few screen sizes. However, this file allows for more configuration and I encourage you to check it out.
This is what my Snapfile and Fastfile look like
You can always check available Lanes with `fastlane lanes` command and run the lane with `fastlane [lane_name]`. We have just one lane, named `screenshots` as you can see in the `Fastfile`.
Run this lane and it will create your first screenshots. Make sure your iOS version is properly set for ScreenshotAutomationUITests target (Build Settings -> iOS Deployment Target) and that your Schema looks like this. Also, I opted out of using Scene Delegate since that can cause some problems.
This is our final result
You can also add some more options to Snapfile. You can find the list of the options by running fastlane action snapshot
I suggest that you add screenshots directory to .gitignore as this is not something you would need in your repo.
Bitrise
For the Bitrise part, I created a new project, connected my GitHub repo (make sure you pushed all the changes from above).
You can skip adding the app icon and webhooks in project setup.
Now we have to create a workflow for screenshots on Bitrise. This should already be done by default and it should look like the image below. I also like to enable verbose logging on the fastlane step until I make sure everything is working fine. To make sure our screenshots are exported correctly we have to try out a build.
This should be in Build - Apps & Artifacts. If you can’t find your screenshots make sure you add the correct Input variables in the Deploy to Bitrise step. I like to compress my artifacts so I set this to true. You can find the exact value for Deploy directory or file path by checking where your screenshots.html is stored in your build log. For me it us /Users/vagrant/git/screenshots.
In the end, it should look something like this
Your build will take some time, so be patient, but your final results will be worth it and this could save you quite some time in the future. You can also add triggers to this build whenever you want so make sure you investigate all that Bitrise offers.
