cy.prev() and cy.next() in Cypress - Framework Patterns

Framework Mode - .prev() and .next()

Folder Structure of a Cypress Test Project

cypress/
├── e2e/                  # End-to-end test specs
│   ├── login.cy.js       # Example test file
│   └── navigation.cy.js  # Tests using .prev() and .next()
├── fixtures/             # Test data files (JSON, etc.)
│   └── users.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
package.json              # Project dependencies and scripts

Test Framework Layers in Cypress

• Test Specs (cypress/e2e/): Contains test files where you write your test cases using Cypress commands like .prev() and .next() to navigate DOM elements.
• Support Layer (cypress/support/): Holds reusable commands and setup code. You can add custom commands here to extend Cypress with your own prev() or next() wrappers if needed.
• Fixtures (cypress/fixtures/): Stores test data files to keep tests clean and data-driven.
• Configuration (cypress.config.js): Defines environment settings, base URLs, browser options, and other global settings.

Configuration Patterns for Cypress

• Environment Variables: Use cypress.config.js or cypress.env.json to store URLs, credentials, and environment-specific data.
• Browser Selection: Configure which browser to run tests on via CLI or config file.
• Base URL: Set a base URL in config to simplify cy.visit() calls.
• Custom Commands: Add reusable commands in cypress/support/commands.js to wrap common DOM navigation like prev() and next() for consistency.

Test Reporting and CI/CD Integration

• Built-in Reporter: Cypress provides a clear test runner UI showing pass/fail results and screenshots on failure.
• CI/CD Integration: Integrate Cypress tests into pipelines (GitHub Actions, Jenkins, GitLab CI) using CLI commands like npx cypress run.
• Advanced Reporting: Use plugins like mochawesome for detailed HTML and JSON reports.
• Artifacts: Save screenshots and videos of test runs for debugging.

Best Practices for Using .prev() and .next() in Cypress Framework

1. Use Clear Locators: Select elements with stable selectors (data-* attributes) before using prev() or next() to avoid flaky tests.
2. Chain Commands Properly: Always chain prev() or next() after a Cypress element command to ensure correct context.
3. Explicit Assertions: After navigating with prev() or next(), assert the expected element properties to confirm correct navigation.
4. Custom Commands: Wrap common navigation patterns in custom commands for reuse and readability.
5. Waits and Timing: Use Cypress automatic waits or explicit waits if needed to ensure elements are present before navigating.

Self-Check Question

In the folder structure shown, where would you add a new test file that uses .prev() and .next() to test navigation between form fields?

Key Result

Organize Cypress tests with clear folder layers, use stable selectors with .prev() and .next(), and integrate reporting for reliable UI navigation testing.

Practice

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

easy

A. Selects the element immediately after the current element

B. Selects all sibling elements of the current element

C. Selects the element immediately before the current element

D. Selects the parent element of the current element

Solution

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

   cy.prev() is used to get the element immediately before the current element in the DOM.

2. Step 2: Compare with other options

   cy.next() gets the element after, siblings means all at the same level, and parent is the container element. So only cy.prev() matches Selects the element immediately before the current element.

3. Final Answer:

   Selects the element immediately before the current element -> Option C

4. Quick Check:

   cy.prev() = previous element [OK]

Hint: Prev means previous element before current [OK]

Common Mistakes:

• Confusing cy.prev() with cy.next()
• Thinking it selects parent or all siblings
• Assuming it selects elements after current

2. Which of the following is the correct syntax to get the next sibling element of a button with id submitBtn using Cypress?

easy

A. cy.get('#submitBtn').prev()

B. cy.get('#submitBtn').next()

C. cy.get('#submitBtn').parent()

D. cy.get('#submitBtn').children()

Solution

1. Step 1: Identify the method to get next sibling

   To get the next sibling element, Cypress uses cy.next().

2. Step 2: Match syntax with the element selector

   cy.get('#submitBtn').next() correctly selects the button and then its next sibling.

3. Final Answer:

   cy.get('#submitBtn').next() -> Option B

4. Quick Check:

   next() gets next sibling [OK]

Hint: Use .next() after .get() to get next sibling [OK]

Common Mistakes:

• Using .prev() instead of .next()
• Using .parent() which gets the container
• Using .children() which gets child elements

3. Given the HTML structure:

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

What text will the following Cypress command get?

cy.get('#selected').prev().invoke('text')

medium

A. Error: No previous element

B. "Item 3"

C. "Item 2"

D. "Item 1"

Solution

1. Step 1: Identify the current element and its previous sibling

   The element with id "selected" is the second <li> with text "Item 2". Its previous sibling is the first <li> with text "Item 1".

2. Step 2: Understand what invoke('text') does

   This command gets the text content of the selected element, so it will return "Item 1".

3. Final Answer:

   "Item 1" -> Option D

4. Quick Check:

   prev() gets previous sibling text [OK]

Hint: prev() gets previous sibling's text [OK]

Common Mistakes:

• Confusing prev() with next()
• Expecting text of current element
• Assuming error if previous exists

4. You wrote this Cypress code:

cy.get('.active').next().click()

But the test fails with an error saying Cannot read property 'click' of undefined. What is the most likely cause?

medium

A. There is no next sibling element after the element with class 'active'

B. The selector '.active' is incorrect

C. You should use prev() instead of next()

D. The click() method is not valid in Cypress

Solution

1. Step 1: Analyze the error message

   The error says Cannot read property 'click' of undefined, meaning next() returned no element.

2. Step 2: Understand what causes next() to return undefined

   If the current element has no next sibling, next() returns nothing, so calling click() fails.

3. Final Answer:

   There is no next sibling element after the element with class 'active' -> Option A

4. Quick Check:

   next() returns undefined if no next sibling [OK]

Hint: Check if next sibling exists before clicking [OK]

Common Mistakes:

• Assuming selector is wrong without checking DOM
• Using prev() instead of next() without reason
• Thinking click() is invalid in Cypress

5. You want to verify that a list item with class selected has a previous sibling with text "Home" and a next sibling with text "Contact". Which Cypress code correctly checks this?

hard

A. cy.get('.selected').prev().should('have.text', 'Home'); cy.get('.selected').next().should('have.text', 'Contact')

B. cy.get('.selected').prev().should('have.text', 'Home').next().should('have.text', 'Contact')

C. cy.get('.selected').prev().should('have.text', 'Contact').next().next().should('have.text', 'Home')

D. cy.get('.selected').prev().next().should('have.text', 'Contact')

Solution

1. Step 1: Understand chaining of prev() and next()

   Using prev() then next() on the same chain moves from previous element back to the selected element, not to the next sibling.

2. Step 2: Separate commands for previous and next siblings

   To check previous and next siblings independently, use separate cy.get('.selected') calls with prev() and next().

3. Final Answer:

   cy.get('.selected').prev().should('have.text', 'Home'); cy.get('.selected').next().should('have.text', 'Contact') -> Option A

4. Quick Check:

   Use separate calls for prev() and next() [OK]

Hint: Use separate cy.get() for prev() and next() checks [OK]

Common Mistakes:

• Chaining prev() and next() incorrectly
• Using next().next() instead of next()
• Assuming prev().next() gets next sibling