.png){kind=logo}
Ce article montre l'automatisation d'un cas de test avec cypress.
Création d'une commande
Avec cypress, il faut commencer par déclarer la nouvelle commande et ensuite coder la commande avec les actions proposées par cypress (click, trigger(mouseouver),...).
Les exemples sont faits en langage Typescript.
Pour déclarer une nouvelle commande dans cypress, aller dans le dossier /cypress/support et ouvrir le fichier commands.ts :
Pour commencer, il faut déclarer l’interface chainable ainsi que le namespace Cypress comme ceci :
declare namespace Cypress {
interface Chainable {
}
}Dans le paragraphe interface Chainable, déclarer la commande ce qui donne pour la commande "choix catégorie women top jackets" :
choix_categorie_women_tops_jackets(): Chainable<JQuery<HTMLElement>>Pour coder les actions de la commande, commencer par créer la commande par l’instruction Cypress.Commands.add :
Cypress.Commands.add('choix_categorie_women_tops_jackets', ()et ensuite coder les actions de l’étape. Au niveau du codage de la commande, chaque commande cypress comprend une partie de localisation de l’élément par la fonction get avec une propriété de localisation (ex:class) puis choisir l’action (ex:click).
Pour faire le "hover sur women", cela donne :
cy.get("[class='level-top ui-corner-all']").contains('Women').trigger('mouseover')Pour faire le "hover sur top", cela donne :
cy.get("[class='ui-corner-all']").contains('Tops').trigger('mouseover')Pour faire le click sur "Jackets", cela donne :
cy.get("[class='ui-corner-all']").contains('Jackets').click()Voici la commande "choix catégorie women top jackets" complète :
Création d'un cas de test
Ce chapitre montre la création d’un cas de test avec Cypress. Il faut commencer par créer un cas de test et ensuite appeler les commandes voulues.
Aller dans le dossier /cypress/e2e et ouvrir le fichier exempleParcours.cy.ts :
Il faut d’abord importer it de la librairie mocha :
import { it } from "mocha"Une fois que it est importé, commencer à créer le cas de test :
it('Retirer article du panier', () => {
}Ensuite ajouter une commande cypress pour accéder au site web voulu :
cy.visit('https://magento.softwaretestingboard.com/')Et ensuite appeler les commandes :
cy.choix_categorie_women_tops_jackets();Celà donne ce cas de test :
Création d'une commande avec variable
La deuxième étape du parcours est de cliquer sur l'article "Juno Jacket". Il nous faut donc créer une deuxième commande "cliquer_sur_article_Juno_Jacket".
Il faut retourner dans le fichier commands.ts, et créer une nouvelle commande :
cliquer_sur_article_Juno_Jacket(): Chainable<JQuery<HTMLElement>>Il reste ensuite à coder la commande. On commence par l'instruction cypress.commands.add :
Cypress.Commands.add('cliquer_sur_article_Juno_Jacket', () => {
})et ensuite pour effectuer le click sur "juno jacket", localiser l'élément avec cy.get() et cliquer sur l ‘élément avec le click() :
cy.get("[class='product-item-info']").contains("Juno Jacket").click()On peut variabiliser l’article "Juno Jacket". Dans le commands.ts, ajouter un paramètre à la commande :
cliquer_sur_Jacket(nomArticle: string): Chainable<JQuery<HTMLElement>>Ajouter un paramètre entre parenthèse :
Cypress.Commands.add('cliquer_sur_Jacket', (nomArticle) => {
})et sur l’action, ajouter le paramètre :
cy.get("[class='product-item-info']").contains(nomArticle).click()La commande après variabilisation :
Créer un fichier variable.json dans le dossier fixture. Ce fichier contiendra les variables :
Ouvrir votre fichier et définir la variable :
Une fois la variable créée, modifier le cas de test pour qu’il utilise la variable. Il faut d’abord importer le fichier de variables :
import variable from "../fixtures/variable.json"Ensuite, il faut déclarer l'accès aux variables :
cy.fixture('variable');et modifier l’appel de la commande pour y intégrer la variable :
cy.cliquer_sur_Jacket(variable["Women Jacket 1"]);Le cas de test variabilisé :
Exécuter le cas de test
Lancer cypress et selectionner "E2E testing":
Sélectionner chrome :
Pour lancer le test, cliquer sur le cas de test ExempleParcours:
