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

Question

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

https://i.stack.imgur.com/0PFTq.jpg

我尝试以多种方式循环并单击每个链接，但没有成功。

我试过这个。

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)


      })

    })

 })

但是，cypress 向我抛出 DOM 分离错误。

CypressError: cy.children() 失败，因为该元素已与 DOM 分离。

...

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

之前运行的命令是：

cy.wrap()

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

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

您通常需要重新查询元素或添加“防护”，以延迟 Cypress 运行新命令。

Answer 1

You can use cy.visit with the href attribute, then write an assertion and go back easily 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');
});