Assertions Playwright

Ce chapitre présente de manière complète le système d'assertions de Playwright, y compris les assertions avec réessai automatique, les assertions générales et l'utilisation des assertions souples.

Qu'est-ce qu'une assertion ?

Une assertion sert à vérifier si le résultat attendu d'un test correspond au résultat réel.

Playwright fournit deux ensembles d'assertions :les assertions générales(de Jest) etles assertions avec réessai automatique(propres à Playwright).

Assertions avec réessai automatique vs assertions générales

Assertions avec réessai automatique (matchers asynchrones)

Les assertions spécifiques au Web de Playwright réessayent automatiquement jusqu'à ce que la condition soit remplie ou qu'un délai d'attente se produise, et doivent utiliserawait。

Exemple

// Assertion avec réessai automatique — attend que la condition soit remplie
await expect(page.getByText('EXAMPLE')).toBeVisible();

Assertions générales

Utilisées pour les comparaisons de valeurs non spécifiques au Web ; ne réessaient pas automatiquement.

Exemple

// Assertion générale — s'exécute immédiatement, n'attend pas
expect(1 + 1).toBe(2);
expect('hello').toContain('ell');
expect(true).toBeTruthy();
TypeRéessai automatique ?await requis ?Scénario d'application
Assertions avec réessai automatiqueOuiRequisawaitContenu spécifique au Web tel que les éléments de page, l'URL, le titre, etc.
Assertions généralesnonNon requisValeurs JavaScript telles que les variables ordinaires, les tableaux, les objets, etc.

Assertions au niveau de la page

Exemple

// Assertion sur le titre de la page
await expect(page).toHaveTitle('Ce que nous apprenons n'est pas seulement la technologie, mais aussi les rêves!');
await expect(page).toHaveTitle(/EXAMPLE/);

// Assertion sur l'URL de la page
await expect(page).toHaveURL('https://www.example.com/');
await expect(page).toHaveURL(/example\.com/);

Assertions de visibilité

Exemple

const btn = page.getByRole('button', { name: 'Submit' });

// L'élément est visible
await expect(btn).toBeVisible();

// L'élément n'est pas visible
await expect(btn).toBeHidden();

// L'élément existe dans le DOM (mais n'est pas nécessairement visible)
await expect(btn).toBeAttached();

// L'élément est visible dans la fenêtre d'affichage
await expect(btn).toBeInViewport();

Assertions sur le texte et la valeur

Exemple

const heading = page.getByRole('heading', { name: 'EXEMPLE' });

// Le contenu textuel de l'élément correspond exactement
await expect(heading).toHaveText('Pas seulement la technologie, mais aussi les rêves !');

// Le contenu textuel de l'élément contient une sous-chaîne
await expect(heading).toContainText('technologie');

// Valeur actuelle du champ de saisie
await expect(page.getByLabel('nom d'utilisateur')).toHaveValue('example_user');

// Le contenu de l'élément est vide
await expect(page.getByTestId('error-msg')).toBeEmpty();

Assertions d'état

Exemple

const checkbox = page.getByLabel('Accepter les conditions');
const input = page.getByLabel('email');

// L'élément est activé
await expect(input).toBeEnabled();

// L'élément est désactivé
await expect(input).toBeDisabled();

// L'élément est modifiable
await expect(input).toBeEditable();

// La case à cocher est cochée
await expect(checkbox).toBeChecked();

// L'élément a le focus
await expect(input).toBeFocused();

Assertions d'attributs

Exemple

const element = page.locator('.example-logo');

// Assertion d'attribut DOM
await expect(element).toHaveAttribute('src', '/static/images/logo.png');

// Vérifie uniquement que l'attribut existe
await expect(element).toHaveAttribute('alt');

// Assertion sur le nom de classe CSS
await expect(element).toHaveClass('logo-primary');

// Assertion sur la valeur de la propriété CSS
await expect(element).toHaveCSS('display', 'block');

// Assertion sur l'ID de l'élément
await expect(element).toHaveId('main-logo');

// Nom accessible
await expect(page.getByRole('button')).toHaveAccessibleName('Submit');

Assertions de comptage

Exemple

// Nombre d'éléments correspondants
const items = page.getByRole('listitem');
await expect(items).toHaveCount(5);

// Utilisé avec filter
const activeItems = page.getByRole('listitem').filter({ hasText: 'Activated' });
await expect(activeItems).toHaveCount(3);

Référence rapide des assertions générales

MéthodeDescriptionExemple
toBe(value)Égalité stricte (===)expect(x).toBe(42)
toEqual(value)Égalité profondeexpect(obj).toEqual({ a: 1 })
toContain(item)Tableau/chaîne contientexpect(arr).toContain('a')
toBeTruthy()La valeur est truthyexpect(x).toBeTruthy()
toBeFalsy()La valeur est falsyexpect(x).toBeFalsy()
toBeNull()La valeur est nullexpect(x).toBeNull()
toBeGreaterThan(n)Supérieur à nexpect(x).toBeGreaterThan(10)
toBeLessThan(n)Inférieur à nexpect(x).toBeLessThan(100)
toHaveLength(n)Longueur du tableauexpect(arr).toHaveLength(3)

expect.soft() Assertions souples

Les assertions ordinaires interrompent le test immédiatement après un échec.

Assertions souplesNe s'arrêtent pas après un échec ; elles continuent d'exécuter le code suivant et rapportent tous les échecs uniformément à la fin du test.

Exemple

test('Vérifications multiples dans la validation de formulaire', async ({ page }) => {
  await page.goto('https://example.com/form');

  // Assertion souple — un échec n'arrête pas le test
  await expect.soft(page.getByLabel('username')).toBeVisible();
  await expect.soft(page.getByLabel('password')).toBeVisible();
  await expect.soft(page.getByLabel('email')).toBeVisible();
  await expect.soft(page.getByRole('button', { name: 'Register' })).toBeEnabled();

  // Si l'une des assertions ci-dessus échoue, la vérification se poursuit et tous les échecs sont signalés à la fin.
});

À utiliser lors du test de pages de formulaireexpect.soft()Vous pouvez découvrir tous les champs manquants d'un coup, sans avoir à les corriger un par un avant de voir le problème suivant. Cela améliore considérablement l'efficacité du débogage.

Délai d'expiration de l'assertion

Les assertions à réessai automatique ont un délai d'expiration par défaut de 5 secondes, qui peut être personnalisé dans le fichier de configuration ou pour une seule assertion :

Exemple

// Définir le délai d'expiration pour une seule assertion (millisecondes)
await expect(page.getByText('Loading...')).toBeHidden({ timeout: 10000 });

// Défini globalement dans le fichier de configuration
// playwright.config.ts:
// export default defineConfig({
// expect: { timeout: 10000 },
// });
Autres extensions