Pixaton is a collection of Puppeteer helpers for testing UIs by pixel diffing screenshots.

On an M1 MBP, 120 screenshots take about 60 seconds, which is 12X faster than the alternative SaaS offerings.

For speed, Pixaton reuses the headless browser instance, so some setup is required.

• See demo-tests/_setup.js
  • There you can specify your defaults. For example, the viewport sizes and preferred color schemes.
• It uses --experimental-test-isolation=none, so you’ll need Node v22.9+
  • See the make demo

Pixaton forwards its configuration options to Puppeteer and Pixelmatch, so it doesn’t limit versatility. Take a look at index.d.ts for the options.

Overview

npm install puppeteer pixaton

// Create a wrapper in your main setup file:
import { myTestPixels } from './_setup.js'

myTestPixels(
  import.meta.filename, // test filename
  '/login', // URL 
  'main', // CSS Selector
  {
    async setup(page) {
      await page.type('input[type=email]', '[email protected]')
    }
  }
)

Here’s an example report, where the login button now has rounded corners and the font has been slightly changed.

Side-By-Side

Slider (onion skin)

Hitting Approve renames the corresponding .candidate.png to .gold.png, and deletes .diff.png

The gold screenshots are meant to be saved in your repository. So exclude the temporary PNGs.

.gitignore

demo-tests/*.diff.png
demo-tests/*.candidate.png

Getting Started Demo

• Checkout this repository
  • git clone https://github.com/ericfortis/pixaton.git
  • cd pixaton
• npm install
• npm install mockaton (for running the demo app)
• npm run demo
• npm run demo-test (in another terminal tab)

The above report will open showing a diff of the login button with rounded corners.

More Examples

• Mockaton uses Pixaton, so you could explore those examples as well.