当父元素具有 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')

我收到此错误消息 超时重试：预期“”为“可见”

此元素 不可见，因为其父元素 具有 CSS 属性：display: none

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

$0
​ 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，但从未找到。

断言元素 ​ 可见的最佳方法是什么？

我不确定我是否了解完整情况，但良好的技能检查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但孩子对用户可见（参考访问父级隐藏的元素 https://stackoverflow.com/a/47625195/14783414)

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

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

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

在控制台中检查父级，看看它最终是否有不同的display value.

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

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