js-test/

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

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.$('.homeSplashFade');
 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

5. Iterating through many tests

Use viewports.json to define the different viewports you would like to test across.

{
 "viewports": [
  {
   "name": "apple iphone 7 plus",
   "width": 1080,
   "height": 1920
  },
  {
   "name": "apple iphone 5",
   "width": 640,
   "height": 1136
  },
  {
   "name": "htc desire",
   "width": 480,
   "height": 800
  },
  {
   "name": "Apple ipad mini",
   "width": 768,
   "height": 1024
  },
  {
   "name": "apple ipad air",
   "width": 2048,
   "height": 1536
  },
  {
   "name": "dell xps 13",
   "width": 1920,
   "height": 1080
  },
  {
   "name": "apple macbook air 13-inch",
   "width": 1440,
   "height": 900
  }
 ]
}
copy

This is then imported into the test and can be used like so:

for (const d of data.regression) {
 for (const j of screens.viewports) {
  describe(
   'Image regression testing for ' + d.selector + ' on ' + j.name,
   () => {
    it('has no pixel difference', async () => {
     const screenName = kebabCase(j.name);
     const savePath = `${cwd}/regression/src/${screenName}${d.savePath}`;
     await screenshot(d.selector, savePath, j);

     const res = await PixelDiff.diff({
      imgOnePath: cwd + '/regression/src' + savePath,
      imgTwoPath: cwd + '/regression/temp' + savePath,
      dest: cwd + '/regression/diff' + savePath,
      output: true
     });

     expect(res).to.equal(0);
    });
   }
  );
 }
}
copy