Cypress - how to wait for second of two elements to appear?

user_3111255 0
Viewed 2438

I want to wait until the second of two elements to appear before performing an action on it. Currently, I have this:

    cy.get('[data-test="insert-item"]').click();
    cy.get('[data-test="textarea"]').eq(1).type('Hello').type('{enter}');

This currently fails. I'm assuming this is because Cypress is going to collect all the occurrences of textarea, then try to select the second one before it has actually rendered on the page (because of the async request that creates it). If I add cy.wait(2000); in between these two lines it passes.

Is there any way to do this without using cy.wait(2000), so that it specifically waits until the second item has appeared?

cypress javascript
1 Answers

You can move the eq() into the selector with :nth(1), which will cause the indexing to be part of the cy.get() retry mechanism

cy.get('[data-test="textarea"]:nth(1)')
  .type('Hello').type('{enter}')

Or you can assert the length of the elements selected before indexing the list.

cy.get('[data-test="textarea"]')
  .should('have.length', 2)
  .eq(1)
  .type('Hello').type('{enter}')

Demo

/// <reference types="@cypress/fiddle" />

const waitForAdd = {
  html: `
    <div id="parent">
      <textarea data-test="textarea">1</textarea>
      <button data-test="insert-item" onclick = "myFunction()"></button>
    </div>
    <script>
      const myFunction = () => {
        setTimeout(() => {
          const parent = document.querySelector('div#parent');
          let ta = document.createElement("textarea");
          ta.setAttribute('data-test', 'textarea');
          parent.appendChild(ta);
        }, 500)
      }
    </script>
  `,
  test: `
    cy.get('[data-test="insert-item"]').click();
    cy.get('[data-test="textarea"]:nth(1)')
      .type('Hello').type('{enter}')
    cy.get('[data-test="textarea"]:nth(1)')
      .invoke('val')
      .should('eq', 'Hello\\n')

    cy.get('[data-test="insert-item"]').click();
    cy.get('[data-test="textarea"]')
      .should('have.length', 3)
      .eq(2)
      .type('Hello again').type('{enter}')
    cy.get('[data-test="textarea"]')
      .eq(2)
      .invoke('val')
      .should('eq', 'Hello again\\n')
`
}
it('tests hello', () => {
  cy.runExample(waitForAdd)
})
user_47162450
Related