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):

Let's start testing elements on our page. You can open the Selector Playground in Cyress and inspect elemtents you want to test:

Since we we primarily be testing the functionality of the nav bar on a mobile device or smaller resolution, lets select that element and press the copy button:

When we click the copy button, the selector copies the Cypress fucntion cy.get() to our clipboard, along with the element that was selected.

We can use .click() to to click on the element we are pointing to:

After saving, we can see that our test now ends with the nav bar opened up:

If we want to open the Services tab, we can use the selector again to point where we'd like to use .click():

Now our test ends with the Services tab open:

Lets' repeat this step to get the element for the Data Quality Services link in the Services tab.
If we know that this link should be constant and should always be in this location with the same text, we can use should() to test the condition of the element.
In this case, we want to test the element to have the text "Data Quality Services":

After our test runs we can see whether our assert passed or failed.

We can see that the expected condition was true but looking at the console in Cypress:

Let's see what happens if we change the should() to look for something that isn't there and we get a failed test:

After we run the test we can see that we get a failed test in the console with a description of what went wrong.

We can also see that we get an AssertionError telling us where the issue happened in our test:

We can repeat these steps to check the rest of the links in the Services tab, open the other tabs with dropdowns (Work, Resources, About) and check the links in those tabs too:

After saving and running this test, we should end with all of our tabs open and an assert in the console for each should() that we checked for:

Now we can close the nav bar the same way we opened it in the beginning:

Let's open one of the open the nav bar again, click on one of the links and see if it takes us to the correct page:

By using .click() instead of should() we can click the link instead of check it's contents (we were using have.text to make sure it was present).

Now our Data Quality Services pages loads:

Let's make sure we are directed to the correct page by using cy.url().should().

This time in the should function we can use the arguement 'include' or 'eq' (equal) to check if the url we are at either includes a pice of the string or is exactly as specified.

Since we know the end of the URL will be 'data-quality-services' let's set our arguments to ('include', 'data-quality-services'):

After saving and running the test we will see a new assert in the Cypress console checking our URL:

Now that we have tested that the Data Quality Services link directs us to the correct page, let's go back to the home page and test the next link.

By using the the Selector Playground we can find the element for the home button on the top left of the page, click it, and check that we are directed to the correct page with cy.url().shoul().

This time we will pass in the argument 'eq' instead of 'include' since we want to make sure we are directed back to the home page:

Now we can can go back to the home page and test the other links.

Since we will be returning to the home page multiple times in this test, we can create a function for it outside of our describe() function and call it everytime we need to return home:

When we use the steps we've been using to test the other pages and try the returnHome() function from the Blog page, we get an assertion error stating that it can't find the home button element we were using.

If we take a look at the page in Cypress, we can see that the Blog page has a slightly different layout than the rest of the site, so far:

For this page we need to use the Selector and change the element we are clicking on to return home.

Since this is just a on-off instance and we probably won't need to do this often, we can just write it in instead of creating a function for it:

By repeating all of these steps as needed, we can test all of the links in the nav bar.

At the end of our test we can add cy.eyesCheckWindow() to take a snape shot of the test and results and view it in our Applitools dashboard:

Form Testing

We can further test the functionality of an app or site by testing more than links. Let's start testing the form on the Contact Us page.

Create new file to write tests on and give it an appropriate test name:

Let's create our first test on this file, set our viewport and set our visit to go directly to the contact us page:

Now let's take a look at the form and see what's required and figure out the different possibilities of entering data:

We can see that the form has 4 required fields:

* First Name

Last Name
Email
What are you interested in (drop down menu)

Let's try enter in details for all of the required fields except the email field, click send and take a look at what kind of error we get:

We can see that this triggers an error message under the email field and next to the send button.

Let's write this into our test and use the Playground Selector to check that these two messages

are present when we leave the email field blank:

The Cypress console shows the expected error messages:

Multiple Tests

We can add multiple tests to a Cypress test suite then run and view the results from all of them at once.

For each test, we write it in a new it() function and give it an appropriate name. Let's repeat the steps we've

done for the last test and create tests for other ways to incorretly fill out the contact us form:

Now when we save and run our test file we can see the results from each test in the Cypress console:

From here we can click on a test to view it's results:

-- CashBarnes - 24 May 2021

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
js	UltraMobileForm.js	manage	5 K	24 May 2021 - 22:08	CashBarnes
js	UltraTestDemo.js	manage	9 K	24 May 2021 - 22:08	CashBarnes

Topic revision: r7 - 24 May 2021, CashBarnes

Automation

PUBLIC WEB