Une assertion est la partie d'un test qui teste vraiment quelque chose. Sans assertions, vous cliquez simplement sur des éléments en espérant que rien ne plante.

Comment fonctionnent les assertions Playwright

Les assertions Playwright utilisent la fonction expect() de @playwright/test. Ce n'est pas le même expect que celui de Jest. La version Playwright est asynchrone et dispose d'une logique de retry intégrée.

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

La différence clé par rapport à la plupart des frameworks : les assertions Playwright réessaient automatiquement. Quand vous écrivez :

await expect(page.getByText('Welcome')).toBeVisible();

Playwright ne vérifie pas une seule fois. Il vérifie à répétition pendant 5 secondes maximum (le expect timeout par défaut), en attendant que la condition devienne vraie. Cela élimine le besoin d'appels manuels à waitFor dans 90 % des cas.

Si la condition ne devient jamais vraie dans le délai imparti, le test échoue avec un message clair indiquant ce qui était attendu et ce qui existait réellement.

Assertions sur les éléments (basées sur les locators)

Ces assertions vérifient les propriétés d'un élément spécifique de la page.

toBeVisible / toBeHidden

// L'élément est rendu et visible pour l'utilisateur
await expect(page.getByText('Dashboard')).toBeVisible();

// L'élément est absent, ou présent mais caché (display:none, visibility:hidden, opacity:0)
await expect(page.getByRole('dialog')).toBeHidden();

toBeHidden() est vrai si l'élément n'existe pas OU s'il existe mais est invisible. Utilisez not.toBeAttached() si vous devez confirmer spécifiquement que l'élément n'est pas dans le DOM.

toHaveText / toContainText

// Correspondance exacte du texte (supprime automatiquement les espaces)
await expect(page.getByRole('heading', { level: 1 })).toHaveText('My Travel Items');

// Correspondance partielle du texte
await expect(page.getByRole('heading')).toContainText('Travel');

// Tableau : vérifier le texte de plusieurs éléments
await expect(page.getByRole('listitem')).toHaveText(['Tokyo', 'Paris', 'London']);

// Regex : correspondance par pattern
await expect(page.getByTestId('price')).toHaveText(/\$\d+\.\d{2}/);

toHaveText avec un tableau correspond au texte complet de chaque élément dans l'ordre. Très utile pour vérifier des lignes de tableau ou des listes triées.

toHaveValue

Pour les éléments ,