Checks your site for a visual regression with BackstopJS visual regression testing tool.
It parses the site map, builds a list of all the pages, then takes screenshots of all the pages in multiple resolutions.
After that you can make changes to your site, take another round of screenshots. The tool compares the two sets of screenshots and lets you know what changed.
Note that the site you take reference screenshots doesn't need to be the same site you test. So long as their srtucture is the same, that should be fine.
I.e. you can take reference screenshots from a production site and then compare it to the same site running on your local machine.
- Clone this repository and open it
- Install dependencies
$ yarn- Compile the project
yarn build- Take reference screenshots of your site
yarn reference https://yousite.com-
Do changes to your site
-
Check for visual regression
yarn test https://yousite.com- If you are happy with the changes, approve them to make the last test a reference
yarn approveThe tool takes a site name as a parameter. It looks for a site map presumed to be at http://yoursite.com/sitemap.xml.
BackstopJS configuration is hardcoded in src/backstop-config.ts. You need to edit that file if you want to change screen resolutions, etc. See BackstopJS documentation for details.
This project is written in Typescript. The source files are in src directory.
To start the project in development mode mode
$ yarn devBased on node-ts-starter by Horus Lugo.