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.

Practice

1. What does cy.get() do in Cypress testing?

easy

A. Starts the Cypress test runner

B. Clicks on a button automatically

C. Runs JavaScript code inside the browser

D. Finds elements on the page using CSS selectors

Solution

1. Step 1: Understand the purpose of cy.get()

   cy.get() is used to locate elements on the web page by using CSS selectors.

2. Step 2: Differentiate from other Cypress commands

   Other commands like clicking or running code are separate; cy.get() only finds elements.

3. Final Answer:

   Finds elements on the page using CSS selectors -> Option D

4. Quick Check:

   cy.get() = Finds elements [OK]

Hint: Remember: cy.get() locates elements by CSS selectors [OK]

Common Mistakes:

• Thinking cy.get() clicks elements
• Confusing cy.get() with running scripts
• Assuming cy.get() starts tests

2. Which of the following is the correct syntax to select an element with class btn-primary using cy.get()?

easy

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

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

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

D. cy.get('button .btn-primary')

Solution

1. Step 1: Understand CSS selector for class

   In CSS, a class selector uses a dot before the class name, so .btn-primary selects elements with that class.

2. Step 2: Check each option

   cy.get('#btn-primary') uses an ID selector (#), which is wrong here. cy.get('btn-primary') misses the dot, so it looks for a tag named 'btn-primary'. cy.get('button .btn-primary') incorrectly uses a descendant selector (space after button), selecting buttons containing .btn-primary elements.

3. Final Answer:

   cy.get('.btn-primary') -> Option C

4. Quick Check:

   Class selector = .classname [OK]

Hint: Use dot (.) before class names in CSS selectors [OK]

Common Mistakes:

• Using # instead of . for classes
• Omitting the dot before class name
• Confusing tag selectors with class selectors

3. Given the HTML snippet:

<ul>
  <li class='item'>Apple</li>
  <li class='item'>Banana</li>
  <li class='item'>Cherry</li>
</ul>

What will cy.get('.item').should('have.length', 3) check?

medium

A. That there are exactly 3 elements with class 'item'

B. That the first element with class 'item' contains '3'

C. That the list has 3 child elements regardless of class

D. That the page has 3 lists

Solution

1. Step 1: Understand cy.get('.item')

   This selects all elements with the class 'item', which are the three <li> elements.

2. Step 2: Understand .should('have.length', 3)

   This asserts that the number of selected elements is exactly 3.

3. Final Answer:

   That there are exactly 3 elements with class 'item' -> Option A

4. Quick Check:

   cy.get('.item').length = 3 [OK]

Hint: '.should(have.length, n)' checks number of matched elements [OK]

Common Mistakes:

• Thinking it checks content inside elements
• Confusing child count with class count
• Assuming it checks number of lists

4. You wrote cy.get('button#submit').click() but the test fails with "Cannot find element" error. What is the most likely cause?

medium

A. The button does not have an ID 'submit'

B. The selector should be cy.get('#submit button')

C. You must use cy.find() instead of cy.get()

D. The click() command is not supported on buttons

Solution

1. Step 1: Analyze the selector button#submit

   This selector looks for a <button> element with ID 'submit'. If the button does not have this ID, it won't be found.

2. Step 2: Check other options

   The selector should be cy.get('#submit button') reverses the selector incorrectly. You must use cy.find() instead of cy.get() is wrong because cy.get() is correct for global selection. The click() command is not supported on buttons is false; click() works on buttons.

3. Final Answer:

   The button does not have an ID 'submit' -> Option A

4. Quick Check:

   Selector must match element attributes [OK]

Hint: Verify element attributes match your selector exactly [OK]

Common Mistakes:

• Using wrong selector syntax
• Assuming click() doesn't work on buttons
• Confusing cy.get() with cy.find()

5. You want to select the second <li> element inside a <ul id='menu'>. Which cy.get() selector is correct?

hard

A. cy.get('ul#menu li[2]')

B. cy.get('#menu li:nth-child(2)')

C. cy.get('#menu li:eq(2)')

D. cy.get('ul#menu > li:nth-type(2)')

Solution

1. Step 1: Understand CSS nth-child selector

   li:nth-child(2) selects the second child <li> element inside its parent.

2. Step 2: Evaluate each option

   cy.get('ul#menu li[2]') uses invalid attribute selector. cy.get('#menu li:eq(2)') uses jQuery syntax not supported in CSS selectors. cy.get('ul#menu > li:nth-type(2)') uses invalid 'nth-type(2)' selector.

3. Final Answer:

   cy.get('#menu li:nth-child(2)') -> Option B

4. Quick Check:

   Use nth-child(n) to select nth element [OK]

Hint: Use :nth-child(n) to pick the nth child element [OK]

Common Mistakes:

• Using jQuery :eq() in CSS selectors
• Using attribute selectors incorrectly
• Confusing nth-child with nth-of-type