Screenshot Testing with Shot 📸

What is Screenshot Testing 📸

Screenshot testing is a technique used to validate user interface components' visual appearance and consistency, such as buttons, screens, or fragments, by capturing and comparing screenshots of those components in different states. It involves rendering a UI component with predetermined data and taking a screenshot of it, allowing you to verify its visual correctness and identify any unintended changes.

Setup and Config 🏭

We are using Shot library, If you want to include it in your project, Modify your root build.gradle file:

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

And then apply it in your module build.gradle file as a plugin:

plugins {
  ...
  id("shot")
}

And make sure to configure also the instrumentation test runner:

defaultConfig {
    ...
    testInstrumentationRunner = "com.karumi.shot.ShotTestRunner"
    testApplicationId = "com.tarkalabs.uicomponents"
  }

Gradle Tasks 🐘

In your gradle tasks on the right-hand sight in Android studio, you can see one task called executeScreenshotTests, this one allow you to compare the screenshots, if you want to record the screenshots, consider running the following command:

./gradlew executeScreenshotTests -Precord

Pro Tip: Consider saving the Screenshots tasks in your configuration for Android Studio like the following:

Creating Screenshots Tests ✍

To write screenshot tests, do the following:

• create a new class under androidTest source set.
• Extend the test class with ScreenshotTest:

@RunWith(JUnit4::class)
class MyScreenshotTest : ScreenshotTest {
    // ...
}

• Create your rule for compose or the activity or fragments, you can even inflate views and do screenshot for them:

@get:Rule val composeRule = createComposeRule()

• Write individual test methods to define your screenshot test cases. Use the compareScreenshot() method to compare and validate the screenshots.

@Test
fun myScreenshotTest() {
    composeRule.setContent {
        // Set up your Compose UI components here
    }

    compareScreenshot(composeRule)
}

Inorder to record only specific screenshot test. Kindly use the below command

executeScreenshotTests -Precord -Pandroid.testInstrumentationRunnerArguments.class=com.tarkalabs.uicomponents.screenshots.TUIMenuItemTest

We should change the parameter name based on the respective class. In the above snippet we are tyring to record the TUIMenuItem.

That's it! You've now set up and can start using the screenshot testing library in your Android project. Remember to refer to the library's documentation for more advanced usage and customization options.

Resources 📚

• Github Repo of Android-screenshot-testing-playground
• Blogs: An introduction to snapshot testing on Android in 2021
• Droidcon Berlin 2021
• Droidcon London 2021