Skip to content

ennjin/wdio-visual-regression

Repository files navigation

wdio-visual-regression

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

npm GitHub

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

  1. 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 [email protected]: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

License

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