Is there a way to set CSS properties like `display` using Cypress commands?

Question

I would like to hide an element by setting the display property.

I've tried using invoke to set the attribute value, but it may only work for HTML attributes?

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

This seems to be setting the attribute values, but the element is still visible, which leads me to believe it's probably not recognizing my attribute or i'm using the wrong command.

Tried using this as suggested:

The .css() function seems to not be setting the value the way it should:

Here's me validating my own sanity that the selector is correct and the display is none lol:

Answer 1

This seems to work folks. I believe initial !important is a reference of some sort and not an actual value and maybe that's why .css() wouldn't work.

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

Answer 2

You can invoke the css function from jQuery using invoke to change the CSS. Note that your !important won't work, but you don't need it, since setting CSS via Javascript will override any other styles on the item.

Then you can just use the have.css assertion from the Assertion List to check, if you need to.

Here's what that would look like:

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