https://github.com/ennjin/wdio-visual-regression

Visual regression tool for webdriver.io
https://github.com/ennjin/wdio-visual-regression

image-compare nodejs visual-regression-testing webdriverio-plugin

Last synced: 3 months ago
JSON representation

Visual regression tool for webdriver.io

• Host: GitHub
• URL: https://github.com/ennjin/wdio-visual-regression
• Owner: ennjin
• License: mit
• Created: 2020-01-27T19:31:39.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-06T11:07:45.000Z (about 1 year ago)
• Last Synced: 2024-03-25T07:02:45.232Z (8 months ago)
• Topics: image-compare, nodejs, visual-regression-testing, webdriverio-plugin
• Language: TypeScript
• Homepage:
• Size: 1.17 MB
• Stars: 3
• Watchers: 1
• Forks: 3
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-regression-testing - wdio-visual-regression - Visual regression tool for webdriver.io (Tools and frameworks)

README

        
# wdio-visual-regression

Visual regression tool for webdriver.io based on [resemble.js](https://github.com/rsmbl/Resemble.js). PR's are welcome!

[![npm](https://img.shields.io/npm/v/wdio-visual-regression)](https://www.npmjs.com/package/wdio-visual-regression)

[![GitHub](https://img.shields.io/github/license/ennjin/wdio-visual-regression)](https://github.com/ennjin/wdio-visual-regression/blob/master/LICENSE)

### Features

- [x] Default matchers for compare active viewport and elements

- [x] Simple and flexible API for creating custom matcher

- [x] Output report (Jasmine, Mocha, Cucumber) in JSON format ([example](docs/REPORT_EXAMPLE.md))

### How to use

1. Install the package

```bash

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

```

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

```js

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

exports.config = {

  // other configuration

    services: [

        [VisualRegression, {/* options */}]

    ]

}

```

**Note:** You can find out all available options [here](docs/OPTIONS.md)

3. Use available commands:

```ts

browser.matchElement(name: string, element: WebdriverIO.Element): Promise

browser.matchViewport(name: string): Promise

```

Or create your own custom matcher for comparing anything that you need. See how to do it [here](docs/CUSTOM_MATCHERS.md)

Also, you can take a look at example usage [here](e2e/main.e2e-spec.ts)

## Getting Started

Follow to commands below for start dev environment

```bash

git clone [email protected]:ennjin/wdio-visual-regression.git

cd wdio-visual-regression

npm ci

```

For start development

```bash

npm run start

```

For production build

```bash

npm run build

```

## Running the tests

For running the tests type command

```bash

npm run e2e

```

## Built With

* [node-canvas](https://github.com/Automattic/node-canvas) - HTML5 canvas implementation for nodejs

* [Resemble.js](https://github.com/rsmbl/Resemble.js) - Image analysis and comparison

## License

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