@uktrade/wdio-image-diff-js v1.9.3

wdio-image-diff

This wrapper was created to make visual regression as simple as possible, by exposing basic functions that allow you to view the difference between images. The wrapper uses pixelmatch which is simple and powerful and relies on a browser object of webdriverIO to take screenshots.

Table of contents

• Contributing
• Publishing
• Running tests
• WDIO integration
• Reporting
• CLI

Capabilities

• Compares 2 images
• Saves baseline if no baseline is present
• Creates a diff image in case of failure
• Works with any device/browser supported by wdio and your third party i.e saucelabs
• Force browser window size so it's not reliant on third party (size can be modified via options)
• Take screenshot of the whole page or for a given element
• Hide elements which get updated dynamically to make the test more reliable

Dependencies

In order to use takeElement(elementCssPath) function you will need to install imagemagick as we crop the full page screenshot in order to have an image of a given element.

On Ubuntu

$ apt-get install imagemagick

On Mac OS X

$ brew install imagemagick

On CentOS

$ yum install imagemagick