wdio-visual-regression

Visual regression tool for webdriver.io based on resemble.js. PR's are welcome!

Features

• Default matchers for compare active viewport and elements
• Simple and flexible API for creating custom matcher
• Output report (Jasmine, Mocha, Cucumber) in JSON format (example)

How to use

1. Install the package

npm install --save-dev wdio-visual-regression

2. Import VisualRegression class and add it to service option in your webdriverio config file

const { VisualRegression } = require('wdio-visual-regression');

exports.config = {
  // other configuration
    services: [
        [VisualRegression, {/* options */}]
    ]
}

Note: You can find out all available options here

3. Use available commands:

browser.matchElement(name: string, element: WebdriverIO.Element): Promise<number>
browser.matchViewport(name: string): Promise<number>

Or create your own custom matcher for comparing anything that you need. See how to do it here

Also, you can take a look at example usage here

Getting Started

Follow to commands below for start dev environment

git clone git@github.com:ennjin/wdio-visual-regression.git
cd wdio-visual-regression
npm ci

For start development

npm run start

For production build

npm run build

Running the tests

For running the tests type command

npm run e2e

Built With

• node-canvas - HTML5 canvas implementation for nodejs
• Resemble.js - Image analysis and comparison

License

This project is licensed under the MIT License - see the LICENSE.md file for details