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

 

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:

 

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

 

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

 

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

 

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

 

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

 

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

 

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.

 

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

 

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

 

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

 

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

 

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.

 

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

 

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.

 

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

 

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

yarn cypress run --headed

 

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

 

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

 

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

 

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

 

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).”

 

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

 

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.