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

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

此元素不可见，因为其父元素具有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

CSS具有

的“display:none”属性，如下所示：

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

您可以在
时重试。price total
CSS具有
显示：无
属性，如下所示：

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

我不确定我是否了解了全部情况，但是检查
Cypress.dom.isVisible（$0）
的技巧很好

您可以在测试中使用完全相同的表达式，方法是使用带有回调的
.should（）

cy.get（“.price total”）
.should（$pricel=>{//expect失败时，如果需要重试
expect（Cypress.dom.isVisible（$pricel.to.eq）（true）
})


我不确定这是否是确定的，我看过一个Angular应用程序（选择控件），其中父对象是
display:none
，但子对象对用户可见（参考）

在这个答案中，一个自定义函数被用来重新定义可见性的标准

//如果需要其他条件，请更改此函数。
常量isVisible=（元素）=>！！（
等距线
元素离视| |
元素getClientRects（）.length
)


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

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

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

cy.get（'td.item total'）
.should（'not.have.css'，'display'，'none'）
.find（“.price total”）
.should（$pricel=>{
expect（Cypress.dom.isVisible（$pricel.to.eq）（true）
})
我不确定我是否了解了全部情况，但是检查
Cypress.dom.isVisible（$0）的技能很好

您可以在测试中使用完全相同的表达式，方法是使用带有回调的
.should（）

cy.get（“.price total”）
.should（$pricel=>{//expect失败时，如果需要重试
expect（Cypress.dom.isVisible（$pricel.to.eq）（true）
})


我不确定这是否是确定的，我看过一个Angular应用程序（选择控件），其中父对象是
display:none
，但子对象对用户可见（参考）

在这个答案中，一个自定义函数被用来重新定义可见性的标准

//如果需要其他条件，请更改此函数。
常量isVisible=（元素）=>！！（
等距线
元素离视| |
元素getClientRects（）.length
)


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

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

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

cy.get（'td.item total'）
.should（'not.have.css'，'display'，'none'）
.find（“.price total”）
.should（$pricel=>{
expect（Cypress.dom.isVisible（$pricel.to.eq）（true）
})
这将是对可见元素的“双负”验证，我更希望直接验证“可见”。但如果其他方法无效，我将不得不使用它，我可能会添加额外的检查，以确保元素没有“隐藏”属性。发现此页面非常有用，这也将是一个对可见元素的“双负”验证，我更喜欢直接验证“可见”。但如果没有其他有效方法，我将不得不使用它，我可能会添加额外的检查，以确保元素没有“隐藏”“Property发现此页面非常有用。您使用的Cypress版本是什么？在5.x和6.x之间，“be.visible”的工作方式发生了变化。您使用的Cypress版本是什么？在5.x和6.x之间，“be.visible”的工作方式发生了变化。