当父元素具有 CSS 属性时，赛普拉斯如何断言元素可见：显示：无

Question

如何为父元素隐藏了 css 属性的元素编写柏树可见断言？ 我有以下 HTMl 代码

<td class="item-total item-total-mobile-hidden">
<p class="mobile-show block-price-text">Total Price:</p>
<span class="price-total">
$699.99
</span>
</td>

当我编写以下柏树代码来断言价格元素是可见的

Cy.get('.price-total').should('be.visible')

我收到此错误消息 Timed out retrying: expected '<span.price-total>' to be 'visible'

此元素 <span.price-total> 不可见，因为其父元素 <div.item-total-price-mobile-show> 具有 CSS 属性：显示：无

我必须尝试在控制台上调试它（将跨度放在变量 $0 中）

$0
<span class="price-total"> $699.99 > Cypress.dom.isVisible($0) true

这里显示 span 元素是 isVisible true，但我无法断言它。 我通过调用子元素上的文本尝试了以下操作，但它也不起作用

cy.get('.price-total').invoke('text')
      .then((text)=>{
        const divTxt = text;
expect(divTxt).to.be.visible; })

这不起作用，我收到以下错误，因为 cypress 找不到隐藏元素 重试超时：预计找到元素：.price-total，但从未找到它。

断言元素 <span class="price-total"> 可见的最佳方法是什么？

Answer 1

我不确定我是否得到了完整的图片，但检查Cypress.dom.isVisible($0)的技能很好。

您可以通过使用带有回调的.should()在测试中使用完全相同的表达式

cy.get('.price-total')
  .should($priceEl => {     // retries if necessary when expect fails

    expect(Cypress.dom.isVisible($priceEl).to.eq(true)

  })

---

我不确定这是确定的，已经看到了一个 Angular 应用程序（选择控件），其中父项display: none ，但子项对用户可见（参考Access 元素，其父项是隐藏的）

在此答案中，自定义 function 用于重新定义可见性标准。 诀窍是弄清楚要检查您的应用程序的内容...

// Change this function if other criteria are required.
const isVisible = (elem) => !!( 
  elem.offsetWidth ||                          
  elem.offsetHeight || 
  elem.getClientRects().length 
)

---

在父元素删除display: none之前，您可能只是有一个延迟（例如动画）。

检查控制台中的父级，看看它最终是否具有不同的display值。

在这种情况下，首先检查父母（不是曼努埃尔所说的孩子）。

cy.get('td.item-total')
  .should('not.have.css', 'display', 'none')  
  .find('.price-total')
  .should($priceEl => {     
    expect(Cypress.dom.isVisible($priceEl).to.eq(true)
  })

Answer 2

您可以在.price-total CSS 具有"display: none"属性时重试，如下所示：

cy.get('.price-total').should('not.have.css', 'display', 'none')

Answer 3

如果您要查找的元素的父元素具有display:none则您的元素不会显示（不可见），要查看这是真的，只需输入：

cy.get('.price-total').should('be.not.visible')

注意：我使用的是 cypress 版本：8.3.1