在循环中查看链接后出现错误“元素与 DOM 分离”

Question

我正在尝试通过单击列表中的链接来进行烟雾测试。第一次访问后，测试停止并出现以下错误。

CypressError: cy.click() failed because this element is detached from the DOM.

<a href="/link2">...</a>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

> cy.wrap()

我该怎么做才能保持循环中的元素？

it('Click each link in the list', () => {
  cy.get('li a').each(($el, index, $list) => {
     cy.wrap($el).click();
     cy.go(-1);
  })
})

测试的目的是检查列表中的所有页面是否都没有出现 404 错误。按照html代码

<ul>
   <li><a href="/link1">Link 1</a></li>
   <li><a href="/link2">Link 2</a></li>
   <li><a href="/link3">Link 3</a></li>
</ul>

Answer 1

当您调用 cy.get() 时，您将保存引用，然后通过单击链接导航离开 - 因此对这些元素的引用不再有效。您可以为这些元素制作一个 id 列表：

const listOfIds = ['#first_id', '#second_id']
listOfIds.forEach(id => cy.get(id).click())

或者，如果您想动态生成列表，也可以这样做：

function getIds(){
            let ids = []
            return new Cypress.Promise(resolve => {
                cy.get('.your-selector')
                    .each($el =>
                        cy.wrap($el)
                            .invoke('attr', 'id')
                            .then(id => ids.push(id))
                    )
                    .then(() => resolve(ids))
            })
        }

之后调用getIds().then(ids => ids.forEach(...))基本和上面一样。