javascript - Cypress - 如何等待两个元素中的第二个出现？

Question

我想等到两个元素中的第二个出现后再对其执行操作。目前，我有这个:

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

目前此操作失败。我假设这是因为 Cypress 将收集所有出现的 textarea ，然后尝试在第二个实际呈现在页面上之前选择它(因为创建它的异步请求)。如果我添加 cy.wait(2000);它穿过这两条线之间。

有没有办法在不使用 cy.wait(2000) 的情况下做到这一点？ ，以便它专门等待第二个项目出现？

Answer 1

您可以使用 :nth(1) 将 eq() 移动到选择器中，这将导致索引成为 cy.get 的一部分()重试机制

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

或者您可以在对列表建立索引之前断言所选元素的长度。

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

---

演示

/// <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)
})