WebdriverIO est une bibliothèque de test open-source pour automatiser les tests fonctionnels des applications web. Elle simplifie le processus de création et d’exécution de tests end-to-end (e2e) en permettant aux développeurs de simuler les interactions utilisateur, telles que la navigation sur des pages et le remplissage de formulaires, dans différents navigateurs web.
Automatisation des tests : WebdriverIO permet d’automatiser les interactions utilisateur pour tester le bon fonctionnement d’une application web, ce qui réduit le temps nécessaire à la validation manuelle et améliore la qualité du logiciel.
Compatibilité multi-navigateurs : Il offre une prise en charge native de plusieurs navigateurs populaires, ce qui permet de tester l’application sur différentes plateformes et configurations.
Intégration avec les frameworks de test : WebdriverIO peut être facilement intégré à des frameworks de test tels que Mocha, Jasmine et Jest, facilitant ainsi l’organisation et l’exécution des tests.
En résumé, WebdriverIO est un outil puissant pour automatiser les tests fonctionnels des applications web, offrant aux développeurs un moyen efficace de garantir la fiabilité et la qualité de leurs logiciels.
Nous allons partir d’un dépôt existant : il s’agit d’une application d’e-commerce développée par mes soins, relativement fonctionnelle bien que simpliste.
- Forkez le dépôt suivant puis clonez votre fork : dépôt sur GitLab.
- Créez immédiatement une branche :
git checkout -b tests-e2e, afin d’éviter de “push” directement surmain(pour faciliter d’éventuelles màj de cette branche depuis mon dépôt).- Lisez le
README.mdà la racine du dépôt (ou plus simplement à l’URL précédente).
La page d’accueil du site officiel comporte un lien Get Started.
Sur cette page, scrollez sous la vidéo d’introduction. Dans la section “Initiate a WebdriverIO Setup”, vous trouvez des commandes pour initialiser WebDriverIO dans le dépôt.
❗️ Assurez-vous que vous êtes bien à la racine du dépôt
fullstack-ecommerce❗️
Prenez la commande pour npm :
npm init wdio@latest .. Même si pnpm
est proposé,
Cela lance un “assistant d’installation” en ligne de commande, qui va vous poser des questions (beaucoup !).
Dans la plupart des cas, on garde simplement les choix par défaut.
Il est à noter que lorsqu’on est invité à choisir un framework de test, ni Jest (utilisé lors du cours sur les tests unitaire et intégration backend), ni Vitest (utilisé pour le cours sur les tests React) ne sont proposés.
On pourra sans problème se rabattre sur Mocha - qui a été
en son temps le framework le plus populaire dans la communauté
JS. Mocha est très proche de Jest et Vitest en termes de
structuration et d’écriture des tests (describe,
it).
npm install →
Y❗️ Faites un
git add .puisgit commit -m"Setup tests with wdio wizard"❗️
Vous pouvez vérifier que les tests d’exemple générés
automatiquement fonctionnent : npm run wdio.
L’assistant de configuration a normalement généré un test :
test/specs/test.e2e.ts, dont voici le contenu
:
import { expect, browser, $ } from "@wdio/globals";
describe("My Login application", () => {
it("should login with valid credentials", async () => {
await browser.url(`https://the-internet.herokuapp.com/login`);
await $("#username").setValue("tomsmith");
await $("#password").setValue("SuperSecretPassword!");
await $('button[type="submit"]').click();
await expect($("#flash")).toBeExisting();
await expect($("#flash")).toHaveTextContaining(
"You logged into a secure area!"
);
});
});Ce test :
Je vous invite à examiner ce fichier, et à :
Les deux apps (front et back) doivent être lancées au préalable.
Il va vous falloir :
test/specs/test.e2e.ts en
test/specs/signup.e2e.ts (on garde l’original
pour l’instant)test/specs/test.e2e.ts,
désactivez le test en ajoutant un x devant
describe → xdescribeVisiter directement l’URL d’inscription : http://localhost:5173/compte/inscription
Remplir les 3 champs nom, e-mail et mot de passe, mais attention :
email
: const email = 'prenom.nom' + Date.now();setValue pour
le champ e-mail.Soumettre le formulaire
Changer les “assertions”
const element = await $('.my-class');const elementText = await element.getText();expect(elementText).toContain("Valeur attendue");Se déconnecter après
Créer un nouveau test
test/specs/signin.e2e.ts.
C’est la même chose, mais cette fois pour le formulaire de connexion.
Créer un nouveau test
test/specs/cart.e2e.ts.
En l’état actuel, un bug de l’app empêche d’ajouter des items au panier sans être connecté.
Pour y remédier, temporairement, copiez-collez le
code de création d’un compte du test
signup.e2e.ts (sans les insertions).
L’idée est de :
Créer un nouveau test
test/specs/order.e2e.ts.
L’idée est de :
Créer un nouveau test
test/specs/products-sort-order.e2e.ts.