During my co-op, I was given a specific task: implement a visual test suite to check that the parts that make up our Analytics app don’t fall prey to unexpected styling changes. In this article, I will be talking about what tools I used, the contributions I made to them, and what challenges I had to overcome.

What are visual regression tests?

If you are a newbie to testing, I advise you to carefully read this article that one of our previous co-ops wrote.

In short, every functionality of a product should be covered in tests. Mainly, there are three types of tests:

  • Unit: covers small parts of the app logic
  • Integration: checks the interoperability between those parts
  • End-to-End: tests¬†the full functionality of the app

With these in place, we’re sure that our product is up and running and no developer can break the code. But what about the style?¬†Visual regression tests ensure that the way a product looks does not regress over time.

This requires running the app and taking “pictures” of the components that build it. This process has to be run at every change in the code, and each time the image must be compared to the one made before. That is how you make sure that nothing unexpected has changed, like one very liberal CSS selector that affects components that we’re not aware of.

Read More …