Snapshot Testing in Android app using Shot library

Testing is always complex, especially when it comes to testing a UI. This article will discuss how to make UI Testing in android easier using snapshot testing.

When I heard about snapshot testing, I thought this was a great way to test my UI; it is fast and reflects what we are doing in the real world (comparing the UI presented by our app with what designers expect in Figma/Zeplin).

To do snapshot testing, you only need a recorded/expected snapshot to verify the UI and the new/actual snapshot to check any unexpected changes in our UI.

You can find a good explanation about snapshot testing in this article.

An introduction to snapshot testing on Android in 2021

As for me, of the recommended ways for the snapshot testing is using a library called Shot.

GitHub - pedrovgs/Shot: Screenshot testing library for Android

This library provides simple, configurable, and reliable snapshot testing for our android app. Let’s try to implement Shot Library.

Setup

The setup process is easy, and the original GitHub repository already gives a complete setup process. So, I will just be telling you what I do to set up Shot in my sample project.

Add the dependency in our project/build.gradle.

buildscript {
    ...
    dependencies {
        classpath "com.karumi:shot:5.13.0"
    }
    ...
}

apply the plugin in all our modules inside our project. In my case, since this is only a sample project with only one app module, I only applied the plugin in app/build.gradle.

plugins {
    ...
}

apply plugin: "shot"

android {
    ...
}

configure the testInstrumentationRunner in all modules.

android {
    ...
    defaultConfig {
        ...
        testInstrumentationRunner "com.karumi.shot.ShotTestRunner"
        ...
    }
}

just like that, now sync the gradle and you are ready to go.

Testing

As I mentioned at the beginning of the article, snapshot testing requires the recorded/expected snapshot as the source to verify the test.

To get the recorded/expected snapshot, first, we need to create the test script. In my case, I am creating the UI using jetpack compose. So, the test script would look like this:

If you want to learn more about testing in jetpack compose, I have written an article that discusses the topic, go read it here:

Test Your Jetpack Compose Layout

then run this gradle script to generate the recorded/expected snapshots.

./gradlew executeScreenshotTests -Precord

you can find the result in /app/build/reports/shot/debug/record/index.html . It should look like this:

now, to verify the actual snapshots, run this Gradle script.

./gradlew executeScreenshotTests -Precord

you can find the result in /app/build/reports/shot/debug/verification/index.html . It should look like this:

As you can see, Shot will compare the expected and actual screenshots and give the diff, so we can notice if there are unexpected changes in our UI.

Now try to add some changes to our UI, and let’s see if Shot can notice it.

Let’s say we change the number of posts, followers, and following in the UI.
When I run the Gradle script to verify the test, it will fail and shows something like this:

and if we open the index.html will show something like this:

It shows the diffs as expected!

But what if we consider the above case as the expected result as well? since it is only a small diff and can be happened since the number of posts, followers, and following will be different on every account?

Shot has provided a good configuration. We can configure the tolerance factor on a scale of 0–1, 0, but always be careful on setting the tolerance. Make sure you got the best number for your case.

In my case, the tolerance of 0.1 is already enough to cover the above case.

android {
    ...
    shot {
        tolerance =  0.1
    }
    ...
}

Now re-run the test

The test passed as expected!

That’s it! We have already discussed all basic usage of Shot to do the snapshot testing in android. If you have anything to ask, feel free to write in the comment section.

Thanks for your time!

About The Author

I am an Android Developer who loves the world of arts. I work as an Android Developer, but sometimes I do a design challenge with my friends to fill my spare time.

LinkedIn • Medium • Dribbble • Twitter • Instagram