Retour au blog

TypeScript pour Playwright : les bases essentielles pour un QA

Pas besoin de devenir developpeur. Voici le sous-ensemble de TypeScript reellement utilise dans une suite de tests Playwright, avec des exemples issus de vrais projets.

Premiere question posee dans presque toutes mes sessions de formation Playwright : "faut-il savoir coder pour automatiser ?" Reponse honnete : oui, mais beaucoup moins que ce que tu imagines. Une suite de tests Playwright utilise environ 15 % de TypeScript.

Voici ce sous-ensemble, dans l'ordre d'utilite.

1. Les types de base

TypeScript ajoute des types a JavaScript. En tests, cela evite des heures de debug sur des donnees mal formees.

const email: string = 'demo@exemple.fr';
const tentatives: number = 3;
const estAdmin: boolean = false;
const tags: string[] = ['smoke', 'regression'];

Dans la pratique, on ecrit rarement les types explicitement : TypeScript les deduit. On les ecrit la ou ils documentent une intention.

2. interface et type : decrire tes donnees de test

C'est l'outil le plus rentable pour un QA. Une interface decrit la forme d'un objet.

interface Utilisateur {
  email: string;
  motDePasse: string;
  role: 'admin' | 'client';
}

const clientStandard: Utilisateur = {
  email: 'client@exemple.fr',
  motDePasse: 'secret',
  role: 'client',
};

Le type 'admin' | 'client' est une union : toute autre valeur declenche une erreur avant l'execution du test.

3. async / await : la cle de Playwright

Toutes les actions Playwright sont asynchrones. Oublier un await est la premiere cause de tests instables chez les debutants.

// Faux : le test continue sans attendre le clic
page.getByRole('button', { name: 'Valider' }).click();

// Correct
await page.getByRole('button', { name: 'Valider' }).click();

Regle simple : si la ligne touche page, expect ou request, elle commence par await.

4. Fonctions et parametres

Les fonctions servent a factoriser les etapes repetees.

async function seConnecter(page: Page, user: Utilisateur) {
  await page.goto('/login');
  await page.getByLabel('Email').fill(user.email);
  await page.getByLabel('Mot de passe').fill(user.motDePasse);
  await page.getByRole('button', { name: 'Se connecter' }).click();
}

Note le type Page importe de @playwright/test : c'est ainsi que l'autocompletion de ton editeur devient utile.

5. Methodes de tableaux pour les tests parametres

const roles: Utilisateur['role'][] = ['admin', 'client'];

for (const role of roles) {
  test(`le menu s'adapte au role ${role}`, async ({ page }) => {
    // ...
  });
}

map, filter et find suffisent pour 95 % des besoins en preparation de donnees.

6. Import / export : organiser ses fichiers

// fixtures/utilisateurs.ts
export const admin: Utilisateur = { email: 'admin@exemple.fr', motDePasse: 'secret', role: 'admin' };

// tests/connexion.spec.ts
import { admin } from '../fixtures/utilisateurs';

C'est la base d'une architecture propre, prealable au Page Object Model.

7. Types optionnels et valeurs nulles

interface Commande {
  reference: string;
  remise?: number; // optionnel
}

const total = commande.remise ?? 0;

L'operateur ?? evite les fameux undefined qui font echouer un test pour une mauvaise raison.

Ce que tu peux ignorer au debut

• generiques avances
• decorateurs
• classes abstraites et heritage complexe
• configuration fine de tsconfig.json

Tu y viendras plus tard, si le projet l'exige.

Un plan de travail sur deux semaines

Deux semaines suffisent, c'est d'ailleurs la duree consacree a TypeScript dans le plan de formation Playwright en 12 semaines.

Etape suivante

Une fois ces bases acquises, enchaine sur tes premiers tests Playwright puis sur l'execution en CI/CD.

Et si tu veux etre relu sur du vrai code plutot que d'avancer seul, regarde le programme d'accompagnement sur la page d'accueil.