top of page
Rechercher
  • Photo du rédacteurgilles

cypress

Dernière mise à jour : 18 juin 2023

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 :


commande cypress
commande cypress

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 :

cas de test cypress
cas de test cypress

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 :

fichier de variables
fichier de variables

Ouvrir votre fichier et définir la variable :

fichier de variables
fichier de variables

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é :

cas de test variabilise
cas de test variabilise

Exécuter le cas de test

Lancer cypress et selectionner "E2E testing":

lancer cypress
lancer cypress

Sélectionner chrome :

selection du nabigateur
selection du navigateur

Pour lancer le test, cliquer sur le cas de test ExempleParcours:

executer un cas de test dans cypress
executer un cas de test dans cypress

Installation et téléchargement des exemples














6 vues
bottom of page