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

【问题标题】：How does Cypress assert an element is visible when parent element has CSS property: display: none当父元素具有 CSS 属性时，赛普拉斯如何断言元素可见：显示：无
【发布时间】：2021-03-15 22:24:17
【问题描述】：

如何为父元素隐藏 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 为真，但我无法断言它。我通过调用子元素上的文本尝试了以下操作，但它也不起作用

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

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

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

【问题讨论】：

您使用的是什么版本的赛普拉斯？在 5.x 和 6.x 之间，“be.visible”的工作方式发生了变化。

标签： javascript css cypress display

【解决方案1】：

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

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

【讨论】：

这将是对可见元素的“双重否定”验证，我更愿意直接验证“可见”。但如果没有其他工作我将不得不使用它，我可能会添加额外的检查元素没有“隐藏”属性
发现这个页面也很有用github.com/cypress-io/cypress/issues/877

【解决方案2】：

我不确定我是否得到了完整的图片，但是检查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 element whose parent is hidden）

在此答案中，自定义函数用于重新定义可见性标准。诀窍是弄清楚要为您的应用检查什么...

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

在父元素移除 display: none 之前，您可能会有延迟（例如动画）。

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

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

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

【讨论】：