Comment configurer Playwright avec Next.js

Playwright est un framework de test qui vous permet d'automatiser Chromium, Firefox et WebKit avec une seule API. Vous pouvez l'utiliser pour écrire des tests de bout en bout (E2E). Ce guide vous montrera comment configurer Playwright avec Next.js et écrire vos premiers tests.

Démarrage rapide

Le moyen le plus rapide de commencer est d'utiliser create-next-app avec l'exemple with-playwright. Cela créera un projet Next.js avec Playwright déjà configuré.

Terminal

npx create-next-app@latest --example with-playwright with-playwright-app

Configuration manuelle

Pour installer Playwright, exécutez la commande suivante :

Terminal

npm init playwright
# ou
yarn create playwright
# ou
pnpm create playwright

Cela vous guidera à travers une série d'étapes pour configurer Playwright pour votre projet, y compris l'ajout d'un fichier playwright.config.ts. Consultez le guide d'installation de Playwright pour un guide étape par étape.

Création de votre premier test E2E avec Playwright

Créez deux nouvelles pages Next.js :

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Accueil</h1>
      <Link href="/about">À propos</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>À propos</h1>
      <Link href="/">Accueil</Link>
    </div>
  )
}

Ensuite, ajoutez un test pour vérifier que votre navigation fonctionne correctement :

tests/example.spec.ts

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

test('devrait naviguer vers la page À propos', async ({ page }) => {
  // Commencer à partir de la page d'accueil (baseURL est défini via webServer dans playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Trouver un élément avec le texte 'À propos' et cliquer dessus
  await page.click('text=À propos')
  // La nouvelle URL devrait être "/about" (baseURL est utilisé ici)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // La nouvelle page devrait contenir un h1 avec "À propos"
  await expect(page.locator('h1')).toContainText('À propos')
})

Bon à savoir : Vous pouvez utiliser page.goto("/") au lieu de page.goto("http://localhost:3000/"), si vous ajoutez "baseURL": "http://localhost:3000" au fichier de configuration playwright.config.ts.

Exécution de vos tests Playwright

Playwright simulera un utilisateur naviguant dans votre application en utilisant trois navigateurs : Chromium, Firefox et Webkit. Cela nécessite que votre serveur Next.js soit en cours d'exécution. Nous recommandons d'exécuter vos tests sur votre code de production pour mieux refléter le comportement de votre application.

Exécutez npm run build et npm run start, puis lancez npx playwright test dans une autre fenêtre de terminal pour exécuter les tests Playwright.

Bon à savoir : Alternativement, vous pouvez utiliser la fonctionnalité webServer pour que Playwright démarre le serveur de développement et attende qu'il soit totalement disponible.

Exécution de Playwright en Intégration Continue (CI)

Par défaut, Playwright exécutera vos tests en mode headless. Pour installer toutes les dépendances de Playwright, exécutez npx playwright install-deps.

Vous pouvez en apprendre plus sur Playwright et l'Intégration Continue grâce à ces ressources :