Cypress next Command

Profile picture for user arilio666

The next command in cypress fetches the immediate following sibling of the DOM element provided in the get command previously. It yields the new DOM element(s) it found.

Syntax

.next()
.next(selector)
.next(options)
.next(selector, options)

Arguments Used In Next:

  • Selector: This is an argument used in the next command to filter matching DOM elements.
  • Options: In Options we pass in log and timeout object to change the default behavior of next().
    • Log: Displays the command in the command log, and the default value is true.
    • Timeout: Time to wait till the next command resolves before timing out.

Rules

  1. Next requires to be chained off a command that yields DOM elements. It can not be directly chained with Cy or the command like getCookies which does not yield DOM elements.
  2. It will automatically retry until the elements exist in DOM.
  3. Next will automatically retry until all chained assertions have passed.
  4. It can timeout, waiting for the elements to exist in the DOM.
  5. Next can time out waiting for assertions you've added to pass.

Example:

For a real-time example, we will try to automate our traditional https://www.programsbuzz.com/user/login page.

Cypress Next Example

Example: Get Next Element

Get the Enter your ProgramsBuzz username element which is next sibling to username input

 it.only('next command', () => {
    cy.visit('https://www.programsbuzz.com/user/login')
    const userTxt = cy.get('#edit-name').next()
})

Example: Get Next Element With Selector

Get the Enter your ProgramsBuzz username element using next and locator

it.only('next command', () => {
    cy.visit('https://www.programsbuzz.com/user/login')
    cy.get('div.form-item-name [class]').next('.description')
})