Question

我编写了代码来读取每个li，然后将其扭曲以获取每个链接。我尝试访问循环中的每个链接，并验证每个页面上显示的某些元素。但是，加载新页面后，赛普拉斯向我抛出了DOM分离错误。

我试图以多种方式循环并单击每个链接，但我没有运气能成功实现。

我尝试过了。

it('test', () => {
    cy.visit('https://www.cypress.io/')

    cy.get('li.header__NavItem-xi2ch0-6').each(($el, index, list) => {

      cy.wrap($el).children().click()

    })

  })

还有这个。

 it('test', () => {
    cy.visit('https://www.cypress.io/')

    cy.get('li.header__NavItem-xi2ch0-6').each(($el, index, list) => {

      cy.wrap($el).children().and('have.attr', 'href').then((href) => {
        cy.log(href)


        cy.visit('https://www.cypress.io/' + href)


      })

    })

 })

但是，赛普拉斯向我抛出了DOM分离错误。

CypressError：cy.children（）失败，因为此元素与DOM分离。

...

Cypress要求将元素附加在DOM中才能与它们交互。

先前运行的命令是：

cy.wrap（）

此DOM元素很可能在上一个命令和当前命令之间的某个位置分离。

发生这种情况的常见情况： -您的JS框架以异步方式重新渲染 -您的应用代码对事件触发做出了反应，并删除了该元素

您通常需要重新查询该元素或添加“防护”，以使赛普拉斯无法运行新命令。

Answer 1

您可以将cy.visit与href属性一起使用，然后编写一个断言并轻松返回xD

cy.get('li').each((item) => {
  const title = item.find('h1').first().text();
  const link = item.find('a').first();

  cy.visit(link.attr('href'));

  cy.get('h1').should('have.text', title);
  cy.go('back');
});

如何通过单击每个链接来循环并验证每个页面上的相同元素？

1 个答案: