Awesome

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

Install the package

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

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

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