Visual Regression Testing

CSS like any other source code needs refactoring. We work to improve code readability and reusability, to make CSS faster to execute. We try alternative solutions (like switching from flexbox to grid). As we are done with the code changes we need to ensure the app’s “look & feel” didn’t alter. It can turn out quite a challenge if do it manually – the app may consist of dozens of pages that need to be tested for every defined viewport breakpoint. Here you can take advantage of Puppetry. All what you need to do is to create tests visiting app pages for given breakpoint viewports and call page.assertScreenshot or TARGET.assertScreenshot method.

CSS regression test case

Just before starting refactoring we run the tests with "update comparison images" flag on.

Update comparison images checkbox is on

Since we have no assertions the report is "green". However during the run Puppetry creates screenshots of every requested page (or target) and keeps them as original for further comparison.

Test report

Now we can do the refactoring. In order to see how it really works we are going to consider a case were refactoring breaks the existing styles.

Well, let's say we has the following styles applied to the heading in banner section:

body {
  color: white;
}
.banner h1 {
  font-size: 48px;
}

During refactoring we decided that general rule for typography would be:

h1 {
  color: black;
}

Thus we didn't think that it would also apply for banner heading, which inherits currently color from body.

So we run the test and this time with "update comparison images" set off.

Update comparison images checkbox is off

The test report informs about a failure. It also provides the expected (original) screenshot and the actual and tries to build a diff image.

CSS regression test report

Diff image