In our previous article, we discussed how to use the Cypress selectors to target elements on the page. In this article, we will discuss how to interact with those elements using the .click() command. We will also discuss how to handle child tabs that are spawned when a user clicks on a link.
The .click() command is used to click on an element. The command takes one argument, which is the selector of the element to click on. For example, if we have a button with the id “button”, we can click it like this:
cy.get(“#button”).click();
Clicking an element can trigger all sorts of events. For example, clicking a link will cause the browser to navigate to the href of that link. Clicking a button will cause a form to submit. Clicking a checkbox will cause it to be checked or unchecked. In all these cases, Cypress will automatically wait for the page to finish loading before moving on to the next command in the test.
If you want to click on an element and not have Cypress wait for the page to load, you can use the .trigger() command instead:
cy.get(“#button”).trigger(“click”);
When you use .trigger(), you are responsible for waiting for any events that are triggered by the click to complete before moving on in your test. For example, if you trigger a form submission but don’t wait for the form to submit, your test may continue while the form is still being submitted in the background and fail because the form values are not what you expect them to be.
One common task when testing web applications is opening links in new tabs or windows. This can be done using Cypress by using the .then() command:
cy.get(“#link”).then(($link) => { // force href target=”_blank” so link opens in new tab/window $link[0].target = “_blank”; // now cypress will automatically open link in new tab/window cy.get(“#link”).click(); }); // navigate back to original tab/window cy.visit(“/”); // other commands… }); // …and so on
}); });
By default, Cypress will not follow link clicks that open in new tabs or windows. You must use .then() as shown above to tell Cypress that you want it to follow these types of links. You can also use .then() with other commands such as .type() and .select() if you need more control over when those commands are executed.
