WebdriverIO Visual Regression Tracker Service

Visual Regression Tracker is an open source, self hosted solution for visual testing and managing results of visual testing.

This package is a plugin for WebDriverIO to allow for page and element snapshots to be uploaded and compared by Visual Regression Tracker using the VRT SDK

Features of Visual Regression Tracker

* Baseline images are uploaded to a central server so do not pollute your repo
* Separate baselines for each Project and Branch to help with versioning
* Ability to ignore regions on the baseline to omit from the compare. Great for dealing with dynamic data
* Shareable links to results online without the need to send a results file
* Full baseline history so you can track application changes over time

Async vs Sync Mode

As Sync mode in WebdriverIO has been deprecated, this package only supports Async mode. It's possible this might work with existing Sync mode test suites, but I cannot guarantee this

Installation

``bash
npm install wdio-visual-regression-tracker-service --save-dev
`

Configuration

Update your wdio.conf.js file to add the service

`js
services: [
[
'visual-regression-tracker',
{
apiUrl: ,
branchName: ,
project: ,
apiKey: ,
diffTolerancePercent: ,
enableSoftAssert: ,
},
],
],
`

Usage

The WDIO Browser object has been extended with new functions

$3

Takes a screenshot of the entire page using browser.takeScreenshot and uploads it to VRT for comparison. Returns the VRT test Results Object

`js
const result = await browser.vrtTrackPage('Test Name', {
diffTolerancePercent?: number;
os?: string;
browser?: string;
viewport?: string;
device?: string;
ignoreAreas?: [{
x: number;
y: number;
width: number;
height: number;
}];
});
`

#### Full page screenshots including scrolling

This is an experimental feature

Currently, when taking a screenshot only FireFox will return you the entire page including scrolling. This feature makes use of HTML2Canvas to capture the entire page, not just the visible area. Taken from this AutomateThePlanet Article

`js
const result = await browser.vrtTrackPage('Test Name', { captureFullPage: true });
`

$3

Takes a snapshot of a specific element using browser.takeElementScreenshot and uploads it to VRT for comparison. Returns the VRT test results object.

`js
const result = await (await $('.elementLocator')).vrtTrackElement('Test Name', {
diffTolerancePercent?: number;
os?: string;
browser?: string;
viewport?: string;
device?: string;
ignoreAreas?: [{
x: number;
y: number;
width: number;
height: number;
}]});
);
`


$3

Returns the raw VRT instance created by the VRT SDK on start. Refer to sdk-js docs for more info

`js
const vrt = await browser.vrtInstance();
const result = await vrt.track('imageName', 'imageBase64');
``

For more information on WebdriverIO see the homepage