WordPress Theme visual regression testing

Some of our newer WordPress Theming projects also have some screenshot testing build into them. This is used to make sure the site didn’t change in unexpected or unwanted ways throughout releases.

Basically all it does, is navigate to the provided pages and takes full page screenshots of them on different screen sizes. These screenshots are stored and the next time it uns there is a diffing algorithm that compared the two images for changes.

If there are any you will get a comparison view of the two versions, with the changes highlighted in the image.

This testing step really is only meant to make sure there are no new errors introduced in later steps of the process.

tooling:

The backbone of most of the testing I’ve done is jest as the test runner. For this project I also used puppeteer and jest-image-snapshot.

So a basic single snapshot might look like the following:

it('matches snapshot', () => {

    await page.goto('https://url-of-dev-site/', {
        waitUntil: 'networkidle2'
    });

    const screenshot = await page.screenshot({ fullPage: true });

    expect(screenshot).toMatchImageSnapshot();

});