Playwright mit Next.js einrichten

Playwright ist ein Testframework, mit dem Sie Chromium, Firefox und WebKit mit einer einzelnen API automatisieren können. Sie können es verwenden, um End-to-End (E2E) Tests zu schreiben. Diese Anleitung zeigt Ihnen, wie Sie Playwright mit Next.js einrichten und Ihre ersten Tests schreiben.

Schnellstart

Der schnellste Weg zum Einstieg ist die Verwendung von create-next-app mit dem with-playwright Beispiel. Dies erstellt ein Next.js-Projekt mit bereits konfiguriertem Playwright.

Terminal

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

Manuelle Einrichtung

Um Playwright zu installieren, führen Sie den 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 des Hinzufügens einer playwright.config.ts-Datei. Bitte beziehen Sie sich auf die Playwright-Installationsanleitung für die schrittweise Anleitung.

Ihren ersten Playwright E2E-Test erstellen

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 die Navigation korrekt funktioniert:

tests/example.spec.ts

import { test, expect } from '@playwright/test'
 
test('should navigate to the about page', async ({ page }) => {
  // Beginnen Sie auf der Indexseite (die baseURL wird über den webServer in der playwright.config.ts gesetzt)
  await page.goto('http://localhost:3000/')
  // Suchen Sie ein Element mit dem Text 'About' und klicken Sie darauf
  await page.click('text=About')
  // Die neue URL sollte "/about" sein (baseURL wird verwendet)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // Die neue Seite sollte eine h1 mit "About" enthalten
  await expect(page.locator('h1')).toContainText('About')
})

Hinweis:

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

Ihre Playwright-Tests ausführen

Playwright simuliert einen Benutzer, der Ihre Anwendung mit drei Browsern navigiert: Chromium, Firefox und Webkit, was erfordert, dass Ihr Next.js-Server läuft. Es wird empfohlen, Ihre Tests gegen Ihren Produktionscode auszuführen, um das Verhalten Ihrer Anwendung genauer nachzuahmen.

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.

Hinweis: Alternativ können Sie das webServer-Feature verwenden, um Playwright den Entwicklungsserver starten und warten zu lassen, bis er vollständig verfügbar ist.

Playwright in der kontinuierlichen 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 kontinuierlicher Integration finden Sie in diesen Ressourcen: