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 Prompts, um Playwright für Ihr Projekt einzurichten und zu konfigurieren, einschließlich der Erstellung einer playwright.config.ts-Datei. Weitere Details finden Sie in der Playwright-Installationsanleitung.

Ihren ersten Playwright E2E-Test erstellen

Erstellen Sie zwei neue Next.js-Seiten:

pages/index.ts

import Link from 'next/link'

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

pages/about.ts

import Link from 'next/link'

export default function About() {
  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 über webServer in playwright.config.ts 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.

Ihre Playwright-Tests ausführen

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, dann führen Sie in einem anderen Terminalfenster npx playwright test aus, um die Playwright-Tests zu starten.

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.

Playwright auf Continuous Integration (CI) ausführen

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: