有没有一种方法可以使用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

这似乎对人们有用。我相信initial !important是某种类型的参考，而不是实际值，也许这就是.css()行不通的原因。

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

Answer 2

您可以使用cssjQuery 调用该函数invoke来更改 CSS。请注意，您!important不会工作，但您不需要它，因为通过 Javascript 设置 CSS 将覆盖该项目上的任何其他样式。

然后，如果需要，您可以使用断言列表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')