Nuestros mejores investigadores han agotado sus reservas de café, por su búsqueda día y noche por la solución, hasta que Angélica encontró la contestación en Gogs y hoy la compartimos con nosotros.
Solución:
Esto parece funcionar amigos. Yo creo initial !important es una referencia de algún tipo y no un valor real y tal vez por eso .css() no funcionaría
Cypress.Commands.add('hideHubSpot', () => {
cy.get('#hubspot-messages-iframe-container')
.invoke('attr', 'style', 'display: none')
.should('have.attr', 'style', 'display: none')
Si lo que busca es CSS, probablemente debería usar estilo en lugar de attribute.
No estoy seguro de cómo funciona el ciprés, pero puedo suponer que es algo como esto:
cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('style', 'display', 'none! important')
.should('have.style', 'display', 'none !important')
Que debido a que la pantalla no es un attributees una propiedad CSS que debería estar dentro de un estilo attribute.
En caso de que esto no funcione, tal vez algo como esto podría:
cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('attr', 'style', 'display: none! important')
.should('have.attr', 'style', 'display: none !important')
Puedes invocar el css función de jQuery usando invoke para cambiar el CSS. Tenga en cuenta que su !important no funcionará, pero no lo necesita, ya que configurar CSS a través de Javascript anulará cualquier otro estilo en el elemento.
Entonces solo puedes usar el have.css aserción de la lista de aserciones para verificar, si es necesario.
Así es como se vería:
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')