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

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

cy.get（'[data test=“insert item”]'）。单击（）；
cy.get（'[data test=“textarea”]'）.eq（1）.type（'Hello'）.type（'{enter}'）；

这项工作目前失败。我假设这是因为Cypress将收集所有出现的

textarea

，然后在它实际呈现在页面上之前尝试选择第二个（因为创建它的异步请求）。如果我添加

cy.wait（2000）在这两行之间传递

如果不使用
cy.wait（2000）
，有没有办法做到这一点，以便它专门等待第二项出现？
您可以使用
：nth（1）
将
eq（）
移动到选择器中，这将导致索引成为
cy.get（）
重试机制的一部分

cy.get（'[data test=“textarea”]：第n（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)
})

//
常量waitForAdd={
html:`
1.
常量myFunction=（）=>{
设置超时（（）=>{
const parent=document.querySelector（'div#parent'）；
设ta=document.createElement（“textarea”）；
ta.setAttribute（'data-test'，'textarea'）；
父母、子女（ta）；
}, 500)
}
`,
测试：`
cy.get（'[data test=“insert item”]'）。单击（）；
cy.get（'[data test=“textarea”]：第n（1）条）
.type（'Hello'）.type（“{enter}”）
cy.get（'[data test=“textarea”]：第n（1）条）
.invoke（'val'））
.should（'eq'，'Hello\\n'）
cy.get（'[data test=“insert item”]'）。单击（）；
cy.get（'[data test=“textarea”]'）
.should（'have.length'，3）
.eq（2）
.type（'Hello reach'）.type（“{enter}”）
cy.get（'[data test=“textarea”]'）
.eq（2）
.invoke（'val'））
.should（'eq'，再次打招呼\\n'）
`
}
它（'测试hello'，（）=>{
cy.runExample（waitForAdd）
})
一种方法是使用
cy.route（）
，比如
cy.server（）cy.route（'**/posts/**'）.as（'getSomething'）cy.wait（'@getSomething'）来等待相关的XHR请求执行。
。您可以在这里找到关于同一个元素的更多信息-docs.cypress.io/api/commands/route.html#syntax谢谢您的建议，但这只是等待XHR响应，而不是第二个元素的外观。可能是您可以尝试其中任何一个来查看第二个元素的外观，看看它是否有效-
cy.get（'[data test=“textarea”]'）。eq（1）.should（'be.visible'）
或
cy.get（'[data test=“textarea”]'）.eq（1）.should（'exist'）
。这也行不通，因为Cypress在第二个出现之前已经评估了
textarea
的数量。是否有一种方法可以等待一定的时间，使条件变为真？