E2E Testing with Cypress Automation: UI & REST API

In this blog post, I will share my experience about Cypress automation technology. Cypress is an excellent end-to-end automation framework for web applications (Cypress.io: JavaScript End to End Testing Framework); it is written in JavaScript and used for UI and REST API test automation. In this article, I want to show you how to do UI & REST API automation using Cypress by using both the Cypress UI test runner and the “headless browser” (a web browser with no graphical user interface). It’s important to mention that Cypress doesn’t have Web Drivers like Selenium for running tests; it uses its own test runner technology to do that. I used Cypress in my previous project, and I was fascinated by the following automation features:

What I liked:

• The installation was very simple and straightforward.
• There is a lot of documentation and a great automation community.
• Test execution was fast.
• The Cypress UI test runner provides metrics like test status, logs and a web test execution preview.
• It is easy to get the UI locators using the Cypress UI test runner’s open selector playground.
• Its creator Brian Mann continuously adds new features to the Cypress framework and provides a lot of help on the automation forums.
• Test execution reloads automatically after changes are made to the code.
• It has integration with Mocha (a code syntax for writing tests using BDD) & Chai (automation technologies for handling BDD test assertions).
• It offers parallel test execution.

What can be improved:

• Cypress only launches on the Google Chrome web browser; it would be great to provide support for other browsers like Safari, Firefox, etc.
• Interaction with locators like Xpaths is not supported.

The following work process will give you an idea about how you can write your first automation test using Cypress.

Installation:

To install Cypress with all its dependencies, I recommend first downloading Yarn, a useful package manager.

After downloading Yarn, run the following commands in your terminal:

yarn install cypress
yarn install mocha
yarn install chai
yarn install mochawesome

After that, you will see the dependencies added in the file “yarnlock.json”:

E2E Testing with Cypress Automation

Writing your First Cypress Test for UI Automation Testing

Using Cypress, I will write a simple test to validate the required fields of the “Contact Us” form on the Gorilla Logic web page:

E2E Testing with Cypress Automation

 

1. The first step is to create the sub folders (Services & UI) in a project folder called “integration.”

E2E Testing with Cypress Automation

 

2. Create the “.js” file “contactUs.js” in the UI folder:

E2E Testing with Cypress Automation

 

3. In the file “contactUS.js,” we will add the test suite and test case using Mocha syntax.

E2E Testing with Cypress Automation

 

4. To navigate to the “Contact Us” page, we will add the following Cypress code in the ‘Contact us negative flow’ test: “cy.visit(‘https://gorillalogic.com/ contact-us/’);”

E2E Testing with Cypress Automation

 

5. Execute the following command using the console to run the test:

E2E Testing with Cypress Automation

 

6. Select the file “contactUs.js” in the Cypress application.

E2E Testing with Cypress Automation

 

7. Notice that Cypress UI test runner displayed the test execution log (1) and the snapshot viewer (2) with the Gorilla Logic “Contact Us” page.

E2E Testing with Cypress Automation

 

8. In the next step, we will get the web element of the button “Let’s talk.” Click the open selector playground to get the web element selector (1) and click the button “Let’s talk” (2).

E2E Testing with Cypress Automation

 

9. In the Cypress UI test runner, the “Let’s talk” button’s selector ID is displayed (1). Click the adjacent button to copy the ID to the clipboard (2).

E2E Testing with Cypress Automation

 

10. Paste the button ID into the “contacUs.js” test (1).

E2E Testing with Cypress Automation

 

11. Cypress has multiple test actions to interact with the DOM elements, such as  “click,” “type,” “scroll to,” “scroll into view,” etc. For this specific case, we will use the test actions “scroll into view” (scroll to the element displayed (1)) and “click” (2).

E2E Testing with Cypress Automation

 

12. Notice that Cypress is running the test step to click the button “Let’s talk” automatically, and the “Please complete this required field” warning message has been displayed in the “Contact Us” form.

E2E Testing with Cypress Automation

 

13. In the next step, we will add some assertions about the email text field that is empty (1) and the “Please complete this required field” warning message (2).

E2E Testing with Cypress Automation

 

14. We need to get the locator IDs for these web elements, so we need to repeat steps 8, 9, and 10 of this post and paste the code into the test method “Contact us negative flow.” In this next image, you can see the assertions that I defined for this test. You can use the command “cy.log” to debug the test.

E2E Testing with Cypress Automation

 

15. The test has been completed; the Cypress UI test runner displayed the test execution time (1), test status (2), and assertions status (3).

E2E Testing with Cypress Automation

 

16. For headless test execution, you can use the following command from the terminal:

yarn cypress run --headed

E2E Testing with Cypress Automation

 

17. To generate test reports, we will use “mochawesome.” Go to the file “cypress.json” and add the property: “reporter”: “mochawesome”.

E2E Testing with Cypress Automation

 

18. Run the following command from the terminal to run the test and generate the test report:

yarn run cypress:run:reporter

 

19. To see the report, go to the folder “mochawesome-report” and select the file “mochawesome.html.”

E2E Testing with Cypress Automation

Writing your First Cypress Test for REST API Automation Testing:

Using Cypress, we will test a fake API endpoint, the Swagger page “http://petstore. swagger.io/#/store/getInventory,” to get the inventory of pet a store. We will make assertions based on whether the response body is not empty and the status code is equal to 200.

 

1. Create the file “petstore.js” in a folder called “Services” (1); then, create the test scenario in the file (2).

E2E Testing with Cypress Automation

 

2. For test endpoints, we will use “cy.request.” In this request, we can add the URL to be tested (2), test method (1), headers (3) and response object (4).

E2E Testing with Cypress Automation

 

3. We will add test assertions to verify whether the status code equals 200 and the response body is not null. Also, we will add debug code to see the response body by using “cy.log(response).”

E2E Testing with Cypress Automation

 

4. Test execution was successful and the response code is displayed in the debug console.

E2E Testing with Cypress Automation

 

Conclusions

If you are starting to learn automation or need to create an automation test using JavaScript, Cypress is your solution. The Cypress team is great, and they plan on adding improvements like parallel test execution or test execution in the Cloud using Sauce Labs. In my next post, I will share my experience using parallel test execution with Cypress.

 

Subscribe to our Blog

Jose Pablo Meseguer
Jose Pablo Meseguer
Pablo is one of Gorilla Logic's QA Practice Leads – creating strategies and test plans for client projects while defining and promoting best practices. Pablo also works closely with Gorilla Logic’s talent team to interview potential Gorillas and gauge their technology skills. He loves learning about new technologies, and sharing his discoveries with his colleagues.

Deliver off-the-chart results.

WordPress Video Lightbox Plugin