cy.siblings() and cy.closest() in Cypress - Framework Patterns

Framework Mode - cy.siblings() and cy.closest()

Folder Structure

cypress/
├── e2e/                  # Test specs
│   ├── example.cy.js      # Example test file
│   └── siblingClosest.cy.js  # Tests for cy.siblings() and cy.closest()
├── fixtures/             # Test data files (JSON, etc.)
│   └── example.json
├── support/              # Custom commands and reusable utilities
│   ├── commands.js       # Custom Cypress commands
│   └── e2e.js            # Support file loaded before tests
cypress.config.js         # Cypress configuration file

Test Framework Layers

• Test Specs (cypress/e2e/): Contains test files that use cy.siblings() and cy.closest() to find related elements in the DOM.
• Support Layer (cypress/support/): Holds reusable commands and utilities to simplify test code and improve readability.
• Fixtures (cypress/fixtures/): Stores static test data to keep tests clean and data-driven.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and browser options.

Configuration Patterns

Use cypress.config.js to manage environment variables and browser settings:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'password123'
    },
    setupNodeEvents(on, config) {
      // implement node event listeners here
    }
  }
})

Access environment variables in tests with Cypress.env('username'). This keeps sensitive data out of test code.

Test Reporting and CI/CD Integration

• Use built-in Cypress test runner reports for quick feedback.
• Integrate with Mocha reporters or plugins like mochawesome for detailed HTML and JSON reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run Cypress tests on code pushes and pull requests.
• Fail the build if tests using cy.siblings() or cy.closest() fail, ensuring UI relationships remain stable.

Best Practices

• Use semantic selectors: Prefer data attributes like data-cy for locating elements to avoid brittle tests.
• Limit DOM traversal: Use cy.closest() to find the nearest ancestor and cy.siblings() to find peer elements, keeping selectors clear and efficient.
• Chain commands carefully: Always return Cypress commands to maintain the command queue and avoid flaky tests.
• Write readable tests: Use descriptive test names and comments to explain why you use cy.siblings() or cy.closest().
• Use explicit assertions: Assert on the elements found by these commands to verify correct UI behavior.

Self Check

Where in this folder structure would you add a new test file that verifies the behavior of cy.closest() on a navigation menu?

Answer: Add the new test file inside the cypress/e2e/ folder, for example navigationClosest.cy.js.

Key Result

Organize Cypress tests with clear folder layers, use cy.siblings() and cy.closest() for precise DOM traversal, and configure environment settings for maintainable, reliable UI tests.

Practice

1. What does the Cypress command cy.siblings() do in a test?

easy

A. Finds all elements on the page

B. Finds the closest parent element matching a selector

C. Finds child elements inside the current element

D. Finds all elements at the same level as the current element

Solution

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

   This command selects all elements that share the same parent as the current element, meaning they are at the same level in the DOM tree.

2. Step 2: Compare with other options

   cy.closest() finds a parent, not siblings. Child elements are found with cy.children(). Finding all elements on the page is not related.

3. Final Answer:

   Finds all elements at the same level as the current element -> Option D

4. Quick Check:

   cy.siblings() = same-level elements [OK]

Hint: Siblings share the same parent element [OK]

Common Mistakes:

• Confusing siblings with parents
• Thinking siblings are child elements
• Assuming it finds all elements on the page

2. Which of the following is the correct syntax to find the closest parent with class .container using Cypress?

easy

A. cy.get('.container').closest()

B. cy.closest('.container')

C. cy.get('.child').closest('.container')

D. cy.siblings('.container')

Solution

1. Step 1: Identify the element to start from

   You must start from a known element, for example cy.get('.child'), then find its closest parent matching .container.

2. Step 2: Use closest() with selector

   The correct syntax is cy.get('.child').closest('.container'). cy.get('.container').closest() is wrong because closest() needs to be called on an element, not on the selector itself. cy.closest('.container') is invalid syntax. cy.siblings('.container') uses siblings(), which finds siblings, not parents.

3. Final Answer:

   cy.get('.child').closest('.container') -> Option C

4. Quick Check:

   Start element + closest('.container') = cy.get('.child').closest('.container') [OK]

Hint: Call closest() on a found element with selector [OK]

Common Mistakes:

• Calling closest() without a starting element
• Using siblings() instead of closest()
• Passing no selector to closest()

3. Given this HTML snippet:

<div class='container'>
  <ul>
    <li class='item selected'>Item 1</li>
    <li class='item'>Item 2</li>
    <li class='item'>Item 3</li>
  </ul>
</div>

What will cy.get('.selected').siblings('.item').should('have.length', ?) assert?

medium

A. 2

B. 3

C. 1

D. 0

Solution

1. Step 1: Identify siblings of the selected element

   The element with class .selected is the first <li>. Its siblings with class .item are the other two <li> elements.

2. Step 2: Count matching siblings

   There are exactly 2 siblings with class .item besides the selected one.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Siblings with class '.item' count = 2 [OK]

Hint: Count siblings with matching class [OK]

Common Mistakes:

• Counting the selected element itself
• Confusing siblings with children
• Miscounting the number of siblings

4. You wrote this Cypress code:

cy.get('.button').closest('.container').siblings('.container').click()

But the test fails with an error that no elements are found. What is the likely problem?

medium

A. The click() command is not valid after siblings()

B. There are no sibling elements with class '.container' next to the closest parent

C. The siblings() command only works on child elements, not parents

D. The closest() command cannot be chained after get()

Solution

1. Step 1: Understand the chaining of commands

   cy.get('.button') finds the button, closest('.container') finds its nearest parent container, then siblings('.container') looks for containers at the same level as that parent.

2. Step 2: Reason about the DOM structure

   If no sibling containers exist next to the closest parent, siblings('.container') returns empty, causing click() to fail.

3. Final Answer:

   There are no sibling elements with class '.container' next to the closest parent -> Option B

4. Quick Check:

   No siblings found = test fails [OK]

Hint: Check if siblings actually exist in DOM [OK]

Common Mistakes:

• Thinking closest() can't chain after get()
• Believing siblings() works on parents
• Assuming click() is invalid after siblings()

5. You want to test that a clicked button highlights its sibling buttons but not buttons in other containers. Which Cypress command chain correctly finds only sibling buttons inside the same container?

hard

A. cy.get('.button.clicked').siblings('.button')

B. cy.get('.button.clicked').closest('.container').siblings('.button')

C. cy.get('.button.clicked').closest('.container').find('.button').siblings()

D. cy.get('.button.clicked').siblings().closest('.container')

Solution

1. Step 1: Identify the target buttons

   You want siblings of the clicked button that share the same parent container, so siblings('.button') after selecting the clicked button is correct.

2. Step 2: Analyze other options

   cy.get('.button.clicked').closest('.container').siblings('.button') finds sibling containers, not buttons. cy.get('.button.clicked').closest('.container').find('.button').siblings() finds buttons inside the container but then calls siblings() without a selector, which may include unrelated elements. cy.get('.button.clicked').siblings().closest('.container') finds siblings first, then closest container, which does not select sibling buttons correctly.

3. Final Answer:

   cy.get('.button.clicked').siblings('.button') -> Option A

4. Quick Check:

   Siblings with class '.button' = cy.get('.button.clicked').siblings('.button') [OK]

Hint: Use siblings() directly on clicked button for siblings [OK]

Common Mistakes:

• Using closest() before siblings() incorrectly
• Selecting sibling containers instead of buttons
• Calling siblings() without a selector