Un test de bout en bout

On installe @playwright/test et un navigateur (npx playwright install chromium). La configuration démarre le serveur de l'API puis construit et sert l'application :


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

// Tests de bout en bout : la vraie application construite, le vrai serveur de l'API,
// un vrai navigateur (Chromium).
export default defineConfig({
  testDir: "e2e",
  use: { baseURL: "http://127.0.0.1:4173" },
  webServer: [
    {
      command: "node ../../../outils/serveur.mjs --port=8000",
      url: "http://127.0.0.1:8000/api/livres",
      reuseExistingServer: true,
    },
    {
      command: "npm run build && npx vite preview --port 4173 --strictPort --host 127.0.0.1",
      cwd: "../librairie",
      url: "http://127.0.0.1:4173",
    },
  ],
});


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

test("ajouter deux livres, ouvrir le panier, recharger", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: /Ajouter au panier.*Le Petit Prince/ }).click();
  await page.getByRole("button", { name: /Ajouter au panier.*Programmation Java/ }).click();

  const lienPanier = page.getByRole("link", { name: "Panier (2)" });
  await expect(lienPanier).toBeVisible();
  await lienPanier.click();

  await expect(page).toHaveURL("/panier");
  await expect(page.getByRole("heading", { level: 1 })).toHaveText("Votre panier");
  await expect(page.getByRole("heading", { level: 1 })).toBeFocused();
  await expect(page.locator(".total")).toContainText("40,50");

  await page.reload();
  await expect(page.locator("tbody tr")).toHaveCount(2);
});


Running 1 test using 1 worker

  ✓  1 e2e/panier.spec.js:3:1 › ajouter deux livres, ouvrir le panier, recharger (744ms)

  1 passed (3.3s)

(Les messages des deux serveurs, que Playwright affiche aussi, sont omis.) Les localisateurs getByRole cherchent les éléments comme une technologie d'assistance : par leur rôle et leur nom accessible. Le nom du bouton d'ajout contient le titre du livre grâce à la partie visuellement cachée du bouton, d'où l'expression régulière. Les vérifications expect(…) de Playwright attendent que la condition devienne vraie (jusqu'à 5 s) : inutile d'attendre la fin d'une navigation à la main.

Énoncé

Corrigé