Cypress Assertion nous aide à affirmer un particulier Les assertions sont des étapes de validation qui garantissent si le résultat attendu est égal au résultat réel. Dans l'automatisation des tests, nous affirmons une déclaration pour vérifier que le test génère le résultat attendu. Si l'assertion échoue, le scénario de test échoue, garantissant qu'il y a un bogue. Dans cet article, nous parlerons de Assertion Cypress avec implémentation Handson et exemples.
Table des matières
- Qu'est-ce que Cypress Assertion ?
- Cypress Assertion Texte
- Affirmation commune de cyprès
- Assertion de nouvelle tentative de Cypress
- Exemples d'assertion Cypress
- Assertion implicite dans Cypress
- Affirmation explicite dans Cypress
- Assertion négative de cyprès
- Message d'assertion personnalisé Cypress
- Meilleures pratiques d'assertion de Cypress
Qu'est-ce que Cypress Assertion ?
Cypress utilise et encapsule la bibliothèque d'assertions Chai et des extensions comme Sinon et JQuery. Cypress attend et réessaye automatiquement jusqu'à ce que l'assertion soit résolue. Les assertions peuvent être utilisées pour décrire à quoi devrait ressembler l'application. Nous pouvons utiliser les assertions Cypress avec une combinaison d'attente, de réessai, de blocage jusqu'à ce qu'il atteigne l'état souhaité.
Cypress Assertion Texte
En anglais général, nous décririons une affirmation quelque chose comme, Je m'attendrais à ce que le bouton ait un texte de connexion. La même assertion peut être écrite en Cypress comme
cy.get('button').should('have.value', 'login')
L'assertion ci-dessus passera si le bouton a la valeur 'login'.
Cypress Assertions courantes
Il existe un ensemble d'assertions Cypress courantes que nous utilisons dans nos cas de test. Nous les utiliserons avec .should()
. Examinons le cas d'utilisation et les exemples.
Certaines des affirmations courantes de Cypress sont énumérées ci-dessous
- Longueur
- Valeur
- Contexte du texte
- Classe
- Existence
- CSS
- Visibilité
- Région
- Propriété handicapée
Affirmation de la longueur du cyprès
length()
vérifiera si l'élément particulier a une longueur
cy.get('dropdown').should('have.length', 5)
Affirmation de valeur Cypress
La valeur Cypress s'affirmera si l'élément particulier a la valeur attendue
cy.get('textfield').should('have.value', 'first name')
Assertion de contexte de texte Cypress
Le contexte du texte s'affirmera si l'élément a le texte particulier
cy.get('#user-name').should('have.text', 'John Doe')
Affirmation de classe Cypress
Affirme si la classe est présente ou si l'élément particulier doit avoir la classe
cy.get('form').find('input').should('have.class', 'disabled')
Affirmation d'existence de cyprès
La commande Existence vérifie si l'élément particulier est présent ou existe dans le DOM ou non
cy.get('#button').should('exist')
Assertion CSS Cypress
L'assertion CSS vérifie si les éléments particuliers ont une propriété particulière
cy.get('.completed').should('have.css', 'text-decoration', 'line-through')
Assertion de visibilité Cypress
Cypress Visibility Assertion affirme si l'élément DOM est visible dans l'interface utilisateur
cy.get('#form-submit').should('be.visible')
Affirmation de l'État de Cypress
Affirme l'état de l'élément DOM
cy.get(':radio').should('be.checked')
Assertion de propriété désactivée par Cypress
L'assertion de propriété Cypress Disabled affirme si l'élément est désactivé
cy.get('#example-input').should('be.disabled')
Assertion de nouvelle tentative de Cypress
Une seule commande suivie d'une assertion s'exécutera dans l'ordre. Initialement, la commande s'exécute, puis l'assertion sera exécutée. Une seule commande suivie de plusieurs assertions s'exécutera également dans l'ordre – respectivement la première et la deuxième assertion. Ainsi, lorsque la première assertion passe, la première et la deuxième assertion seront à nouveau exécutées avec les commandes.
Par exemple, la commande ci-dessous contient à la fois .should()
et .and()
commandes d'assertion, où .and()
est autrement connu sous le nom .should()
cy.get('.todo-list li') // commande .should('have.length', 2) // assertion .and(($li) => { // 2 autres assertions expect($li.get (0).textContent, 'premier élément').to.equal('todo A') expect($li.get(1).textContent, 'second item').to.equal('todo B') })
Exemples d'assertion Cypress
Dans cette section, nous discuterons des différents types d'assertions dans Cypress telles que
- Assertion implicite
- Affirmation explicite
Nous examinerons en détail les deux types avec des exemples
Assertion implicite dans Cypress
Dans l'assertion implicite, on utilise .should()
or .and()
commandes. Ces commandes d'assertion s'appliquent au sujet actuellement produit dans la chaîne de commandes. Ils dépendent du sujet précédemment cédé.
Nous allons examiner un exemple sur la façon d'utiliser .should()
or .and()
commandes
cy.get('bouton').devrait('avoir.classe', 'activé')
Avec .and()
qui est un alias de .should()
, on peut enchaîner plusieurs assertions. Ces commandes sont plus lisibles.
cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')
L'exemple ci-dessus est enchaîné avec .should()
indiquant qu'il devrait avoir la classe "active", suivie de .and()
est exécuté contre la même commande. Ceci est très utile lorsque nous voulons affirmer plusieurs commandes.
Affirmation explicite dans Cypress
Le passage d'un sujet explicite dans les assertions relève du type explicite d'assertion Cypress. Ici, nous utiliserons expect
et assert
commandes comme assertion. Les assertions explicites sont utilisées lorsque nous voulons utiliser plusieurs assertions pour le même sujet. Nous utilisons également l'assertion explicite dans Cypress quand on veut faire du custom logique avant de faire l'affirmation.
Nous allons nous pencher sur exemple pour Cypress explicite affirmation
expect(true).to.be.true //vérifie un booléen expect(object).to.equal(object)
Assertion négative de cyprès
Semblable aux assertions positives, il existe des assertions négatives dans Cypress. Nous utiliserons le mot-clé "not" ajouté au préfixe de la déclaration d'assertion. Voyons un exemple d'assertion négative
cy.get('#loading').should('not.be.visible')
L'assertion négative n'est recommandée que dans les cas où l'on vérifie qu'une condition particulière n'est plus disponible après qu'une action spécifique a été exécutée par l'application.
Par exemple, considérons qu'une bascule est cochée et vérifions qu'elle a été supprimée
// au début, l'élément est marqué comme terminé cy.contains('li.todo', 'Write tests') .should('have.class', 'completed') .find('.toggle') .click() / / la classe CSS a été supprimée cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')
Message d'assertion personnalisé Cypress
Avec Cypress, nous pouvons fournir des informations supplémentaires ou un message personnalisé pour les assertions en utilisant une bibliothèque de matchers. Les matchers comprennent de petites fonctions qui différencient les valeurs et renvoient un message d'erreur détaillé. Chai La bibliothèque d'assertions aidera notre code à paraître plus lisible et l'échec du test sera très utile
const expect = require('chai').expect it('checks a number', () => { valeur const = 10 const expect = 3 expect(value).to.equal(expected) })
Meilleures pratiques d'assertion de Cypress
Nous pouvons écrire plusieurs assertions dans un seul bloc en utilisant une chaîne de commandes. Il n'est pas nécessaire d'écrire une seule assertion comme dans les tests unitaires. Beaucoup écrivent des affirmations comme ci-dessous. C'est bien d'écrire de cette manière, mais cela augmente la ligne de code et la redondance.
describe('my form', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'a un attribut de validation', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // affirmer si le #first a un champ obligatoire } ) it('has active class', () => { cy.get('#first').should('have.class', 'active') // affirmer si le #first a une classe active }) it( 'a formaté le prénom', () => { cy.get('#first').should('have.value', 'Ashok') // affirmant si le #first a une première lettre en majuscule }) })
Comme vous le voyez ci-dessus, le même type de sélecteur et d'assertion se répète. Au lieu de cela, nous pouvons enchaîner ces commandes dans une seule assertion qui effectue toutes les vérifications de manière linéaire.
describe('mon formulaire', () => { before(() => { cy.visit('/users/new') }) it('valide et formate le prénom', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .value', 'Ashok') }) })
Comme mentionné ci-dessus, nous pouvons enchaîner le sélecteur unique avec plusieurs assertions ! C'est l'une des meilleures pratiques recommandées pour écrire des assertions dans Cypress.
Pour comprendre le modèle d'objet de page dans Cypress, cliquez sur ici.
Salut… Je m'appelle Aishwarya Lakshmi, j'ai terminé mon B.Tech et j'ai près de 2 ans d'expérience dans le domaine des tests. Je suis un passionné de tests et passionné par les tests et j'aime explorer de nouvelles choses dans mon domaine et les partager avec mes pairs. J'aime écrire des blogs pendant mon temps libre de la manière la plus simple mais efficace. En tant que testeur, j'aime avoir les choses à la perfection, je souhaite donc à mes lecteurs d'avoir une parfaite compréhension de la technologie. Je me tiens au courant des nouvelles technologies liées aux tests et passe du temps à les comprendre. Je suis heureux d'aider les étudiants à comprendre les concepts des tests.
Bonjour cher lecteur,
Nous sommes une petite équipe chez Techiescience, travaillant dur parmi les grands acteurs. Si vous aimez ce que vous voyez, partagez notre contenu sur les réseaux sociaux. Votre soutien fait une grande différence. Merci!