README.md

Tests end-to-end

Afin de vérifier le bon comportement de la plateforme dans son ensemble, du point de vue de l'utilisateur, l'équipe développe et maintient des tests bout-en-bout (a.k.a. tests end-to-end ou "e2e").

Ceux-ci sont intégrés au pipeline CI/CD du projet (cf. fichiers GitHub Actions ./github/workflows/*.yml).

Technologies

Les tests e2e sont développés et mis en œuvre grâce aux technologies CodeceptJS et Playwright.

CodeceptJS est un framework de test UI full-stack qui se veut agnostique des technologies sous-jacentes (Playwright, WebDriver, Puppeteer, TestCafe, Protractor, Appium). Nous l'utilisons comme runner et orchestrateur des tests e2e. CodeceptJS peut être exécuté en mode ligne de commande (CLI) ou via une interface graphique (CodeceptUI).

Playwright est une bibliothèque Node.js permettant d'automatiser et valider des traitements sur différents navigateurs (Chromium, Firefow, Safari, Electron) via une API exploitant le protocole DevTools.

Les tests e2e sont écrits au format Gherkin en francais grâce à la directive #language: fr, à renseigner dans chaque fichier de test.

Scénario:
  Soit un utilisateur sur la page d'accueil
  Alors je vois "La nouvelle version du Carnet de bord est en ligne"
  Alors le lien "Accéder à mon compte" pointe sur "/auth/login"

💡 Pour que CodeceptJS supporte le français, des équivalences de termes sont définies dans le fichier step_definitions/fr.js.

Usage

⚠️ Vous devez au préalable avoir une plateforme opérationnelle (cf. Installation), notamment la partie API backend.

Pour lancer les tests e2e sur sa machine :

cd e2e
npm ci && npm test

Par défaut, les tests se lancent en mode headless mais on peut aussi les lancer avec l'interface de Codecept - CodeceptUI - grâce à la commande :

npm run test:ui

Écrire un test

Pour l'exemple, nous allons écrire le test pour un konami code

1. Créer le fichier konami-code.feature
2. Ecrire le test
3. lancer npm run codeceptjs gherkin:snippets
4. Implementer les snippets manquants
5. Lancer les test.

Les snippets se trouvent dans le fichier steps.js

Howto

Vocabulaire

• La situation initiale commence par Soit
• Les actions commencent par Quand
• Les assertions commencent par Alors

Le vocabulaire existant est disponible dans le fichier vocabulaire.feature et dans les step_definitions

Lancer un test en mode debug

$ npm run test --steps --verbose --grep "@home" -p pauseOnFail

Mettre une pause dans le test

@my_test
Fonctionnalité: Mon test

  Scénario:
    Soit un navigateur web sur le site
    Quand je pause le test # il faut insérer toute la phrase telle quelle
    Alors je vois "foo"

Liens

• xpath cheatsheet