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

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

Configuration

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

services: [
        [
            'visual-regression-tracker',
            {
                apiUrl: <string: URL for the Visual Regression Tracker API (Not the UI)>,
                branchName: <string: Branch Name to be used in VRT>,
                project: <string: Project Name to be used in VRT>,
                apiKey: <string: API Key from Visual Regression Tracker>,
                diffTolerancePercent: <number: Acceptable Pixel difference percentage>,
                enableSoftAssert: <boolean: should an exception be thrown when an image compare fails>,
            },
        ],
    ],

Usage

The WDIO Browser object has been extended with new functions

vrtTrackPage

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

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

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

vrtTrackElement

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

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;
    }]});
);

vrtInstance

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

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

For more information on WebdriverIO see the homepage