integration-testing - Cypress click() 失败，因为该元素在迭代中与 DOM 分离

Question

我尝试使用 cypress 测试我的 单页应用程序。
第一个页面有多个按钮作为 anchor 标记，它们将您引导到第二个站点(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()
            }
        )
    })
})

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

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

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