web-dev-qa-db-fra.com

Comment vérifier si la largeur d'élément est inférieure ou égale à une taille de pixels dans le cyprès?

Mon objectif est d'écrire un test de cyprès qui vérifie si la largeur d'un élément est inférieure ou égale à 355px.

J'ai ce code, mais cela ne vérifie que la dimension exacte:

cy
.get('.mat-dialog-container:visible')
.should('have.css', 'width', '355px')
cypress
7
DauleDK

Tout ce qui peut être automatisé, devrait être (à moins que l'utilité attendue de cela soit dépassée par le coût de la mise en œuvre et de la maintenance, bien sûr ), je pense donc que l'automatisation des tests de RD est une bonne idée. Si la vérification des dimensions du conteneur est la voie à laquelle il est une question ouverte (on pourrait dire que vous devriez plutôt vérifier que les éléments attendus qui doivent être cachés, sont cachés et des éléments qui doivent être visibles, sont visibles et si l'interface utilisateur fonctionne comme attendu).

Hélas, voici comment réaliser ce que vous voulez.

J'irais avec jQuery's outerWidth Ce que vous voulez généralement vérifier au lieu de width (au cas où il y a padding ou border):

cy.get(selector).invoke('outerWidth').should('be.lt', 355);

Si vous souhaitez vraiment affirmer la valeur CSS calculée réelle, vous pouvez en effet utiliser jQuery css assistant (ou utilisation window.getComputedStyle , ça n'a pas vraiment d'importance):

cy.get(selector).invoke('css', 'width')
    .then(str => parseInt(str)).should('be.lt', 355);

// or use jQuery.prototype.width (I'm not sure if there's any meaningful
//  difference, but there might be --- better check the docs)
cy.get(selector).invoke('width').should('be.lt', 355');
1
dwelle