blog/playwright-e2e-nextjs

Tests E2E avec Playwright sur Next.js

10 mai 20263 min
PlaywrightE2ETestingNext.jsCI/CD
───

Ce portfolio utilise Playwright pour les tests E2E. Voici pourquoi et comment.

Pourquoi Playwright plutôt que Cypress ?

Playwright est plus rapide, supporte plus de navigateurs (Chromium, Firefox, WebKit), et n'a pas besoin de config spécifique pour le multi-tab ou les iframes. En plus, il tourne en Node.js natif — pas besoin de serveur de test dédié.

Ce que je teste

  • Séquence de boot — vérifier que les animations et le rendu s'exécutent correctement
  • Commandes terminal — chaque commande (ls, cd, cat, help, whoami) a son test
  • Navigation — les liens vers /portfolio, /cv, les pages projets
  • Responsive — tests sur différentes tailles d'écran (mobile-first)

Exemple de test

test("terminal echoes text back", async ({ page }) => {
  await page.goto("/");
  const input = page.locator("input");
  await input.fill("echo hello world");
  await input.press("Enter");
  await expect(page.locator("text=hello world")).toBeVisible();
});

CI/CD intégré

Les tests Playwright tournent automatiquement sur chaque push via GitHub Actions. Un échec = pas de déploiement. Ça évite les régressions silencieuses.