Package Exports

vrt-tool
vrt-tool/bin/vrt-tool.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vrt-tool) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Visual Regression Testing Tool

Install

npm i vrt-tool

Setup VRT

Add VRT scripts to your project package.json file

{
  "scripts": {
    "vrt-init": "vrt-tool init",
    "vrt-setup": "vrt-tool setup",
    "vrt-test": "vrt-tool test",
    "vrt-reports": "vrt-tool reports"
  }
}

Then run

npm run vrt-init

This will create vrt.config.js file and .vrt directory in your project root.

Open the vrt.config.js file and add testing scenarios.

Example:

module.exports = {
    scenarios: [
        {
            name: 'Homepage',
            sourceUrl: 'http://localhost:10008/home',
            testUrl: 'http://localhost:10008/home',
            onPage: async page => {
                await page.waitForTimeout(3000);
            },
        },
    ],
};

onPage callback will receive the page argument which is the Puppeteer's Page class instance.

Running tests

Run npm run vrt-setup

This command will take a screenshot of sourceUrl for each defined scenario.
Make changes to sourceUrl page (edit html, etc. )
Run npm run vrt-test

This will take a screenshot of testUrl and compare it with sourceUrl screenshot.

If sourceUrl and testUrl screenshots don't match, a report will be generated.

Reports

Report will be generated each time when sourceUrl and testUrl screenshots don't match.

You can list all reports by running npm run vrt-reports