Javascript 有没有一种方法可以使用Cypress命令设置CSS属性，比如“display”？

我想通过设置display属性来隐藏元素

我尝试使用

invoke

设置属性值，但它可能只适用于HTML属性

cy.get('#hubspot-messages-iframe-container > iframe')
        .invoke('attr', 'display', 'none!important')
        .should('have.attr', 'display', 'none!important')

这似乎是在设置属性值，但元素仍然可见，这让我相信它可能没有识别我的属性，或者我使用了错误的命令

尝试按建议使用此选项：

.css（）函数似乎没有按其应该的方式设置值：

我正在验证我自己的理智，选择器是否正确，显示是否为

none

lol:

---

如果您想要的是CSS，您可能应该使用样式而不是属性

我不确定cypress是如何工作的，但我可以猜是这样的：

cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('style', 'display', 'none! important')
.should('have.style', 'display', 'none !important')

因为display不是一个属性，所以它是一个CSS属性，应该在样式属性中

如果这不起作用，也许类似的事情可能会：

cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('attr', 'style', 'display: none! important')
.should('have.attr', 'style', 'display: none !important')

您可以使用

invoke

调用来更改CSS。请注意，您的

！重要提示

不起作用，但您不需要它，因为通过Javascript设置CSS将覆盖项目上的任何其他样式

然后，如果需要的话，您可以使用来自的

have.css

断言进行检查

下面是它的样子：

cy.get（“#hubspot messages iframe container>iframe”）
//使用jquery中的.css函数，因为Cypress生成jquery元素
.invoke（'css'，'display'，'none'）
.should（'have.css'，'display'，'none'）

这似乎很管用。我相信

首字母！重要提示

是某种引用，而不是实际值，这可能就是为什么

.css（）

不起作用的原因

Cypress.Commands.add('hideHubSpot', () => {
    cy.get('#hubspot-messages-iframe-container')
        .invoke('attr', 'style', 'display: none')
        .should('have.attr', 'style', 'display: none')

---

您不能使用

！重要的

使用它，但没关系，您不需要

！重要提示

-此处无效。我尝试了使用

无

但没有效果，因此我也尝试了这种方法。您可以在尝试使用

无

但无效的地方共享规范代码吗？我测试了我在本地共享的答案，所以它应该是有效的。它不是必须是

.css（'display'，'none！important'）

而不是

.css（display，none！important）

，指的是缺少引号。@MihailMinkov这是一个很好的猜测，我试过这个

“'display'”，'none'）

并且它现在在输出中显示为

.css（'display'，'none'）

但它仍然没有更新值。由于.css（）的方式，这似乎不起作用有效-我相信这是样式表上的一条规则，不允许jquery设置从

继承的值。我确实在某些方面提供了帮助，哈哈@Jamesjus出于好奇，为什么要使用图像而不是代码片段？这对我不起作用。有效的方法是：

cy.get（'SELECTOR'）。invoke（'attr'，'style'，'display:none！important'）。应该（'have.attr'，'style'，'display:none！important'，）

它不起作用，cypress没有

have.style

断言在

应该
下，但我把
have.attr
放在
不