In this tutorial, we will cover some commonly used Cypress Commands such as Get, Click and Find. We will also take a look at how to find the text of a particular element.
Cypress Get & Click Command
One of the most commands that you will use in Cypress is the ‘Get’ command. The ‘get’ command is used to access one or more DOM elements by a selector.
Usage:
it("clicks the Get Started button and asserts the url", () => {
// Get the element by id and click on it
cy.get("#get-started").click();
cy.url().should("include", "#get-started");
});
Cypress Get Text of an Element
There are multiple ways to get the text of an element in Cypress.
1 – Easiest option is via the assertion method:
cy.get("h1.elementor-heading-title").should(
"have.text",
"Think different. Make different."
);
2 – This option you can use if you need to manipulate the text first:
// get the text
cy.get("h1.elementor-heading-title").should(($heading) => {
// manipulate your text here and assert below
expect($heading.text()).to.eq("Think different. Make different.");
});
Cypress Find Command
The ‘find’ command is used to get the descendant of a particular selector. For example, in the below code we are first accessing the nav menu by the id selector and then finding all the list items within the nav using the ‘find’ command.
it("verifies the text of the first menu link item", () => {
cy.get("#primary-menu").find("li").first().should("have.text", "Home");
});
Check out the video below to see learn more about the Get, Click and the Find commands –
I hope this post helped you out, let me know if you have any questions in the comments below!
Happy testing!
