当父元素具有CSS属性：DISPLAY：NONE时，Cypress如何断言元素可见

问题描述

如何为其父元素具有隐藏CSS属性的元素编写Cypress可见断言？我有以下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>

当我编写以下cypress代码以断言价格元素可见时

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

我收到此错误消息重试超时：预期‘<；span.Price-Total>；’为‘可见’

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

我必须尝试在控制台上进行调试(将跨度放入变量$0)

这里显示了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-totalcss具有"display: none"属性时可以重试：

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

这篇关于当父元素具有CSS属性：DISPLAY：NONE时，Cypress如何断言元素可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！