Automatic Screenshots With fastlane snapshot

fastlane comes bundled with a tool that makes taking screenshots simple. In this article we'll go over setting up your project to use fastlane snapshot.There’s a lot of boring tasks that you can automate in your development career. Taking screenshots is definitely one of them. fastlane comes bundled with a nice little tool that makes this very simple. In this article we’ll go over setting up your project to use fastlane snapshot.

Before You Start

This is the second article in the CI/CD series. The first article talks about how to easily manage your code signing using match. The idea behind this article is to automate taking your screenshots. If you have a really small app that’s only localised to one language, you might argue if this is really necessary. But believe me, taking screenshots on many different devices and different localisations can eat up a lot of your time. You can spend that precious time doing something else. The beauty of automating this process is that your screenshots will be consistent across devices and languages.

Even if you have a simple app, localised to one language, fastlane snapshot will save you some time. And it’s easier to setup than you think.

Preflight

You’ll need fastlane installed along with the latest command line tools. Install the command line tools first:

And then fastlane:

You should be set to go.

Making It Work

Using terminal, navigate to your project directory and initialise snapshot:

Once you run this command fastlane will create two files in your project directory, ‘Snapfile’ and ‘SnapshotHelper.swift’:

Open the ‘Snapfile’ in a text editor and set up some basics for now:

Here you can set your devices and languages, so do that. One important thing you’ll have to do is to set the scheme name that will run the UI tests. In my case it’s ‘FastlaneSnapshot’. We’ll explain this one next…

UI Test Target

snapshot is actually using UI tests to create your screenshots. It will run a UI test on your app and all you have to do is tell it when to take the screenshot and how to name it. First thing we’ll need is a UI test target, so go ahead and add one:

Choose a name for it (I called mine ‘FastlaneSnapshot’) and make sure that the ‘Target to be Tested’ is set:

Now you should have your UI test target. snapshot created a file for you in the previous step, ‘SnapshotHelper.swift’. Move that file to the new directory for your target, and add it to the target:

Make sure you’ve set the target membership correctly for ‘SnapshotHelper.swift’:

UI Test Scheme

In order to be able to run the new target we’ll need a new scheme. So go on and create one:

Once you’ve created the scheme, you’ll have to edit it. Make sure the new scheme is shared:

Make sure that your scheme is set to build and run. Your ‘Build’ section should look similar to this one:

If you can’t see your new target here, select that ‘+’ button at the bottom and add it in:

Also, check your ‘Test’ section, it should look like this:

If you can’t see your target, follow the similar steps as above to add it in.

That’s it for the project prep. Time for some actual code.

A Bit Of Code

The code itself is simple enough. When you created your UI test target, a file got created for you (in my case it was the ‘FastlaneSnapshot.swift’ file). We won’t need any other file, this one will do. What we’ll do is create a simple UI test. Before we can make snapshot work we have to set it up first. You can do this in the setup function of your new UI test:

If you can’t see the ‘setupSnapshot’ function, you forgot to add theΒ ‘SnapshotHelper.swift’ to your UI test target. You should also see a dummy test function, feel free to rename it, just make sure it starts with the word ‘test’. If you click inside the body of the function a little red record button will become enabled:

When you click the ‘record’ button your app will start. From this point on Xcode will record all the actions you take in your app. Make sure you navigate to the screens that you want to grab screenshots for. As you’re navigating through the app you’ll see that this function will be populated by code. As the code is being populated remember the places where you want screenshots taken.

When you’re finished navigating through the app stop recording and add your calls to the ‘snapshot’ function:

Give your screenshots a good name. They will be sorted alphabetically, take this into account when choosing a name. You can also wait for any activity indicators to finish, or you can just wait for an arbitrary number of seconds.

You can adjust the automatically generated code, if it’s not working for you. UI testing goes outside of the scope of this article, so I’ll leave this one with you.

That’s it for the code.

Take The Shot

Now, you’re finally ready to take those screenshots. If you just run your UI test nothing will happen. You have to run a command from your terminal. Open up the terminal, navigate to your project directory and simply type:

Go get some coffee, from this point on your mac will do all the work. After a couple of minutes a page will open in your browser with all the screenshots taken, it will look something like this:

You will find your screenshots inside your project directory, in a directory called ‘screenshots’:

It did take a couple of minutes to set all this up. But, the next time you want to take screenshots, all you have to do is call ‘fastlane snapshot’ from your terminal and your screenshots will magically appear πŸ™‚

Being a part of fastlane tools, snapshot integrates with fastlane flawlessly. In the next article we’ll see how to setup fastlane and automatically upload your app and metadata to iTunes Connect.

Conclusion

In this article we went over setting up fastlane snapshot and you can see how easy it actually was. What we went through here is just the basic setup. You can check out some fancy features, like custom frames, in the official documentation.

I believe that you should automate repetitive tasks. Taking screenshots is a prime candidate. So setting up snapshot is definitely worth your time. In the next article we’ll see how all this fits together into a bigger picture and how to upload your app with the metadata to iTunes Connect with one simple command. By the end of the series you’ll have your own CI/CD pipeline set and ready to go. Stay tuned πŸ™‚

Have a nice day πŸ™‚
~D;

More resources

3 thoughts on “Automatic Screenshots With fastlane snapshot

  1. Dejan Agostini Post author

    Hey, thanks πŸ™‚ It’s possible that fastlane changed something in the meantime. I like the approach from the article where you have a separate function for every screenshot you’re taking. Seems cleaner and more manageable. Great article πŸ™‚

    Reply
  2. Daniel

    Love this, the only tutorial that included useful extra information like pressing + to add the target if not there, or that the functions must start with test. Thanks!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.