Skip to content

alaca/vrt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Visual Regression Testing Tool

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published