Interacting with Elements
Learn about the different ways to select elements and interact with them in Cypress.
The most basic building blocks of a test are selectors. In our test cases, we select elements for two main reasons:
- Verifying their presence
- Interacting with them
There are many different ways to query and interact with elements in Cypress. In this lesson, we will look at the most commonly used selectors and Cypress commands.
Selecting elements
When we want to select an element in Cypress, we will need to use the cy.get command.
We’ve looked into selecting elements in the previous lesson using the cy.get command. The command works in the following way:
cy.get(selector);
The selector works similarly to a jQuery selector. Essentially, we can use any selector we normally would when querying the DOM. For example, the following are all valid selectors:
cy.get('.class-selector');
cy.get('#id');
cy.get('[data-attribute="selector"]');
cy.get('ul > li');
Interacting with selected elements
To interact with the selected elements, Cypress provides a similar interface to the DOM API.