赛普拉斯click（）失败，因为此元素在迭代中与DOM分离

Question

我尝试用cypress测试我的单页应用程序。
第一页有多个锚标签按钮，可将您定向到第二个站点（角度路由）。
在第二个站点上，我有一个“后退”按钮。
所以我想让我的测试单击一个按钮，等待第二个站点出现，单击背面，然后对所有其余按钮重复此操作。

这是我的柏树测试：

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()
            }
        )
    })
})

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

有人可以帮我吗？ 感谢您的帮助！

Answer 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();
  }
}