Interacting with Elements

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.

Clicks

The most common scenario where we interact with elements is simply triggering a click event. We can achieve this using the .click command:

// Make sure you trigger the click event after getting the DOM element with `cy.get`
cy.get('button').click();

We can also do double and right clicks, if needed, with the following commands:

cy.get('button').dblclick();
cy.get('button').rightclick();

Typing

We may also want to test inputs by typing into them. For this, we can use the .type command:

cy.get('input[type="email"]').type('john@doe.com'); 

The .type command also supports some special characters to trigger non-character keyboard keys. For example, to press enter, we would:

cy.get('input[type="email"]').type('{enter}'); 

Some other common use cases include:

cy.get('input').type('{backspace}');
cy.get('input').type('{del}');
cy.get('input').type('{selectall}');

You can find the full list of available special characters inside the official documentation of Cypress.

We can use the .clear command to clear our input fields. It essentially empties an input field so it returns to its initial state:

// The two are equivalent
cy.get('input[type="email"]').clear();
cy.get('input[type="email"]').type('{selectall}{backspace}');

Checks

Checking and unchecking checkboxes is just as easy with the .check and .uncheck commands:

cy.get('[type="checkbox"]').check();
cy.get('[type="checkbox"]').uncheck();

Note that the elements must be an input with a type of either checkbox or radio.

Select

Cypress also provides the possibility of interacting with select elements, using the .select command:

// You need to pass either the value or the text content of the `option` you want to select.
cy.get('select').select('value');

Trigger

Lastly, we have the .trigger utility, which we can use to trigger DOM events. Any event that we can trigger on a DOM element is a valid argument for .trigger:

cy.get('button').trigger('click');
cy.get('area').trigger('mouseover');
cy.get('input').trigger('keyup');

trigger('click') vs. click()

Let’s look at the difference between the two.

cy.get('button').trigger('click');
cy.get('button').click();

Both will trigger the event. The only difference is that .trigger will only fire the event and nothing else.

However, using the corresponding Cypress command also performs low-level actions to fully implement the default browser action, and fulfill the specification.

---

Dismissing the cookie policy

To practice everything we’ve discussed in this lesson, let’s write a simple test case for dismissing the cookie policy on the home page. We’ve already created an empty it block for it. Let’s also add a couple of steps:

import {
    verifyCookiePolicyPresence,
    dismissCookiePolicy
} from '../steps/cookiePolicy'

it('Should show dismissible cookie policy banner', () => {
    verifyCookiePolicyPresence();
    dismissCookiePolicy();
});

Don’t forget to create a cookiePolicy.js file inside the “steps” folder with the two exported function:

export const verifyCookiePolicyPresence = () => {
    ...
};

export const dismissCookiePolicy = () => {
    ...
};

First, select the cookie policy, so we can verify its presence. For this, we can use cy.get:

cy.get('#onetrust-banner-sdk');

Note that you don’t need to chain anything after the .get function. By simply selecting the element, we verify its presence. If it’s not there, the test suite will fail.

If we want to be more verbose, we can chain a .should command:

cy.get('#onetrust-banner-sdk').should('exist');

After that, we need to find the button on the banner and trigger a click. Then we can verify if it removed the cookie policy banner. This is what we will need to write in the dismissCookiePolicy step.