WDIO Service for the Visual Regression Tracker
npm install wdio-visual-regression-tracker-serviceVisual 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
* 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
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
``bash`
npm install wdio-visual-regression-tracker-service --save-dev
Update your wdio.conf.js file to add the service
`js`
services: [
[
'visual-regression-tracker',
{
apiUrl:
branchName:
project:
apiKey:
diffTolerancePercent:
enableSoftAssert:
},
],
],
The WDIO Browser object has been extended with new functions
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 });
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