Cypress click() 失败，因为此元素在迭代中与 DOM 分离答案

【问题标题】：Cypress click() failed because this element is detached from the DOM in iterationCypress click() 失败，因为此元素在迭代中与 DOM 分离
【发布时间】：2020-04-09 14:33:51
【问题描述】：

我尝试使用 cypress 测试我的 单页应用程序。
第一个页面有多个按钮作为锚标记，它们将您引导到第二个站点（Angular 路由）。
在第二个站点上，我有一个“后退”按钮。
所以我希望我的测试点击一个按钮，等待第二个站点出现，点击背面，然后对所有剩余的按钮重复此操作。

这是我的柏树测试：

describe('Select products', function () {
    before(() => {
        cy.visit('http://localhost:4200/')
    })
    it('Clicking through products', function () {
    
        // getting each anchor to click 
        cy.get('a[data-cy=submit]').each(
            ($el) => {
            
                // click to get on next site
                cy.wrap($el).click()
                
                // click to go back
                cy.contains('go back').click()
            }
        )
    })
})

第一次运行时效果很好（获取所有按钮=>单击第一个=>返回）
但是在单击下一个按钮之前回到起始站点后赛普拉斯会抛出一个错误：

有人可以帮我解决这个问题吗？感谢您的帮助！

【问题讨论】：

在我看来，在下一次 .each() 迭代发生之前，“返回”还没有完成。您可以通过在cy.contains('go back').click() 之后为首页独有的内容添加一个简单的测试来确保您回到首页，例如cy.contains('h1', 'myFirstPageTitle')。
我尝试在cy.contains('go back').click() 之后添加cy.wait(3000) 计时器或cy.pause()，但我得到了同样的错误

标签： integration-testing cypress

【解决方案1】：

cy.get('a[data-cy=submit]') 必须获取按钮列表并将它们存储以通过.each() 进行迭代，但.each() 中的代码会从第一页导航出去——我猜Angular 破坏了.each() 的原始元素尝试迭代。

这类似于迭代一个列表并在迭代中更改列表，由于列表更改，循环会出错。

如果你知道有多少个按钮，这将是一个更好的方法

const buttonCount = 4;

for (let i = 0; i < buttonCount; i++) {
  cy.get('a[data-cy=submit]').eq(i).click();
  cy.contains('go back').click();
}

如果按钮是动态的（您不知道计数），请使用

cy.get('a[data-cy=submit]').then($buttons => {

  const buttonCount = $buttons.length;

  for (let i = 0; i < buttonCount; i++) {
    cy.get('a[data-cy=submit]').eq(i).click();
    cy.contains('go back').click();
  }
}

【讨论】：