Flutter: screenshot testing as a solid UI regression tool
Some time ago I was working on an accessibility feature for one of my Flutter apps. The goal was to make sure that the app looks good enough when used with large fonts. Thinking of a way to test the results on different screens and with different font sizes I came up with an idea to write screenshots tests for this purpose.
Introducing this technique was quite a good idea as it helped to kill two birds with one stone:
- I was able to quickly verify that the app looks good on different screens with various font sizes without even running the application itself.
- I got tests that serve me as a nice UI regression tool.
Preparation
Golden toolkit is a cool package that helps in writing screenshots tests. I also created the following devicesWithDifferentTextScales list. It contains the devices’ configuration which helps in writing shorter tests.
You might’ve noticed that I use font sizes up until 1.6. I checked how it looked and thought that it should be reasonable enough to have this value as the max allowed text scale factor for my app. I used TextScaleFactorClamper widget from this article to make sure that 1.0 is the min and 1.6 is the max allowed values in the app.
The following piece of code shows the configuration which is used by every golden test in my app.
The setHarCacheHttpOverrides is used for the approach I described in my previous article and makes sure that the tests use the fake data from the HTTP cache instead of making real HTTP calls.
Testing
Here is the code for one of the tests I came up with. The test itself should be self-explanatory. It uses katokMaterialAppWrapper method and devicesWithDifferentTextScales list mentioned above.
Results
Here are the images which were added to the corresponding ‘goldens’ folder after running flutter test --update-goldens command:
And here is how the screenshots themselves look like (for iPhone 8, 11, and SE respectively):
As you see, you can quickly get the feeling of how ‘home’ screen will look like on the specified devices with different text scale factors. I also used this approach and coved the rest of the few screens that app has.
Conclusions
When I tried golden toolkit package I loved the way how easy it is to create snapshot (golden) tests. I use this package on different flutter projects and it has already saved me a good amount of time. It’s up to you and your circumstances whether you’ll choose to write golden tests for small widgets or for complex full-screen widgets, but it’s definitely worth giving a try.
