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

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

1 个答案: