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

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

If it's CSS you're after, you should probably use style instead of attribute.

I am not sure how cypress works, but I can guess it's something like this:

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

That because display is not an attribute, it's a CSS property that should be inside a style attribute.

In case this doesn't work, perhaps something like this might:

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

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