cy.get() with CSS selectors in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.get() do in Cypress?

cy.get() finds elements on the page using CSS selectors. It lets you select elements to test or interact with.

beginner

How do you select an element with the class button-primary using cy.get()?

<p>Use <code>cy.get('.button-primary')</code>. The dot <code>.</code> means class in CSS selectors.</p>

beginner

How to select an element with the ID login-form using cy.get()?

Use cy.get('#login-form'). The hash # means ID in CSS selectors.

intermediate

What is the best practice for writing CSS selectors in cy.get()?

Use unique and stable selectors like IDs or data attributes (e.g., [data-cy='submit-btn']) to avoid flaky tests.

intermediate

How can you select a button element with text Submit using cy.get() and CSS selectors?

CSS selectors alone can't select by text. Use cy.contains('button', 'Submit') instead.

Which CSS selector would you use with cy.get() to select all elements with class item?

A .item

B #item

C item

D *item

The dot . selects elements by class name. So .item selects all elements with class item.

How do you select an element with ID header using cy.get()?

A #header

B header

C .header

D *header

The hash # selects elements by ID. So #header selects the element with ID header.

Which selector is best to avoid flaky tests in cy.get()?

A Random class names

B Tag names only

C Using text inside CSS selectors

D Data attributes like <code>[data-cy='btn']</code>

Data attributes are stable and unique, making tests less flaky.

Can cy.get() select elements by their visible text using CSS selectors alone?

A Yes, with <code>text()</code>

B Yes, with <code>:contains()</code>

C No, CSS selectors can't select by text

D Yes, with <code>cy.getText()</code>

CSS selectors do not support selecting elements by visible text. Use cy.contains() instead.

What does cy.get('button.submit-btn') select?

A All <code>button</code> elements

B All <code>button</code> elements with class <code>submit-btn</code>

C All <code>submit-btn</code> elements

D All elements with class <code>submit-btn</code>

This selector finds button elements that also have the class submit-btn.

Explain how cy.get() uses CSS selectors to find elements on a page. Include examples for class and ID selectors.

Think about how you pick elements in CSS styles.

Describe best practices for writing selectors in cy.get() to make tests reliable and easy to maintain.

Think about what makes a selector stable when the page changes.