The Screenshot factory — Illustration by Jérémy Paul

A Perfect Status Bar on Screenshots With fastlane

The quality on an app’s screenshot is fundamental in the decision of buying/downloading on the AppStore. In a previous post, I showed you how to generate screenshots automatically with fastlane. In fact, it was like a “fastlane snapshot 101”. Now, we’ll see how to make screenshots nicer by customizing the status bar. Indeed, this default status bar with “carrier” is not really sexy…

Who is this famous “Carrier”? What happens at 11:54???

This is far from perfect: the carrier name (on the left) is just “Carrier” and the displayed time change between each screenshot… Indeed, this is details. But theses little details make the difference. Furthermore, it’s very simple to make this status bar neat! Let’s see how…

In the past, a solution would have been to remove the status bar (by cropping the images). But Apple do not allow to remove status bar on devices that are not 3.5", 4" or 9.7" display (so: the forms factor of the old iDevices). As far as I know, if you want a clean status bar there are only two options:

• Photoshop it!
• Use SimulatorStatusMagic to customize simulator status bar at runtime.

Obviously, this post is about the second solution. Indeed, photoshoping screenshots can be very tedious since it’s not automatic. So, we’ll see how to integrate SimulatorStatusMagic with our current snapshot setup. This post is the second part of the “How to automate iOS screenshots” series. So, the initial setup is based on the code of the part 1. If you did not read the first post, I strongly advise you to take a look at it.

SimulatorStatusMagic

The principle is pretty straight: before launching our screenshot routine, we have to tell to SimulatorStatusMagic to customize our status bar. It’s easy as 1–2–3!

1 — Install SimulatorStatusMagic

Add SimulatorStatusMagic to your UI Test target. If you are using Cocoapods, you just have to add this to your PodFile:

target 'UITests' do 
    pod 'SimulatorStatusMagic' 
end

If you are using another dependency manager (or no dependency manager at all…), take a look at the installation instructions. But the important thing is to link this library only to your test target! Indeed, SimulatorStatusMagic will not be useful into your application’s main target (it will just add useless data to the final binary). Furthermore: SimulatorStatusMagic do not work on device.

2 — Customize SimulatorStatusMagic

Once added to your UITest target, you have to enable and configure SimulatorStatusMagic. This should be made in the setUp() method of the XCTestCase. This method is called before running each test. This is where you should have made your setupSnapshot() call. Here goes:

SDStatusBarManager.sharedInstance().carrierName = "Sinplicity" SDStatusBarManager.sharedInstance().timeString = "13:37"
SDStatusBarManager.sharedInstance().bluetoothState = .hidden
SDStatusBarManager.sharedInstance().batteryDetailEnabled = false
SDStatusBarManager.sharedInstance().enableOverrides()

What does it do (line by line)?

• Change the name of the carrier to Sinplicity. If we do not give any value, the "Carrier" label is just replaced by ●●●●●.
• Set the time label to a precise value. This value will never be increased during the execution. In fact, since it’s just a string, you can set anything you want (not just time). If you set nothing, the default value will be 9:41 (why 9:41?).
• Set the Bluetooth state icon to hidden. You can choose between this, Visible Dimmed and Visible and Connected.
• Hide the battery details (the charge percentage).

3 — Be a good citizen!

The SimulatorStatusMagic customization is persistent. When the UI Tests are done, the status bar stay customized for all applications! So, to be a good simulator citizen, we have to disable the customization by ourselves. It should be done in the tearDown() method of our XCTestCase. You just have to call disableOverrides() like this:

override func tearDown() { 
    super.tearDown()  
    SDStatusBarManager.sharedInstance().disableOverrides() 
}

Compare

And that’s it! That was simple huh? Now, you just have to run fastlane snapshot again, grab a coffee and compare the results. As you can see, this is a lot sexier, no? If you want a detailed comparison, you can check the full result before status bar customization and the result after status bar customization.

Would you like to know more?

The code of the demo project of this article is available on github.

This post is a part of a series on what we can do with fastlane on screenshot automation. The first post on this was “Automate iOS Screenshots With fastlane” (a.k.a. “fastlane snapshot 101”). In future posts, I’ll explain how to:

• Handle some complex cases (like: waiting for the end of a loading),
• Setup snapshot in a project with multiple targets (1 project for n applications),
• Automatically integrate the generated screenshots into designs.

You could also take a look at the snapshot official documentation (which is pretty well made).

Thank you for reading! If you have any question, comment on this or resource to share: feel free to send me a mail (julien@sinplicity.fr) or a tweet (@juli1Quere).

A big thank to Jérémy Paul for the top illustration! Also, a big kudos to the fastlane and SimulatorStatusMagic for their essential tools!