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

Question

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

我尝试使用invoke设置属性值，但是它仅适用于HTML属性吗？

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

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

根据建议尝试使用此方法

.css（）函数似乎未按照应有的方式设置值：

这是我在验证自己的理智，即选择器正确且显示为none大声笑：

Answer 1

您可以使用invoke来调用css function from jQuery来更改CSS。请注意，您的!important不起作用，但您不需要它，因为通过Javascript设置CSS会覆盖该项目上的所有其他样式。

然后，您可以根据需要使用Assertion List中的have.css断言进行检查。

这里是这样的：

cy.get('#hubspot-messages-iframe-container > iframe')
  // use the .css function from jquery, since Cypress yields jquery elements
  .invoke('css', 'display', 'none')
  .should('have.css', 'display', 'none')

Answer 2

如果要使用CSS，则应该使用样式而不是属性。

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

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')

Answer 3

这似乎对人们有用。我相信initial !important只是某种形式的引用，而不是实际值，也许这就是.css()不起作用的原因。