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

您可以使用 将 移动eq()到选择器中:nth(1)，这将导致索引成为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)
})