Tests E2E TypeScript : Guide complet pour développeur

Votre application fonctionne-t-elle ? Prouvez-le avec des tests E2E en TypeScript

Avez-vous déjà entendu la phrase : « Tout fonctionne, nous avons testé manuellement » ? Et le lendemain, la production plante ? Cela vous dit quelque chose, n'est-ce pas ? Les tests manuels, c'est comme lire dans le marc de café. Vous ne savez jamais si vous allez cliquer sur ce bouton qui cassera tout le parcours utilisateur.

Les tests E2E (End-to-End) en TypeScript sont votre ingénieur QA numérique, qui ne dort pas, ne boit pas de café et vérifie chaque bouton 24h/24 et 7j/7. Dans cet article, nous ne nous contenterons pas de vous expliquer ce que sont les tests E2E. Nous les écrirons ensemble : de l'installation au pipeline CI/CD de production. Attachez vos ceintures, ça va chauffer et être utile !

Pourquoi TypeScript pour les tests E2E ?

On pourrait penser que les tests E2E peuvent être écrits avec n'importe quoi : JavaScript, Python, voire Java (mais n'en parlons pas). Cependant, TypeScript vous donne un super-pouvoir : le typage statique. Vous ne rencontrerez plus d'erreurs comme Cannot read property 'click' of undefined à l'exécution. Votre IDE mettra en évidence l'erreur avant même le lancement du test.

De plus, si votre application est écrite en TypeScript (ce que font 90% des équipes aujourd'hui), il est logique d'écrire les tests dans le même langage. Vous utilisez les mêmes types, les mêmes interfaces, les mêmes utilitaires. Cela réduit la charge cognitive et accélère le développement.

Choisir l'outil : Playwright vs Cypress

Le marché des outils E2E pour TypeScript est restreint, mais deux leaders se démarquent : Cypress et Playwright. Nous utiliserons Playwright. Pourquoi ?

• Multi-navigateur natif : Chromium, Firefox, WebKit (Safari). Cypress ne gère pas encore correctement Safari.
• Vitesse : Playwright fonctionne via le protocole DevTools, et non via un serveur proxy, ce qui rend les tests plus rapides.
• Gestion des iframes et des onglets : Playwright n'impose aucune limitation pour travailler avec plusieurs onglets ou des iframes cross-domaine.
• TypeScript first : Playwright est écrit en TypeScript et le prend entièrement en charge.

Mais si vous êtes débutant, Cypress peut être plus simple pour commencer. Le choix vous appartient. Nous, nous partons au combat avec Playwright.

Installation et configuration du projet

Créons un nouveau projet et installons Playwright. Ouvrez un terminal et exécutez :

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

La dernière commande téléchargera les navigateurs (Chromium, Firefox, WebKit). Cela prendra quelques minutes – allez chercher un café.

Créons un fichier playwright.config.ts à la racine du projet :

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

Nous avons configuré l'URL de base (remplacez-la par l'adresse de votre application), activé la trace pour le débogage et spécifié que les tests se trouveront dans le dossier tests.

Écrire notre premier test E2E en TypeScript

Créez un dossier tests et un fichier login.spec.ts. Supposons que nous ayons un formulaire de connexion simple.

import { test, expect } from '@playwright/test';

test.describe('Authentification utilisateur', () => {  test('Connexion réussie avec des données valides', async ({ page }) => {    // Étape 1 : Ouvrir la page de connexion    await page.goto('/login');

    // Étape 2 : Remplir les champs    await page.getByLabel('Email').fill('user@example.com');    await page.getByLabel('Mot de passe').fill('securepassword123');

    // Étape 3 : Cliquer sur le bouton "Se connecter"    await page.getByRole('button', { name: 'Se connecter' }).click();

    // Étape 4 : Attendre la redirection vers le tableau de bord    awai