Selenium for JavaScript Tutorial
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
- Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-selenium-javascript-ultrafastgrid.git
cd tutorial-selenium-javascript-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 Project
- Install Applitools Eyes dependencies
npm install @applitools/eyes-selenium --save-dev
- Add an example test
'use strict';
const { Builder, By } = require('selenium-webdriver');
const { Eyes, VisualGridRunner, RunnerOptions, Target, RectangleSize, Configuration, BatchInfo, BrowserType, DeviceName, ScreenOrientation} = require('@applitools/eyes-selenium');
const chrome = require('selenium-webdriver/chrome')
describe('DemoApp - Ultrafast Grid', function () {
let runner, eyes, driver;
before(async () => {
// Create a new chrome web driver
const options = new chrome.Options();
if (process.env.CI === 'true') options.headless();
driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
// Create a runner with concurrency of 1
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);
// Initialize the eyes configuration.
let conf = new Configuration()
// You can get your api key from the Applitools dashboard
conf.setApiKey(process.env.APPLITOOLS_API_KEY)
// create a new batch info instance and set it to the configuration
conf.setBatch(new BatchInfo("Ultrafast Batch"));
// Add browsers with different viewports
conf.addBrowser(800, 600, BrowserType.CHROME);
conf.addBrowser(700, 500, BrowserType.FIREFOX);
conf.addBrowser(1600, 1200, BrowserType.IE_11);
conf.addBrowser(1024, 768, BrowserType.EDGE_CHROMIUM);
conf.addBrowser(800, 600, BrowserType.SAFARI);
// Add mobile emulation devices in Portrait mode
conf.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT);
conf.addDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.PORTRAIT);
// set the configuration to eyes
eyes.setConfiguration(conf)
});
it('ultraFastTest', async () => {
// Call Open on eyes to initialize a test session
await eyes.open(driver, 'Demo App - JS Selenium 4', 'Ultrafast grid demo', new RectangleSize(800, 600));
// Navigate the browser to the "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)
await driver.get("https://demo.applitools.com");
// 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());
// This will create a test with two test steps.
await driver.findElement(By.id("log-in")).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();
});
after(async () => {
// Close the browser.
await driver.quit();
// If the test was aborted before eyes.close was called, ends the test as aborted.
await eyes.abortAsync();
// we pass false to this method to suppress the exception that is thrown if we
// find visual differences
const allTestResults = await runner.getAllTestResults();
console.log(allTestResults);
});
});
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
Option 2 - Run Locally
- Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-selenium-javascript-basic.git
cd tutorial-selenium-javascript-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 Project
- Install Applitools Eyes dependencies
npm install @applitools/eyes-selenium --save-dev
- Add an example test
'use strict';
const { Builder, By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const { Eyes, ClassicRunner, Target, RectangleSize, Configuration, BatchInfo} = require('@applitools/eyes-selenium');
describe('DemoApp - ClassicRunner', function () {
let runner, eyes, driver;
beforeEach(async () => {
// Initialize the Runner for your test.
runner = new ClassicRunner();
// Initialize the eyes SDK (IMPORTANT: make sure your API key is set in the APPLITOOLS_API_KEY env variable).
eyes = new Eyes(runner);
// Initialize the eyes configuration.
let conf = new Configuration()
// set new batch
conf.setBatch(new BatchInfo("Demo batch"));
// set the configuration to eyes
eyes.setConfiguration(conf)
// Use Chrome browser
const options = new chrome.Options();
if (process.env.CI === 'true') options.headless();
driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
});
it('Smoke Test', async () => {
// Start the test by setting AUT's name, test name and viewport size (width X height)
await eyes.open(driver, 'Demo App - javascript', 'Smoke Test', new RectangleSize(800, 600));
// Navigate the browser to the "ACME" demo app.
await driver.get("https://demo.applitools.com");
// To see visual bugs after the first run, use the commented line below instead.
// await driver.get("https://demo.applitools.com/index_v2.html");
// Visual checkpoint #1 - Check the login page.
await eyes.check("Login Window", Target.window().fully());
// This will create a test with two test steps.
// await driver.findElement(By.id("log-in")).click();
// Visual checkpoint #2 - Check the app page.
// await eyes.check("App Window", Target.window().fully());
// End the test.
await eyes.close();
});
afterEach(async () => {
// Close the browser.
await driver.quit();
// If the test was aborted before eyes.close was called, ends the test as aborted.
await eyes.abort();
// Wait and collect all test results
const allTestResults = await runner.getAllTestResults(false);
console.log(allTestResults);
});
});
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
More information
The documentation for the Applitools Eyes Selenium 3 Java SDK contains more information about advanced configuration.
Resources
Terms & Conditions Privacy Policy GDPR© 2021 Applitools. All rights reserved.