element-android/docs/screenshot_testing.md
Benoit Marty 19500a8cd9 Upgrade a few dependencies and update the codebase
Use fully qualified R classes
Fix or ignore deprecation
Update github actions and ensure JDK 17 is used
Add group for paparazzi
Fixes Lint issues
Fix Jacoco configuration
2024-07-15 18:12:20 +02:00

2.3 KiB

Screenshot testing

Overview

  • Screenshot tests are tests which record the content of a rendered screen and verify subsequent runs to check if the screen renders differently.
  • Element uses Paparazzi to render, record and verify android layouts.
  • The screenshot verification occurs on every pull request as part of the tests.yml workflow.

Setup

  • Install Git LFS through your package manager of choice (brew install git-lfs | yay -S git-lfs).
  • Install the Git LFS hooks into the project.
# with element-android as the current working directory
git lfs install --local
  • If installed correctly, git push and git pull will now include LFS content.

Recording

  • ./gradlew recordScreenshots
  • Paparazzi will generate images in ${module}/src/test/snapshots, which will need to be committed to the repository using Git LFS.

Verifying

  • ./gradlew verifyScreenshots
  • In the case of failure, Paparazzi will generate images in ${module}/out/failure. The images will show the expected and actual screenshots along with a delta of the two images.

Contributing

  • When creating a test, the file (and class) name names must include ScreenshotTest, eg ItemScreenshotTest.
  • After creating the new test, record and commit the newly rendered screens.
  • ./tools/validate_lfs can be ran to ensure everything is working correctly with Git LFS, the CI also runs this check.

Example

class PaparazziExampleScreenshotTest {

    @get:Rule
    val paparazzi = Paparazzi(
            deviceConfig = PIXEL_3,
            theme = "Theme.Vector.Light",
    )

    @Test
    fun `example paparazzi test`() {
        // Inflate the layout
        val view = paparazzi.inflate<ConstraintLayout>(R.layout.item_radio)

        // Bind data to the view
        view.findViewById<TextView>(R.id.actionTitle).text = paparazzi.resources.getString(CommonStrings.room_settings_all_messages)
        view.findViewById<ImageView>(R.id.radioIcon).setImageResource(R.drawable.ic_radio_on)

        // Record the bound view
        paparazzi.snapshot(view)
    }
}