html - 等待 DOM 加载 : Cypress

Question

我尝试使用 Cypress 进行 E2E 测试。我必须访问一个表中的多个链接，并在访问页面后进行断言。

在 Cypress UI 中，我看到页面已加载，如果我检查，我也可以看到 DOM 中的元素。但是我的 Cypress 断言不起作用，它说:

Timed out retrying after 4000ms: cy.should() failed because this element is detached from the DOM.

<div id="content" class="css-1ddoub">...</div>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

> cy.wait()

This DOM element likely became detached somewhere between the previous and current command.

我的测试代码:

cy.get('[id="content"').parent().within(()=>{
      cy.get('[data-cy="list-item"]').each(item => {
        const link = item.find('a').first();

        cy.visit(link.attr('href')!)
        cy.wait(5000)
        cy.findByText(/report herunterladen/i)
   })
})

元素存在于 DOM 中:

有趣的是，如果我对 url 进行硬编码而不使用 .each，那么在 .visit() 之后所有断言都可以正常工作。

cy.visit('/de/banks/compare/?a=calculations.average&b=ins.PL.PKO') // Hardcoded url
cy.wait(1000)
cy.findByText(/report herunterladen/i)

我尝试使用 cy.wait()，即使是像 30000 这样的大数字，但它没有用。

对我来说，Cypress 似乎有一个 .each() 方法的错误。它不想在每个函数中加载页面 DOM 元素。

Cypress :10.7.0

Answer 1

请看这个答案Traverse through a list... .

为避免分离错误，在 url 列表而不是元素列表上使用 .each()

cy.get('[id="content"')
  .parent()
  .within(() => {
    cy.get('[data-cy="list-item"] a')
      .then($els => [...$els].map((a) => a.href))   
      .each(link => {
        cy.visit(link)
        cy.wait(5000)
        cy.findByText(/report herunterladen/i)
   })
})