Visual Regression Testing (how you can move fast and don’t break things)

  1. List all pages/routes in my app.
  2. List the main breakpoints/viewports.
  3. List different scenarios that can be done on each page.
  4. Manually open each page on each of the listed breakpoints and go through each of the available scenarios, and make sure nothing has broken, which is super time consuming and error prone.

Solution:

What if I told you that you can automate all the previous steps with one command npm test, it tells you after it finishes whether everything is fine so you can go ahead with your deployment with confidence, or things do look different on these pages and gives you the visual difference, so you can fix it before it goes to QA, or in most cases to live.

Let’s see it in action:

I’ve made two dummy samples on jsbin, just for demo purposes https://jsbin.com/yutoho, https://jsbin.com/toruge, and let’s assume I’ll be testing for these two breakpoints 1440px and 320px.

Tools used:

  1. PhantomJs (headless browser to capture screenshots of the site at different breakpoints and evaluate scripts to simulate different scenarios).
  2. Image-diff (to diff between expected/reference screenshots and current ones)

Full Code:

test/index.js
test/create-screenshot.js
package.json
Expected image
New image
diff image

Enhancements:

I could’ve made some ES6 enhancements like using let and const instead of var, arrow functions instead of traditional function, and template literal which is more readable than addition of strings and variables, but I wanted to make it as simple as possible, so it just get to the point.

Alternatives:

  • Percy (starts at $149/month)

One last thing…

If you liked this article, click the💚 below so other people will see it here on Medium.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store