cy.siblings() and cy.closest() in Cypress - Test Execution Trace

Test Overview

This test checks that when clicking the first list item, the test can find its sibling items and the closest parent list element. It verifies that cy.siblings() correctly finds sibling elements and cy.closest() finds the nearest ancestor element.

Test Code - Cypress

Cypress

describe('Test cy.siblings() and cy.closest()', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/traversal')
  })

  it('finds siblings and closest parent', () => {
    // Find the first list item and click it
    cy.get('.traversal-list > li').first().click()

    // From the first list item, get its sibling list items
    cy.get('.traversal-list > li').first()
      .siblings('li')
      .should('have.length.greaterThan', 0)

    // From the first list item, find the closest ul parent
    cy.get('.traversal-list > li').first()
      .closest('ul')
      .should('have.class', 'traversal-list')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io/commands/traversal'	Page with traversal commands loaded, showing a list with buttons	Page loaded successfully	PASS
3	Find the first list item in '.traversal-list' and click it	First list item is focused and clicked	List item click performed	PASS
4	From the same list item, find sibling list items using cy.siblings('li')	Sibling list items of the first list item are located	Assert that siblings length is greater than 0	PASS
5	From the list item, find the closest 'ul' ancestor using cy.closest('ul')	Closest ul element with class 'traversal-list' is found	Assert that closest ul has class 'traversal-list'	PASS

Failure Scenario

Failing Condition: If the first list item in '.traversal-list' is not found or has no siblings, or closest ul is missing

Execution Trace Quiz - 3 Questions

What does cy.siblings('li') do in this test?

A Finds the closest parent li element

B Finds all li elements that share the same parent as the current li

C Finds all child li inside the current li

D Finds the next li element in the DOM

Key Result

Use cy.siblings() to find elements sharing the same parent and cy.closest() to find the nearest ancestor element. This helps test relationships in the page structure clearly.