Applitools Service
A WebdriverIO service for visual regression testing using Applitools
Installation
The easiest way is to keep wdio-applitools-service
as a devDependency in your package.json
.
{
"devDependencies": {
"wdio-applitools-service": "^5.0.0"
}
}
You can simple do it by:
npm install wdio-applitools-service --save-dev
Instructions on how to install WebdriverIO
can be found here.
Configuration
In order to use the service you need to set applitoolsKey
in your wdio.conf.js
config file or have APPLITOOLS_KEY
stored in your environment so that it can access the Applitools API. Also make sure that you added applitools
to your service list, e.g.
// wdio.conf.js
export.config = {
// ...
services: ['applitools'],
applitools: {
// options
// ...
}
// ...
};
Usage
Once the service is added you just need to call the browser.takeSnapshot
command to compare images within the badge. The command takes a screenshot name so Applitools can compare it always with the correct image from the baseline, e.g.
describe('My Google Search', () => {
it('should open the page', () => {
browser.url('http://google.com')
browser.takeSnapshot('main page')
})
it('should search for something', () => {
$('#lst-ib').addValue('WebdriverIO ❤️ Applitools')
browser.keys('Enter')
browser.takeSnapshot('search')
})
})
On the Applitools dashboard you should now find the test with two images:
Options
viewport
Viewport with which the screenshots should be taken.
Type: Object
Default: {'width': 1440, 'height': 900}