Snapshot Testing

1. What is snapshot testing?
2. Snapshot Testing on iOS
3. Snapshot Testing on Android
– Setup
– Writing the tests
– Execution
4. Bibliography

In the fast-paced world of software development, where changes are constant and updates are frequent, ensuring the stability and consistency of our applications is more crucial than ever. For this reason, application testing has become a very important process.

There are many types of tests, such as unit, security, performance tests, and various mechanisms to execute them like Appium, XCTest, Detox…

In this article, we will delve into one of these types: snapshot testing.

What is snapshot testing?

Snapshot testing is a testing method that captures an image of the screen as an initial reference. Each time the tests are run, a new image is generated and compared to the original reference. This allows for the detection of any changes in the visual interface.

Snapshot Testing on iOS

Based on the library created by the company Point Free, we can test views regardless of whether they are made in SwiftUI or UIKit. There are two ways to perform these tests, the first of which is Image strategy.

Image Strategy is a strategy where a screenshot is generated and analyzed pixel by pixel to see if there has been a change in the new view compared to the original view. If there is any change, the test fails. It is worth noting that the first time the tests are run, they will fail because there is no base view; this will be created when the first test fails.

Another strategy is recursive strategy description, which, instead of generating an image, generates a description of the view where the text description of the original view is compared with the one generated in the test. If any text string has changed, the test will fail.

To perform these tests, simply import the XCTest and SnapshotTesting libraries, generate an instance of the view you want to test, and use the assertSnapshot function, passing the view instance and the type of strategy to follow as parameters:

We also have the option to generate views for different mobile devices by adding the on parameter to the recursion type and indicating the device to be tested.

Now let’s look at a complete test. The login of the app will be tested with the user “test” and the password “test”. First of all, set the record parameter to true to indicate that this is the view to be taken as a reference:

Once we compile the test, an error will appear because, as mentioned earlier, there is no reference image since we just created it. The error message indicates the directory path where the reference image is located. If we run the test again, it will show that it is a correct test because we already have a reference image and it is exactly the same as the image we just generated:

If we now change the user, the test will fail and indicate the directory path containing the reference image and the path of the image generated in the last test so that we can check what has changed:

Snapshot Testing on Android

In the case of Android, we have the Paparazzi framework. Although it can be used with both traditional views and Jetpack Compose, we will explain how to compare the previews generated from a composable.

Setup

To use Paparazzi, the first step is to add the dependency to our gradle file:

And then add the plugin:

Writing the tests

When writing the tests, the first step is to define a rule:

Where we will indicate the maximum allowed difference between screens and the device type.

Next, we write our test. This can be done in two ways:

1. Directly indicate which Composable we want to test:

2.Use all previews by leveraging the Showkase library:

PreviewProvider is an object that returns the list of all previews in the project thanks to the getMetadata() function of Showkase:

Execution

Before running the tests, it is important to generate the predefined images. These will be used by Paparazzi as a reference to know if our composables have changed. To generate the images, we use the following command: