You are here: Ultra Guide>Automation Web>IntroductionToCypressAndApplitools (24 May 2021, CashBarnes)Edit AttachTags

Introduction to Cypress and Applitools

In this introduction we will go over using Cypress with Applitools.
Cypress is a framework that wraps Selenium, making for an easy end-to-end testing experience.
Applitools is a visual testing tool that can be used to test the stability and visual consistency of a page or app.
Together they make for a powerful and convenient way to automate testing.

Getting Started

  • Find the github repository with the finished project files here.
  • Before getting started you will need to make sure you have Node.js.
  • Before installing Cypress, create a package.json file for your project in the root directory of your project

After your create your package.json file, install Cypress locally as a dev dependency for your project:

You will notice the new dependency in your package.json file and you will see new objects in your project directory:

After installing Cypress, we need to signup for Applitools and get our API key. You can signup with GitHub or an email.
After signing up, make sure you are in the directory you'd like to work in and install Applitools:

After installing applitools and saving as a dependency, you should also see it listed in the dependencies on your package.json file.
Next we need to get our Aplitools API key and set it as a variable. You can get your key by clicking the profile icon in the top right of Applitools after siging in:

After you have copied your key, set it as an environment variable (fill in the blacked out section with your key):

After we have set our Applitools variable, we need to open open Cypress.
After the console opens, you will see a new folder titled "cypress" in your project.

From the Cypress console you can see the example tests:

No that all of our required directories and files have been created, the last thing we need to do is install eyes.
Close your Cypress console and run npx eyes setup. If it is setup correctly, you should see the following:

Now that we're all set up, we can create our first test. I create it just outisde of the examples directory:

Writing Our First Test

Before we start writing anything else in our test file we can set a Cypress reference for Intellisense:

We need to start our test suite with the describe() function. All this does is describe the tests that we are running with the it() functions.
We will be primarily running tests on the nav bar while in a mobile device resolution, so we can describe it accordingly:

Next we call open on eyes to initiliaze our test. Here we can name our app and test:

Now we can finally start writing our it() function (the actual test). Let's start by opening the site that we want to test:

Run the test by selecting it in the Cypress dashboard:

Before we continue working on our first test we want to make sure we call close eyes at the end of our suite:

Next, lets make sure we are viewing the page in the resolution we'd like to. There are a couple ways to do this.
We can declare the browser size in our cy.eyesOpen call, but I have found that using cy.viewport() inside of the test helps the test run a little faster.
Using viewport also lets us choose from a list of resolution presets for different devices:

Now after we run the test we can see our page set to the preset resolution for iphone-5 (320x568):