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

Question

我尝试用 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()
            }
        )
    })
})

它适用于第一次运行（获取所有按钮 => 单击第一个 => 返回）
但在返回起始站点后单击下一个按钮 cypress 会引发错误：

有人可以帮我弄这个吗？谢谢你的帮助！

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