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

它在第一个运行(获取所有按钮 => 单击第一个 => 返回 )
但在重新打开之后工作正常单击下一步按钮之前的起始站点赛普拉斯抛出错误：

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

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

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

Cypress click() failed because this element is detached from the DOM in iteration

integration-testing

cypress