CSS Regression Testing

We can achieve CSS regression testing by using an assertion library in conjuction with Puppeteer and Pixel Diff.

Prequisites

Using yarn

yarn install --dev mocha chai puppeteer pixelmatch pngfs babel-polyfill babel-preset-env babel-plugin-module-resolver
copy

Using kratos

kratos install js-controllers pixeldiff
kratos install js-test regression
shotgun run
copy

Folder setup

Ensure that you have a regression folder to store all the images.

# Example regression layout
regression
├── diff
│   └── test.png
├── src
│   └── test.png
└── temp
    └── test.png

3 directories, 3 files
copy

Using Regression CLI

Preparation

Application

1. Create a babelrc file

{
  "presets": ["env"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "controllers": "./controllers"
        }
      }
    ]
  ]
}
copy

2. Saving a screenshot

This is not the test itself but a simple node script to get the initial base working:

const PixelDiff = require('./controllers/pixeldiff');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  console.log('Opening browser');
  await page.goto('http://localhost:3000');

  const el = await page.$('.homeSplashFade');
  await el.screenshot({ path: 'regression/src/test.png' });

  console.log('Closing browser');
  await browser.close();

  /*
    console.log('Comparing images');
    const res = await PixelDiff.diff({imgOnePath: 'test.png', imgTwoPath: 'test2.png', dest: 'dest.png', output: true});
    console.log(res);
    */
})();
copy

3. Writing the test file

Create your test file. Any example test file looks like the following:

/**
 * Regression tests
 * @author Dennis O'Keeffe
 */
require('babel-polyfill');
const expect = require('chai').expect;
const cwd = process.cwd();
const PixelDiff = require('controllers/pixeldiff');
const puppeteer = require('puppeteer');

console.log(PixelDiff);
console.log(cwd);

const screenshot = async (selector, savePath, location = '/') => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  console.log('Opening browser');
  await page.goto('http://localhost:3000');

  const el = await page.$('#root');
  await el.screenshot({ path: savePath });

  console.log('Closing browser');
  await browser.close();
};

describe('It works functionality', () => {
  it('Expects true to be true', () => {
    expect(true).to.be.true;
  });
});

describe('Image regression testing', () => {
  it('has no pixel difference', async () => {
    console.log('Comparing images');
    await screenshot('.homeSplashFade', cwd + '/regression/temp/test.png');

    const res = await PixelDiff.diff({
      imgOnePath: cwd + '/regression/src/test.png',
      imgTwoPath: cwd + '/regression/temp/test.png',
      dest: cwd + '/regression/diff/test.png',
      output: true
    });
    expect(res).to.equal(0);
  });
});
copy

4. Running the test from the CLI

mocha --compilers js:babel-core/register --timeout 0 ./test/regression/regression.mocha.js
copy