有没有办法使用赛普拉斯命令设置 CSS 属性，如“显示”？

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

您可以使用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 3

如果你追求的是 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')

Answer 4

P D 的回答对我有用。我也不必在我的任何样式中添加 !important，因此重申他所说的话，例如，此代码对我来说可以将调用的文本更改为粗体和绿色背景，前景色为白色：

cy.get($el).invoke('attr','style','font-weight: bold; color:#fff; background-color: #090;').invoke('text').then((text)=>{
   cy.wait(200);
});

我希望这对某人有所帮助。

布鲁斯