Skip to content

ozmoroz/backstop-site-test

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Check visual regression of a site

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.

Getting started

  1. Clone this repository and open it
  2. Install dependencies
$ yarn
  1. Compile the project
yarn build
  1. Take reference screenshots of your site
yarn reference https://yousite.com
  1. Do changes to your site

  2. Check for visual regression

yarn test https://yousite.com
  1. If you are happy with the changes, approve them to make the last test a reference
yarn approve

Configuration

The 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.

Development

This project is written in Typescript. The source files are in src directory.

To start the project in development mode mode

$ yarn dev

Based on node-ts-starter by Horus Lugo.

About

Visual regression testing for static sites.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages