Skip to content

Commit

Permalink
POC roborazzi add screenshots.md file
Browse files Browse the repository at this point in the history
  • Loading branch information
jeprubio committed Sep 25, 2023
1 parent 92ce41f commit b9cc05a
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .github/workflows/compare_screenshots.yml
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,4 @@ jobs:
with:
name: failure-report
path: 'reports/*'
retention-days: 14
retention-days: 1
43 changes: 43 additions & 0 deletions screenshots.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
## Screenshot testing
Screenshot tests compares current screenshots of the app with a set of desired ones. To achieve that we need to perform 2 tasks:

1. Generate and store a set of desired screenshots (also known as baseline).
These screenshots will be generated using a reference device to avoid differences based on Android devices/versions
2. Take screenshots of the app with this reference device and compare them with the baseline.
Then generate reports with differences detected

To perform these tasks we use [Roborazzi](https://github.com/takahirom/roborazziot) library which uses gradle tasks to generate baseline and store screenshots

## Add a new screenshot
To create a new screenshot create a new unitTest with Roboelectric in the test folder of the module to test:
@RunWith(RobolectricTestRunner::class)
or
@RunWith(ParameterizedRobolectricTestRunner::class)
depending if it's a parametrized test or not, use
@RunWith(Enclosed::class)
to mix them (`ButtonKtTest.kt` is an example of this)

Then use `captureRoboImage()` function to take the screenshot and use `ScreenshotUtils.getScreenshotName()` to set the name of the test.:

composeTestRule.onRoot()
.captureRoboImage(ScreenshotUtils.getScreenshotName())

For traditional views run an activity or check `TextInputTest.kt` example on how to use a dummy activity to load them inside.

## Check that changes in the screen are detected
`Compare Screenshots` job will run in each pr and will run the `verifyRoborazziDebug` gradle task that checks the screenshots. In case this fails it will
generate a report and upload it to azure.

## Access to screenshots test report
At the bottom of the action that has failed you'll see that a report has been uploaded either to azure or github artifacts (or both), this is still to be
determined.

Once that compressed file is downloaded an html report is there with the differences detected between the current screenshot (left side) and the
newly generated one (right side).

## Update screenshots baseline with a Github action
Either run the ci job `Update screenshot baseline` that will create the images and perform a commit for you or run the gradle task `recordRoborazziDebug` and
this way it allows you to check everything is ok before uploading the images.



0 comments on commit b9cc05a

Please sign in to comment.