It’s a new era for web automation. No longer do you have to write brittle, flaky scripts that break at the first sign of change. With Cypress, you can confidently write robust end-to-end tests that are easy to maintain and can run consistently in a CI/CD environment. In this part of our Cypress tutorial, we’ll look at how to interact with elements on a web page and how to handle different types of alerts.
Web pages are made up of elements, which can be interacted with in various ways. For example, you can click on an element, input text into an element, or select an element from a drop-down list. In Cypress, these actions are performed using the .click(), .type(), and .select() methods respectively. Let’s see how they work in practice.
We’ll start by opening the web page we want to test in Cypress. In this case, we’ll use the example from the previous part of our tutorial where we want to test the functionality of a simple login form. The HTML for this form is shown below:
The first thing we need to do is get references to the username and password input elements so that we can interact with them. We do this using the cy.get() method as follows:
cy.get(‘#username’).type(‘testuser’) cy.get(‘#password’).type(‘secret’)
As you can see from the above code, we use the CSS selector #username to target the username input element and then call the .type() method on it passing in ‘testuser’ as an argument. This will cause ‘testuser’ to be entered into the input field when the form is submitted. We then do the same for the password input element passing in ‘secret’. Now that we’ve entered values into both fields, all that remains is to submit the form by clicking on the login button:
cy.get(‘button[type=submit]’).click()
Assuming that our login form submits correctly and redirects us to the home page, we should now see ‘Welcome testuser!’ displayed somewhere on this page (this is just a made up example). So far so good! But what if our login form doesn’t work as expected? What if it throws an error or displays a warning message? This is where things can get tricky when writing end-to-end tests because we need to take these different types of alerts into account. Let’s see how Cypress makes it easy to handle alerts with its . should () assertion method combined with one of three assertion types: .beAlert(), .beConfirm() or .bePrompt(). These assertions are designed specifically for testing purposes and make it easy to check for various types of alerts that might be displayed on a web page. Let’s see how they work in practice by modifying our login form so that it throws an error if the username or password fields are left blank:
… function validateForm() { var username = document.getElementById(“username”).value; var password = document.getElementById(“password”).value; if (username == “” || password == “”) { alert(“Error: Both fields must be filled out”); return false; } return true; } …
As you can see from the above code, we have added a validateForm() function which checks if both fields have been filled out correctly before allowing submission of the form (if not, an error message is displayed). We can now modify our existing test case as follows:
cy.get(‘#username’).type(‘testuser’) cy.get(‘#password’).type(‘secret’) cy.get(‘button[type=submit]’).click() cy .on (‘window:alert’, msg => { // assert that msg equals ‘Error: Both fields must be filled out’ expect(msg).to .equal (‘Error : Both fields must be filled out’); }); …
