cy.prev() and cy.next() in Cypress - Test Execution Trace

Test Overview

This test checks navigation between sibling elements using cy.prev() and cy.next() commands in Cypress. It verifies that the correct previous and next siblings are found and contain expected text.

Test Code - Cypress

Cypress

describe('Test cy.prev() and cy.next()', () => {
  it('should find previous and next siblings correctly', () => {
    cy.visit('https://example.cypress.io/commands/traversal')
    // Find the element with text 'bananas'
    cy.contains('bananas')
      .prev()
      .should('have.text', 'Bananas')
    cy.contains('bananas')
      .next()
      .should('have.text', 'Cherries')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, Cypress ready	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/traversal'	Page with list of items including 'apples', 'bananas', 'cherries' loaded	-	PASS
3	Find element containing text 'bananas'	Element with text 'bananas' found in the list	-	PASS
4	Call cy.prev() on 'bananas' element to get previous sibling	Previous sibling element with text 'apples' selected	Check that previous sibling text is 'apples'	PASS
5	Call cy.next() on 'bananas' element to get next sibling	Next sibling element with text 'cherries' selected	Check that next sibling text is 'cherries'	PASS

Failure Scenario

Failing Condition: The previous or next sibling element does not exist or has unexpected text

Execution Trace Quiz - 3 Questions

What does cy.prev() do in this test?

A Selects the previous sibling element of the current element

B Selects the next sibling element of the current element

C Selects the parent element of the current element

D Selects the first child element of the current element

Key Result

Always verify that sibling elements exist and contain expected content before using cy.prev() or cy.next() to avoid flaky tests.