AFF#7 - Golden Testing

What is Golden Testing

Golden testing is a powerful technique for ensuring that the appearance of your Flutter app remains consistent across different screen sizes, devices, and platforms.

In short:

Why I like Golden Testing

• Easy to set up and use

• Reliable

• Thorough

• Maintainable

• Identifies subtle UI inconsistencies that other methods might miss

Comparison to other testing methods

Reason for Using Only Golden Tests

• Efficiency at Its Best: Detecting UI changes, especially unintended ones, can be tedious. Golden Testing makes this process swift and straightforward, saving precious development time.

• More than UI: The app has to run to create screenshots, so you will also detect other bugs than UI ones.

• Scalability for the Future: Once set up, it’s easy to add new screens.

Other thoughts

• Some think it's overkill for small projects, but in my experience, it's beneficial regardless of project size.

So how does it work.

I will deep dive into setting up Golden Testing in next week’s newsletter, but here is a screenshot of a Golden Test from my Fast Flutter Template project.

For this example, I added some horizontal padding to the password field. You can see this on the left image. This is quite easy to spot, because it’s 8px, but what if it’s a minor change as in the next 2 images?

Now, the 2 images almost look identical. At least to my eye (I’m bad at UI ;) )

And that’s where Golden Testing comes in handy. If you run flutter test, it will create an error and also diff images. Now, it’s easy to spot where the error comes from.

I hope this illustrates the use of Golden Tests well.

Let’s wrap it up

For me, it’s all about user experience. And that starts with a consistent UI. That’s what the users see first. You don’t want to introduce inconsistency with new updates. That’s why I like Golden Testing.