Einrichtung von Playwright mit Next.js

Playwright ist ein Test-Framework, mit dem Sie Chromium, Firefox und WebKit über eine einzige API automatisieren können. Sie können es für End-to-End (E2E) Tests verwenden. Diese Anleitung zeigt Ihnen, wie Sie Playwright mit Next.js einrichten und Ihre ersten Tests schreiben.

Schnellstart

Der schnellste Weg, um loszulegen, ist die Verwendung von create-next-app mit dem with-playwright Beispiel. Dadurch wird ein Next.js-Projekt mit bereits konfiguriertem Playwright erstellt.

Terminal

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

Manuelle Einrichtung

Um Playwright zu installieren, führen Sie folgenden Befehl aus:

Terminal

npm init playwright
# oder
yarn create playwright
# oder
pnpm create playwright

Dies führt Sie durch eine Reihe von Eingabeaufforderungen zur Einrichtung und Konfiguration von Playwright für Ihr Projekt, einschließlich der Erstellung einer playwright.config.ts Datei. Weitere Details finden Sie in der Playwright Installationsanleitung.

Erstellen Ihres ersten Playwright E2E-Tests

Erstellen Sie zwei neue Next.js-Seiten:

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}

Fügen Sie dann einen Test hinzu, um zu überprüfen, ob Ihre Navigation korrekt funktioniert:

tests/example.spec.ts

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

test('should navigate to the about page', async ({ page }) => {
  // Starte von der Index-Seite (baseURL wird in der playwright.config.ts via webServer gesetzt)
  await page.goto('http://localhost:3000/')
  // Finde ein Element mit dem Text 'About' und klicke darauf
  await page.click('text=About')
  // Die neue URL sollte "/about" sein (baseURL wird dort verwendet)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // Die neue Seite sollte ein h1-Element mit "About" enthalten
  await expect(page.locator('h1')).toContainText('About')
})

Gut zu wissen: Sie können page.goto("/") anstelle von page.goto("http://localhost:3000/") verwenden, wenn Sie "baseURL": "http://localhost:3000" zur Konfigurationsdatei playwright.config.ts hinzufügen.

Ausführen Ihrer Playwright-Tests

Playwright simuliert einen Benutzer, der Ihre Anwendung in drei Browsern navigiert: Chromium, Firefox und Webkit. Dafür muss Ihr Next.js-Server laufen. Wir empfehlen, Ihre Tests gegen den Produktionscode auszuführen, um das Verhalten Ihrer Anwendung besser nachzubilden.

Führen Sie npm run build und npm run start aus, und dann npx playwright test in einem anderen Terminalfenster, um die Playwright-Tests auszuführen.

Gut zu wissen: Alternativ können Sie die webServer Funktion verwenden, damit Playwright den Entwicklungsserver startet und wartet, bis er vollständig verfügbar ist.

Ausführen von Playwright auf Continuous Integration (CI)

Playwright führt Ihre Tests standardmäßig im Headless-Modus aus. Um alle Playwright-Abhängigkeiten zu installieren, führen Sie npx playwright install-deps aus.

Weitere Informationen zu Playwright und Continuous Integration finden Sie in diesen Ressourcen: