cy.prev() and cy.next() in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following HTML and Cypress test code. What text will the assertion check?

Cypress

<ul>
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
</ul>

// Cypress test snippet
cy.get('li.selected').prev().should('have.text', 'Item 1');

A The test fails because the previous sibling has text 'Item 3'.

B The test passes because the previous sibling has text 'Item 1'.

C The test fails because there is no previous sibling.

D The test passes because the previous sibling has text 'Item 2'.

💡 Hint

Remember, cy.prev() selects the immediate previous sibling element.

The element with class selected is the second li. Its previous sibling is the first li with text 'Item 1'. So the assertion checks for 'Item 1' and passes.

❓ Predict Output

intermediate

What will this Cypress command select?

Given this HTML snippet, what element will cy.get('.active').next() select?

Cypress

<div>
  <button>Save</button>
  <button class="active">Cancel</button>
  <button>Delete</button>
</div>

A No element, because <code>.active</code> is the last button.

B The button with text 'Save'.

C The button with text 'Delete'.

D The button with text 'Cancel'.

💡 Hint

cy.next() selects the immediate next sibling element.

The button with class active is the second button. Its next sibling is the third button with text 'Delete'.

❓ assertion

advanced

Which assertion correctly verifies the previous sibling's class?

You want to check that the previous sibling of an element with id #current has the class highlight. Which assertion is correct?

Cypress

cy.get('#current').prev()

A cy.get('#current').prev().should('have.class', 'highlight');

B cy.get('#current').prev().should('contain.text', 'highlight');

C cy.get('#current').prev().should('have.text', 'highlight');

D cy.get('#current').prev().should('have.attr', 'class', 'highlight');

💡 Hint

Use the assertion that checks for a CSS class on the element.

have.class checks if the element has the specified class. have.attr checks for exact attribute value, which may fail if multiple classes exist. contain.text and have.text check text content, not classes.

🔧 Debug

advanced

Why does this Cypress test fail?

Given this HTML and test code, why does the test fail?

Cypress

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

// Test code
cy.get('li').last().next().should('exist');

A Because <code>cy.next()</code> returns no element when called on the last sibling, so the assertion fails.

B Because <code>cy.last()</code> is not a valid Cypress command.

C Because <code>cy.get('li').last()</code> selects the first <li> instead of the last.

D Because <code>cy.next()</code> selects the previous sibling, not the next.

💡 Hint

Think about what happens when you call next() on the last sibling element.

The last li has no next sibling, so cy.next() returns an empty set. The assertion should('exist') fails because no element is found.

🧠 Conceptual

expert

How does cy.prev() behave with non-element siblings?

In Cypress, if an element has a previous sibling that is a text node (like whitespace or newline), what does cy.prev() select?

A <p><code>cy.prev()</code> selects the previous sibling node regardless of type, including text nodes.</p>

B <p><code>cy.prev()</code> returns the parent element if the previous sibling is a text node.</p>

C <p><code>cy.prev()</code> throws an error if the previous sibling is not an element node.</p>

D <p><code>cy.prev()</code> skips non-element nodes and selects the closest previous sibling element node.</p>

💡 Hint

Think about how Cypress interacts with the DOM elements versus text nodes.

Cypress prev() only selects element nodes, skipping text nodes like whitespace or newlines. It finds the closest previous sibling that is an element.