Cypress 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/
Running the Example Project
- Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-cypress.git
cd tutorial-cypress
2
Note: you can alternatively download the project as a Zip file and extract it
- Install the dependencies
npm install
- Set up Applitools Eyes
npx eyes-setup
- Run the example test
To run all of the tests in interactive mode, run:
APPLITOOLS_API_KEY="[Your API Key]" npm run cypress:open
Then click on the ultraFastGrid.spec.js
test. The tests uses Chrome just once and sends the DOM snapshot to the Ultrafast Grid. The Grid will then render the DOM snapshot in the cloud. You need to wait 15-30 seconds.
To run all of the tests inside of the terminal, run:
APPLITOOLS_API_KEY="[Your API Key]" npm test
TIP
The project additionally has a CI mode configured,
which will run all of the tests inside of the terminal
in headless mode. You can run this with: npm run test:ci
Adding Applitools Eyes to an Existing Node.js Cypress Project
Install Applitools Eyes dependencies:
npm install @applitools/eyes-cypress --save-dev
Sample test
describe("AppTest", () => {
it(`ultraFastTest`, function () {
// Navigate to the url we want to test
// ⭐️ 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)
cy.visit('https://demo.applitools.com');
// Call Open on eyes to initialize a test session
cy.eyesOpen({
appName: 'Demo App',
testName: 'Ultrafast grid demo',
})
// check the login page with fluent api, see more info here
// https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
cy.eyesCheckWindow({
tag: "Login Window",
target: 'window',
fully: true
});
cy.get('#log-in').click()
// Check the app page
cy.eyesCheckWindow({
tag: "App Window",
target: 'window',
fully: true
});
// Call Close on eyes to let the server know it should display the results
cy.eyesClose()
});
});
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
Applitools Eyes Cypress SDK
How it works
The Applitools Eyes Cypress SDK is a simple plugin to Cypress. Once installed, it adds few commands to the main cy
object. Specifically, it adds three main methods, cy.eyesOpen
to start the test, cy.eyesCheckWindow
to take screenshots (for each test step) and cy.eyesClose
to close the test.
Note: Supports Chrome, Firefox and Mobile simulators
The interesting thing is that even though you run your Cypress tests using Chrome browser, you can still add visual validations using both Chrome and Firefox! This is because we upload the DOM and assets to our Visual Grid that was rendered in Chrome and open it in Firefox or Chrome as per the settings. The same thing happens in mobile simulators as well.
The picture below shows how it works

You run the Cypress test as usual
Everytime you call
cy.eyesCheckWindow
, the SDK grabs the DOM and other assets asynchronously. And stores it locally until all the tests are done.Once all the Cypress tests are done, the SDK uploads all the assets to the Visual Grid server
The Visual Grid server then opens up the assets in real browsers (Firefox or Chrome), or in mobile simulators, and with appropriate Viewport depending on what was set in the tests. Note that all these happen concurrently in the cloud.
As and when the rendering happens, the Applitools Eyes server gets notification about it and the eyes server then compares the pictures using AI and advanced algorithms and shows the results.
More information
The @applitools/eyes-cypress
npm package page contain more information about advanced configuration, best practices and troubleshooting. Visit eyes-cypress SDK repo to find out more about what's possible with Applitools' Cypress SDK.
Resources
Terms & Conditions Privacy Policy GDPR© 2020 Applitools. All rights reserved.