WebdriverIO 6 tutorial
Note: This is for WebdriverIO 6. There are different tutorials for WebdriverIO 4 and WebdriverIO 5.
Getting Started with Applitools
Want to learn more about the Applitools platform and how it works? First get started with one of the following:
Running Tests with Applitools
Prerequisites
- A free Applitools account and Applitools API KEY
Tip: Unsure how to set up your API key?
Learn how to get started at Setting Up
Node.js https://nodejs.org
Note: Installing `git` is optional
Installing git is used to clone the demo project from the Github repository. Instead of installing git
, you can simply download the Zip file from the repository. Further, if you are Mac, you already have git
.
Google Chrome Browser https://www.google.com/chrome/
ChromeDriver https://chromedriver.chromium.org/getting-started
ChromeDriver must be installed and in your `PATH`
Below are some resources from the internet that'll help you
On Mac, place the chromedriver
executable in /usr/local/bin
folder so Eclipse and IntelliJ can find it.
Option 1 - Run With The Ultrafast Grid
Running the Example Project
- Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-webdriverio6-ultrafastgrid
cd tutorial-webdriverio6-ultrafastgrid
2
Note: you can alternatively download the project as a Zip file and extract it
- Install the dependencies
npm install
- Run the example test
APPLITOOLS_API_KEY="[Your API Key]" npm test
This will first set your APPLITOOLS_API_KEY
into the node process then run npm test
.
Adding Applitools Eyes to an Existing Node.js WebdriverIO Project
Install Applitools Eyes dependencies:
npm install @applitools/eyes-webdriverio --save-dev
Sample test
'use strict';
const {
VisualGridRunner,
RunnerOptions,
Eyes,
Target,
Configuration,
BatchInfo,
BrowserType,
DeviceName,
ScreenOrientation
} = require('@applitools/eyes-webdriverio');
let eyes;
let runner;
let configuration;
describe('ACME Demo App - wdio6', function () {
before(async () => {
// Create a runner with concurrency of 5
// You can increase this value if your plan supports a higher concurrency
const runnerOptions = new RunnerOptions().testConcurrency(5);
runner = new VisualGridRunner(runnerOptions);
// Create Eyes object with the runner, meaning it'll be a Visual Grid eyes.
eyes = new Eyes(runner);
if (browser.config.enableEyesLogs) {
eyes.setLogHandler(new ConsoleLogHandler(true));
}
// Initialize the eyes configuration
configuration = eyes.getConfiguration();
// use new Configuration() when not setting eyes setter methods. e.g. eyes.setLogHandler() etc...
//new Configuration();
// You can get your api key from the Applitools dashboard
configuration.setApiKey(process.env.APPLITOOLS_API_KEY)
// create a new batch info instance and set it to the configuration
configuration.setBatch(new BatchInfo('Ultrafast Batch'))
configuration.addBrowser(800, 600, BrowserType.CHROME);
configuration.addBrowser(700, 500, BrowserType.FIREFOX);
configuration.addBrowser(1600, 1200, BrowserType.IE_11);
configuration.addBrowser(1024, 768, BrowserType.EDGE_CHROMIUM);
configuration.addBrowser(800, 600, BrowserType.SAFARI);
// Add mobile emulation devices in Portrait mode
configuration.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT);
configuration.addDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.PORTRAIT);
});
beforeEach(async function () {
const appName = await this.test.parent.title;
const testName = await this.currentTest.title;
configuration.setAppName(appName);
configuration.setTestName(testName);
// Set the configuration to eyes
eyes.setConfiguration(configuration);
await eyes.open(browser);
});
it('ultraFastTest', async () => {
// Navigate to the url we want to test
await browser.url('https://demo.applitools.com/');
await expect(browser).toHaveTitle('ACME demo app');
// ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
// but then change the above URL to https://demo.applitools.com/index_v2.html
// (for the 2nd run)
// check the login page with fluent api, see more info here
// https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
await eyes.check('Login Window', Target.window().fully());
// Click the "Log in" button.
const loginButton = await browser.$('#log-in');
await loginButton.click();
// Check the app page
await eyes.check('App Window', Target.window().fully());
// Call Close on eyes to let the server know it should display the results
await eyes.closeAsync();
});
afterEach(async () => {
// If the test was aborted before eyes.close was called, ends the test as aborted.
await eyes.abortAsync();
});
after(async () => {
const results = await runner.getAllTestResults(false);
console.log(results);
});
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
Option 2 - Run Locally
Running the Example Project
- Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-webdriverio6-basic
cd tutorial-webdriverio6-basic
2
Note: you can alternatively download the project as a Zip file and extract it
- Install the dependencies
npm install
- Run the example test
APPLITOOLS_API_KEY="[Your API Key]" npm test
This will first set your APPLITOOLS_API_KEY
into the node process then run npm test
.
Adding Applitools Eyes to an Existing Node.js WebdriverIO Project
Install Applitools Eyes dependencies:
npm install @applitools/eyes-webdriverio --save-dev
Sample test
'use strict';
const {
ClassicRunner,
RunnerOptions,
Eyes,
Target,
Configuration,
RectangleSize,
BatchInfo,
BrowserType,
DeviceName,
ScreenOrientation
} = require('@applitools/eyes-webdriverio');
let eyes;
let configuration;
let runner;
describe('ACME Demo App - wdio6', function () {
before(async () => {
// Create a runner with concurrency of 5
// You can increase this value if your plan supports a higher concurrency
const runnerOptions = new RunnerOptions().testConcurrency(5);
runner = new ClassicRunner(runnerOptions);
// Create Eyes object with the runner, meaning it'll be a Visual Grid eyes.
eyes = new Eyes(runner);
if (browser.config.enableEyesLogs) {
eyes.setLogHandler(new ConsoleLogHandler(true));
}
// Initialize the eyes configuration
configuration = eyes.getConfiguration();
// use new Configuration() when not setting eyes setter methods. e.g. eyes.setLogHandler() etc...
// new Configuration();
// You can get your api key from the Applitools dashboard
configuration.setApiKey(process.env.APPLITOOLS_API_KEY)
// create a new batch info instance and set it to the configuration
configuration.setBatch(new BatchInfo('Classic Batch'))
});
beforeEach(async function () {
const appName = await this.test.parent.title;
const testName = await this.currentTest.title;
configuration.setAppName(appName);
configuration.setTestName(testName);
// Set the configuration to eyes
eyes.setConfiguration(configuration);
browser = await eyes.open(browser);
});
it('classicTest', async () => {
// Navigate to the url we want to test
await browser.url('https://demo.applitools.com');
await expect(browser).toHaveTitle('ACME demo app');
// ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
// but then change the above URL to https://demo.applitools.com/index_v2.html
// (for the 2nd run)
// check the login page with fluent api, see more info here
// https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
await eyes.check('Login Window', Target.window().fully());
// Click the "Log in" button.
const loginButton = await browser.$('#log-in');
await loginButton.click();
// Check the app page
await eyes.check('App Window', Target.window().fully());
// Call Close on eyes to let the server know it should display the results
await eyes.closeAsync();
});
afterEach(async () => {
// If the test was aborted before eyes.close was called, ends the test as aborted.
await eyes.abortAsync();
});
after(async () => {
const results = await runner.getAllTestResults(false);
console.log(results);
});
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Resources
Terms & Conditions Privacy Policy GDPR© 2021 Applitools. All rights reserved.