温馨提示:本文翻译自stackoverflow.com,查看原文请点击:cypress - Error "element is detached from the DOM" after vising a link in a loop
cypress

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

发布于 2020-03-27 10:26:47

我想通过单击列表中的链接进行烟雾测试。首次访问后,测试将停止并显示以下错误。

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>

查看更多

查看更多

提问者
Me Unagi
被浏览
684
Vangelisz Ketipisz 2019-07-03 21:25

调用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(...))基本上与上面相同。