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

2022-03-13 00:00:00 display javascript css 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)

$0
<;SPAN CLASS=​;价格合计>;​ 699.99美元 ​>;​ Cypress.dom.isVisible(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')

相关文章