cy.get() with CSS selectors in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ locator

intermediate

Selecting elements with multiple classes using cy.get()

Which cy.get() selector correctly targets an element with both btn and primary classes?

A cy.get('#btn.primary')

B cy.get('.btn.primary')

C cy.get('.btn, .primary')

D cy.get('btn.primary')

💡 Hint

Remember that chaining classes in CSS selectors means the element must have all those classes.

Option B selects elements with both btn and primary classes. Option B selects elements with either class, not both. Option B uses an ID selector incorrectly. Option B misses the dot for class selectors.

❓ assertion

intermediate

Asserting element visibility after selection

Given cy.get('.menu-item'), which assertion correctly checks that the element is visible?

Cypress

cy.get('.menu-item')

A .should('be.visible')

B .should('exist')

C .should('be.hidden')

D .should('not.exist')

💡 Hint

Visibility means the element is shown on the page, not just present in the DOM.

Option A asserts the element is visible. Option A only checks presence in the DOM. Options C and D check for hidden or non-existent elements, which is opposite of visible.

❓ Predict Output

advanced

Output of chained cy.get() with descendant selector

What does the following code select?

cy.get('nav').get('ul.menu > li.active')

Cypress

cy.get('nav').get('ul.menu > li.active')

A Selects <code>nav</code> elements only

B Selects <code>li.active</code> inside <code>ul.menu</code> only within <code>nav</code>

C Selects all <code>li.active</code> inside <code>ul.menu</code> anywhere in the document

D Throws an error because chaining <code>get</code> is invalid

💡 Hint

Remember that cy.get() always searches the entire document, not scoped to previous commands.

Each cy.get() starts a new search from the document root. So chaining get does not scope the search. Option C is correct. Option C is incorrect because get is not scoped. Option C is wrong. Option C is false; chaining get is valid but not scoped.

🔧 Debug

advanced

Debugging a failing cy.get() selector

Why does cy.get('button#submit.primary') fail to find the element?

Cypress

cy.get('button#submit.primary')

A The element has class 'primary' but no ID 'submit'

B The selector syntax is invalid because ID and class cannot be combined

C The element is a <code>div</code>, not a <code>button</code>

D The element has ID 'submit' but does not have class 'primary'

💡 Hint

Check the actual HTML element's classes and ID carefully.

The selector looks for a button element with ID 'submit' and class 'primary'. If the element lacks the 'primary' class, the selector finds nothing. The syntax is valid. If the element tag is different, the selector won't match. Option D explains the most common cause.

❓ framework

expert

Best practice for selecting dynamic elements with cy.get()

In a web app where button classes change dynamically, which selector strategy is best to reliably select the submit button using cy.get()?

A Use a data attribute like <code>cy.get('[data-cy=submit-button]')</code>

B Use a complex CSS selector combining multiple classes

C Use <code>cy.get('button:contains("Submit")')</code> to find by text

D Use <code>cy.get('button.primary')</code> and hope the class stays stable

💡 Hint

Think about selectors that do not break when styles or classes change.

Using a custom data attribute is the most stable and recommended way to select elements in tests. Complex CSS selectors or text-based selectors are fragile and can break easily. Relying on classes that change dynamically is unreliable.