web-dev-qa-db-fra.com

Existe-t-il un moyen de définir des propriétés CSS comme `display` à l'aide des commandes Cypress?

Je voudrais masquer un élément en définissant la propriété d'affichage.

J'ai essayé d'utiliser invoke pour définir la valeur de l'attribut, mais cela ne peut fonctionner que pour les attributs HTML?

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

Cela semble définir les valeurs d'attribut, mais l'élément est toujours visible, ce qui m'amène à croire qu'il ne reconnaît probablement pas mon attribut ou que j'utilise la mauvaise commande.

J'ai essayé d'utiliser ceci comme suggéré:

enter image description here

La fonction .css () ne semble pas définir la valeur comme il se doit:

enter image description here

Voici que je valide ma propre raison que le sélecteur est correct et que l'affichage est none lol: enter image description here

javascriptjqueryhtmlcsscypress
8
jameseg

Cela semble fonctionner les gens. Je crois que initial !important Est une sorte de référence et non une valeur réelle et c'est peut-être pourquoi .css() ne fonctionnerait pas.

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

Vous pouvez appeler la fonction css de jQuery en utilisant invoke pour changer le CSS. Notez que votre !important ne fonctionnera pas, mais vous n'en avez pas besoin, car la définition de CSS via Javascript remplacera tous les autres styles de l'élément.

Ensuite, vous pouvez simplement utiliser le have.css assertion de la Assertion List pour vérifier, si vous en avez besoin.

Voici à quoi cela ressemblerait:

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')
2
Zach Bloomquist

Si c'est CSS que vous recherchez, vous devriez probablement utiliser le style au lieu de l'attribut.

Je ne sais pas comment fonctionne le cyprès, mais je suppose que c'est quelque chose comme ça:

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

Cela parce que l'affichage n'est pas un attribut, c'est une propriété CSS qui devrait être à l'intérieur d'un attribut de style.

Au cas où cela ne fonctionnerait pas, quelque chose comme ça pourrait peut-être:

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