等待 DOM 加载：赛普拉斯答案

【问题标题】：Waiting for DOM to load: Cypress等待 DOM 加载：赛普拉斯
【发布时间】：2022-10-02 12:24:10
【问题描述】：

我尝试进行 E2E 测试柏.我必须访问表格中的多个链接并在访问页面后做出断言。

在赛普拉斯 UI 中，我看到页面已加载，如果我检查我可以看到 DOM 中的元素。但我的赛普拉斯断言不起作用，它说：

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 这样的大数字，但它没有用。

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

赛普拉斯：10.7.0

标签： html testing cypress e2e-testing cypress-testing-library

【解决方案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)
   })
})

【讨论】：

【解决方案2】：

请试试这个！

 cy.get('[id="content"').parent().within(()=>{
              cy.get('[data-cy="list-item"]').each(item => {
                
             cy.wrap(item).find('a').first().invoke('attr','href').then((href)=>{
                cy.visit(href)
                cy.wait(2000)
                cy.findByText(/report herunterladen/i)
             })   
           })
        })

【讨论】：

我尝试过这个。必须在最后一行之后添加 .should()：cy.findByText(/report herunterladen/i).should('exist')。它会引发元素不可见的错误。如果没有 should('exist') 它可以工作，但它不会检查元素是否被渲染。
确保在 dom 中只有一个文本匹配“report herunterladen”的结果。 cypress 可能正在与具有匹配文本“report herunterladen”的隐藏元素交互。
遗憾的是没有结果。如果会有更多结果，那么它会因为多个相同的元素而引发错误。

【解决方案3】：

当您成功将 DOM 元素保存（例如使用 cy.get()）到内存中并尝试访问它但页面不幸同时删除了该元素时，会发生分离错误。准确地说，页面可能已经重新渲染（重新创建了相同的元素）。

可以输入cy.wait()，但在您实际尝试访问元素之前。

// Change this number depending on your needs
cy.wait(2000) // Let the page do it's thing

// Now try to access
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 元素错误实际上是一个 JS 错误。

【讨论】：