Cypress 是一个非常强大的前端自动化测试框架，它可以模拟用户在浏览器中执行各种操作，并对页面元素进行断言和验证。但如果某个元素被设置为隐藏或不可见，则难以查找和操作，这就需要使用一些特殊的技术了。
为什么元素会被隐藏或不可见？
元素被隐藏或不可见，通常有以下几种原因：
- CSS 样式：通过设置
display: none、visibility: hidden、opacity: 0等属性，将元素从页面中隐藏或不可见。 - 元素位置：元素可能在屏幕之外，或者被其他元素盖住了。
- 异步加载：元素可能是异步加载的结果，需要等待数据加载完成后才能出现在页面上。
如何在 Cypress 中找到隐藏的元素？
Cypress 提供了多种方法来查找元素，常用的有 cy.get() 和 cy.contains() 方法。但这些方法无法直接定位隐藏或不可见的元素，所以我们需要使用其他方法。
使用 cy.get() 方法的 {force: true} 参数
cy.get() 方法有一个 {force: true} 参数，可以强制获取元素，即使它当前被隐藏或不可见。例如：
cy.get('#my-element', {force: true}).click()这会强制获取 id 为 my-element 的元素，并模拟点击它。
使用 .should() 方法的 {visible: false} 参数
Cypress 的 .should() 方法用于对元素进行断言和验证。其中 {visible: false} 参数可以用来判断元素是否不可见。例如：
cy.get('#my-element').should('be.hidden')这会获取 id 为 my-element 的元素，并判断它是否隐藏。
使用 cy.wait() 方法等待异步加载
如果元素是异步加载的，可以使用 cy.wait() 方法来等待其出现。例如：
cy.get('#my-element')
.should('not.be.visible')
.then(() => {
// 等待 2 秒钟，等待数据加载完成
cy.wait(2000)
.get('#my-element')
.should('be.visible')
})这会先获取 id 为 my-element 的元素，然后通过 .should('not.be.visible') 判断它当前不可见，接着等待 2 秒钟，最后再次获取元素并判断它已经可见。
如何在 Cypress 中操作隐藏的元素？
在找到隐藏的元素后，我们需要对其进行操作。通常的操作方法仍然适用，使用 .click()、.type() 或 .select() 等方法即可。例如：
cy.get('#my-element', {force: true}).click()
cy.get('#my-input', {force: true}).type('Hello World')
cy.get('#my-select', {force: true}).select('Option 1')注意，强制获取元素可能会造成 Cypress 测试的不稳定性和可靠性问题，因此应尽可能地避免使用 {force: true} 参数。
结论
在 Cypress 中查找和操作隐藏的元素需要一些特殊技术，如强制获取元素、判断元素是否不可见、等待异步加载等。这些方法可以帮助我们完成更复杂的自动化测试任务，提高前端开发效率和品质。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729f07addd3a70eb6cec329