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
Git https://git-scm.com

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

1
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()
    });

});

1
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.

# Cypress Tutorial

# Getting Started with Applitools

# Running Tests with Applitools

# Running the Example Project

# Adding Applitools Eyes to an Existing Node.js Cypress Project

# Sample test

# Applitools Eyes Cypress SDK

# How it works

# More information

# Resources