如何用Cypress定位同data-test属性的未隐藏div标签？

问题场景 #

现有三个结构相似的div标签，data-test属性值完全相同，其中前两个通过visibility: hidden隐藏，第三个为可见状态：

<div data-test="someId" style="position: fixed; visibility: hidden;">more tags</div>
<div data-test="someId" style="position: fixed; visibility: hidden;">more tags</div>
<div data-test="someId" style="position: fixed;">more tags</div>

尝试使用cy.get('[data-test=someId]').should('not.have.css', 'visibility')未生效，原因是所有元素都存在visibility CSS属性（隐藏元素的属性值为hidden，可见元素的默认值为visible），该断言逻辑错误，无法筛选出可见元素。

可行解决方法 #

• 方法一：使用:visible伪选择器
  Cypress支持:visible伪选择器，会自动过滤掉不可见元素（包括visibility: hidden、display: none等情况）：

cy.get('[data-test="someId"]:visible').should('have.length', 1)

• 方法二：通过filter()筛选可见元素
  利用DOM元素的计算样式，过滤出visibility值不为hidden的元素：

cy.get('[data-test="someId"]').filter((index, element) => {
  return window.getComputedStyle(element).visibility !== 'hidden';
}).should('have.length', 1)

• 方法三：断言visibility属性值为visible
  遍历所有匹配元素，检查元素的visibility属性值为visible：

cy.get('[data-test="someId"]').each(($el) => {
  if ($el.css('visibility') === 'visible') {
    cy.wrap($el).as('visibleDiv') // 存为别名方便后续操作
  }
})

// 后续使用该元素
cy.get('@visibleDiv').should('exist')

内容的提问来源于stack exchange，提问作者Tirath Sojitra