Image Comparison (Visual Regression Testing) Service

wdio-image-comparison-service is a 3rd party package, for more information please see GitHub | npm

For documentation on visual testing with WebdriverIO, please refer to the docs. This project contains all relevant modules for running visual tests with WebdriverIO. Within the ./packages directory you will find:

• @wdio/visual-testing: the WebdriverIO service for integrating visual testing
• webdriver-image-comparison: An image compare module that can be used for different NodeJS Test automation frameworks that support the WebDriver protocol

Contributing

This package depends on node-canvas, make sure you have all required dependencies installed before starting development.

Questions

Please join our Discord Server if you have any questions or issues contributing to this project. Catch us contributors in the 🙏-contributing channel.

Issues

If you have questions, bugs or feature requests, please file an issue. Before submitting an issue, please search the issue archive to help reduce duplicates, and read the FAQ.

If you can't find it there you can submit an issue where you can submit:

• 🐛Bug report: Create a report to help us improve
• 📖Documentation: Suggest improvements or report missing/unclear documentation.
• 💡Feature request: Suggest an idea for this module.
• 💬Question: Ask questions.

Development Workflow

To create a PR for this project and start contributing follow this step-by-step guide:

• Fork the project.

• Clone the project somewhere on your computer

  $ git clone https://github.com/webdriverio/visual-testing.git

• Go to the directory and setup the project

  $ cd visual-testing
  $ pnpm install

• Run the watch mode that will automatically transpile the code

  $ pnpm watch

  to build the project, run:

  $ pnpm build

• Ensure that your changes don't break any tests, run:

  $ pnpm test

• And create a new feature / fix a bug

Testing

Several tests need to be executed to be able to test the module. When adding a PR all tests must at least pass the local tests. Each PR is automatically tested against Sauce Labs, see our GitHub Actions pipeline. Before approving a PR the core contributors will test the PR against emulators/simulators / real devices.

Local Testing

First, a local baseline needs to be created. This can be done with:

// With the webdriver protocol
$ npm run test.local.init

This command will create a folder called localBaseline that will hold all the baseline images.

Then run:

// With the webdriver protocol
npm run test.local.desktop

This will run all tests on a local machine on Chrome.

CI testing with Sauce Labs (not needed for a PR)

The command below is used to test the build on GitHub Actions, it can only be used there and not for local development.

$ npm run test.saucelabs

It will test against a lot of configurations that can be found here. All PRs are automatically checked against Sauce Labs.

Credits

@wdio/visual-testing uses an open-source license from Sauce Labs.