Interacting with Elements
Explore how to select and interact with DOM elements using Cypress commands such as cy.get, .click, .type, and .check. Understand the use of selectors, event triggers, and how to write test cases that verify element presence and user interactions.
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.