# Automatic visual diffing with Puppeteer

DevFeed: [Automatic visual diffing with Puppeteer](<https://devfeed.tech/articles/automatic-visual-diffing-with-puppeteer-35504.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/2017-puppeteer-tests/>)

Author: Monica Dinculescu

Published: 2018-01-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Puppeteer](<https://devfeed.tech/topics/puppeteer.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Chai](<https://devfeed.tech/topics/chai.md>), [Mocha](<https://devfeed.tech/topics/mocha.md>), [npm](<https://devfeed.tech/topics/npm.md>), [Selenium](<https://devfeed.tech/topics/selenium.md>), [Express](<https://devfeed.tech/topics/express.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [code](<https://devfeed.tech/tags/code.md>), [npm](<https://devfeed.tech/tags/npm.md>), [selenium](<https://devfeed.tech/tags/selenium.md>), [testing](<https://devfeed.tech/tags/testing.md>)

## AI overview

A tutorial on using Puppeteer to take screenshots of web application routes and compare them with golden images for visual regression testing. The approach works with Chrome, supports wide and narrow viewports, and can exercise UI states such as an opened navigation drawer.

## Source excerpt

So testing, right? We should do it. The thing is, testing is hard, and good testing is reaaaaaaally hard, and tbh I'm pretty bad at testing. So I end up not testing my apps, and then I feel guilty about it, but I'll stop you now: you can't run guilt on Travis. If this sounds familiar, then this blog post is for you. I did a little song-and-dance that sets up Puppeteer* , takes screenshots of your app (like, all the routes you care about), and then compares them to the "golden" ones. If they match, your test passes! Yes, it only works on Chrome. No, it's not actually unit testing. Yes, it's literally just counting pixels but you know what? It counts them in both a wide and a narrow viewport size and any testing is better than no testing at all; fight me. * Puppeteer is an npm library that lets you control Chrome. You know, like a puppet. In particular, Puppeteer makes it super easy to take screenshots (and click on things in your page). It's like a waaaaaaay less infuriating Selenium, but infinitely harder to spell. This post looks long because I've put all the code I have so that you can copy paste it. Skip to the good part if you already know how to test. Do the npm If you want to test things with Puppeteer, you have to setup a thing for the tests, a server that launches your site, and then Puppeteer to look at that site. I have this in my package.json to wrangle these things: "devDependencies": { "chai": "^4.1.2", "mocha": "^5.0.0", "puppeteer": "^1.0.0", "pixelmatch": "^4.0.2", "polyserve": "^0.23.0" } Explanation: I chose Mocha/Chai for testing because that's what I'm used to. You can literally use any other testing framework you're comfortable with; I don't think it matters. Pixelmatch is the thing that diffs two images and tells you how many pixels they differ by. It's super awesome 🏆. Polyserve is what I use as a local server. You can use Python or Express or whatever you cool kids use. I'll point out in the code where it's Polyserve specific (literally 2 lin