javascript-visual-regression

Visual Regression Testing with puppeteer and spectre

Installation & setup

Prerequisites

you need nodejs, git, docker and docker-compose installed

Install spectre

git clone https://github.com/wearefriday/spectre.git

docker-compose run --rm app bundle exec rake db:setup

docker-compose up

Install this repository

git clone https://github.com/weaddquality/javascript-visual-regression.git

npm install

Run tests

npm test -g ./examples for all tests

npm test -g ./examples/<testfile> for a specific test

Want to set a specific Spectre URL? Set a environment variable named spectreUrl with the url, before running the tests.

Using PowerShell: $env:spectreUrl = "<url to spectre instance>"; npm test -g ./examples

Using bash: spectreUrl=<url to spectre instance> npm test -g ./examples

Run tests with jenkins

you need jenkins installed with pipeline plugins

fork this repository

setup a deploykey on your github-repository

add credentials in jenkins with that deploykey

create a pipeline-job in jenkins

click thePipeline-tab and on Definition choose Pipeline script from SCM

add your repository and credentials with the deploykey

save and run your pipeline!

Brief plan / TODO

Generate Screenshots

• puppeteer

Compare Images (alternatives to look into)

• resemblejs (see branch)
• pixelmatch
• spectre

Visualize Results (test report/administration)

• spectre

Build

• jenkins
• jenkinsfile
• travisci

Packaging

• ansible
• docker

Misc.

• eslint
• gulp