No emulator needed for screenshot tests of Compose @Previews on CI | by David Vávra | Jul, 2022

Screenshot tests are the most efficient way how to check your Look at layer. And if you are working with Compose, you previously have them — @Preview-annotated procedures for Android Studio. I confirmed this in my earlier write-up that demonstrated how to hook up Showkase & Facebook’s screenshot screening library. But this library has a downside — it calls for instrumentation (unit or emulator) to run. Which complicates the set up on CI and leads to flakiness. In this post I will clearly show you how to configure it with out an emulator, which includes a CI set up.

Paparazzi

Screenshot tests without having an emulator is doable with a Paparazzi library from Sq.. They use Android Studio renderer to render Android Views and Composables in typical unit exams (“test” folder). No have to have for instrumentation (“androidTest” folder). This means that screenshot exams are concluded in seconds as an alternative of minutes. You can use the lowest priced cloud-centered CI device and it eliminates head aches with operating Android emulator on CI. This library has not too long ago hit a steady variation 1…

If you want to operate Paparazzi domestically, just use these two Gradle jobs:

• ./gradlew recordPaparazziDebug captures all screenshots into a “snapshots” folder
• ./gradlew verifyPaparazziDebug verifies if screenshots in the “snapshots” folder match and allows you know which kinds are unique

Showkase integration

I currently explained this library in my past report. In shorter, it captures all your @Preview-annotated solutions and makes them offered for screenshot screening. Bounce directly into my instance integration, if you need to have total information.

This class is the principal aspect of Showkase-Paparazzi integration:

TestParameterInjector

The course is using TestParameterInjector library from Google. It enables to build several device checks from a solitary @Check process, which is great for screenshot screening. This case in point will create a screenshot exam for each and every @Preview-annotated strategy. And as a bonus, screenshots for darkish mode & 1.5 font scale! This can be quickly extended with distinctive locales, display sizes, orientation and so on.

CI integration

You want to examine screenshots with each and every pull request. You can quickly catch regression bugs even ahead of merging the PR. But when you insert or modify options, screenshot improvements could be intentional. For that reason, my CI integration is effective like this:

• It compares the screenshots with the existing kinds. If they are the identical, the check out is green.
• If they are diverse, it pushes the unique screenshots to a various branch based on the PR department.
• It posts a remark to the PR with a website link to evaluate the two branches. GitHub does a fairly good occupation of exhibiting dissimilarities among the pictures.
• If the change is intentional, you can only merge the department back again to the PR branch. If not, you ought to fix the regression bug.

GitHub Actions

I really like GitHub Actions CI: seamless GitHub integration, cost-free for small assignments, tons of local community-made Actions which you can reuse. So my example is for Steps, but the principle is the very same for all CIs:

Test out the bash script for processing failed screenshot assessments. And appear at an example pull ask for. This check ran only 2:43 minutes. And most of the time was expended on making the app.

Summary

I confirmed you how to combine Showkase library with Paparazzi library and create screenshot checks for all your Compose @Preview-annotated solutions, together with dim mode & 1.5 font scale. I confirmed you an instance Github Steps integration with a workflow for merging intentional changes in screenshots. Almost everything operates in seconds without the need of the require of Android emulator. Check out out the GitHub repo for all details.

I imagine that with this brief & uncomplicated set up, screenshot tests can come to be as handy and common as device checks of the company logic.