Back

Erste Schritte mit UI-Tests in Playwright

Erste Schritte mit UI-Tests in Playwright

UI-Tests sind ein kritischer Bestandteil der Frontend-Entwicklung und stellen sicher, dass Ihre Webanwendungen aus Benutzersicht korrekt funktionieren. Playwright, Microsofts Open-Source-Automatisierungsframework, hat sich als leistungsstarkes Tool für UI-Tests etabliert, das sowohl entwicklerfreundlich als auch robust ist. Falls Sie bereits von Playwright gehört haben, es aber noch nicht ausprobiert haben, zeigt Ihnen dieser Leitfaden, wie es funktioniert und ob es in Ihren aktuellen Workflow passt.

Wichtige Erkenntnisse

  • Playwright bietet browserübergreifende Tests mit einer einzigen API für Chrome, Firefox und Safari
  • Auto-Waiting und isolierte Testumgebungen reduzieren instabile Tests
  • Integrierte Debugging-Tools wie Inspector und Trace Viewer vereinfachen die Fehlerbehebung
  • Unterstützt Responsive-Design-Tests, visuelle Vergleiche und Komponententests
  • Lässt sich einfach in CI/CD-Pipelines für automatisierte Tests integrieren

Was ist Playwright und warum sollten Sie es für UI-Tests verwenden?

Playwright ist ein End-to-End-Testing-Framework, das es Ihnen ermöglicht, Tests zu schreiben, die in allen modernen Browsern (Chrome, Firefox, Safari) mit einer einzigen API laufen. Im Gegensatz zu anderen Testing-Tools wurde Playwright speziell für moderne Webanwendungen entwickelt und bietet Funktionen, die UI-Tests zuverlässiger und weniger instabil machen.

Wichtige Vorteile für UI-Tests sind:

  • Auto-Waiting: Playwright wartet automatisch, bis Elemente aktionsfähig sind, bevor Operationen ausgeführt werden
  • Isolation: Jeder Test läuft in einem frischen Browser-Kontext und verhindert Testinterferenzen
  • Browserübergreifende Unterstützung: Einmal schreiben, überall testen mit demselben Code
  • Moderne Web-Funktionen: Behandelt Shadow DOM, iframes und moderne Web-Komponenten
  • Leistungsstarke Tools: Integrierte Debugging-Tools wie Playwright Inspector und Trace Viewer

Playwright für UI-Tests einrichten

Der Einstieg in Playwright ist unkompliziert. Sie benötigen Node.js, dann können Sie ein neues Projekt einrichten:

# Create a new directory for your project
mkdir playwright-ui-testing
cd playwright-ui-testing

# Initialize a new Playwright project
npm init playwright@latest

Während der Einrichtung werden Ihnen einige Fragen gestellt. Für UI-Tests können Sie TypeScript auswählen, GitHub Actions Workflow hinzufügen und Browser installieren, wenn Sie dazu aufgefordert werden.

Die Installation erstellt eine grundlegende Projektstruktur mit:

  • playwright.config.ts: Konfigurationsdatei für Ihre Tests
  • tests Verzeichnis: Hier werden Ihre Testdateien gespeichert
  • .github Verzeichnis: CI-Konfiguration, falls Sie GitHub Actions ausgewählt haben

Ihren ersten UI-Test schreiben

Schreiben wir einen einfachen UI-Test, der überprüft, ob eine Produktkarte auf einer E-Commerce-Website korrekt angezeigt wird. Erstellen Sie eine neue Datei namens product-ui.spec.ts im tests Verzeichnis:

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

test('product card displays correctly', async ({ page }) => {
  // Navigate to the page
  await page.goto('https://demo-store.playwright.dev');
  
  // Find a product card
  const productCard = page.locator('.product-card').first();
  
  // Verify the product card is visible
  await expect(productCard).toBeVisible();
  
  // Verify it contains expected elements
  await expect(productCard.locator('.product-title')).toBeVisible();
  await expect(productCard.locator('.product-price')).toBeVisible();
  await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
  
  // Extract and verify product information
  const title = await productCard.locator('.product-title').textContent();
  console.log(`Found product: ${title}`);
});

Dieser Test:

  1. Öffnet eine Demo-Store-Website
  2. Lokalisiert eine Produktkarte
  3. Überprüft, dass wichtige Elemente sichtbar und aktiviert sind
  4. Extrahiert den Produkttitel (zeigt, wie Sie Informationen extrahieren können)

UI-Tests ausführen

Um Ihren Test auszuführen, verwenden Sie die Playwright CLI:

npx playwright test product-ui.spec.ts

Standardmäßig führt Playwright Tests im Headless-Modus aus. Um den Browser in Aktion zu sehen:

npx playwright test product-ui.spec.ts --headed

Um Tests in einem bestimmten Browser auszuführen:

npx playwright test product-ui.spec.ts --project=chromium

Erweiterte UI-Tests mit Playwright

Responsive Designs testen

Playwright macht es einfach, Ihre UI über verschiedene Bildschirmgrößen hinweg zu testen:

test('product card is responsive', async ({ page }) => {
  // Test on mobile viewport
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://demo-store.playwright.dev');
  
  // Verify mobile layout
  await expect(page.locator('.mobile-menu-button')).toBeVisible();
  
  // Test on desktop viewport
  await page.setViewportSize({ width: 1280, height: 800 });
  
  // Verify desktop layout
  await expect(page.locator('.desktop-navigation')).toBeVisible();
});

Visuelle Tests

Playwright unterstützt visuelle Vergleiche, um unerwartete UI-Änderungen zu erkennen:

test('product page visual test', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev/product/1');
  
  // Compare screenshot with baseline
  await expect(page).toHaveScreenshot('product-page.png');
});

Beim ersten Ausführen dieses Tests wird ein Basis-Screenshot erstellt. Bei nachfolgenden Ausführungen wird der aktuelle Zustand mit der Baseline verglichen.

Dynamische UI-Elemente testen

Moderne Web-Apps haben oft dynamische UI-Elemente. Playwright behandelt diese gut:

test('add product to cart updates counter', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev');
  
  // Get initial cart count
  const cartCount = page.locator('.cart-count');
  await expect(cartCount).toHaveText('0');
  
  // Add product to cart
  await page.locator('.product-card button.add-to-cart').first().click();
  
  // Verify cart count updates
  await expect(cartCount).toHaveText('1');
});

UI-Tests debuggen

Wenn Tests fehlschlagen, bietet Playwright leistungsstarke Debugging-Tools:

Playwright Inspector

Starten Sie den visuellen Inspector, um Ihre Tests zu debuggen:

PWDEBUG=1 npx playwright test product-ui.spec.ts

Der Inspector ermöglicht es Ihnen:

  • Schrittweise durch die Testausführung zu gehen
  • Das DOM zu inspizieren
  • Konsolen-Logs anzuzeigen
  • Netzwerkanfragen zu erkunden

Trace Viewer

Traces zeichnen detaillierte Informationen über die Testausführung auf:

// In your playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry', // Record traces on first retry of failed tests
  },
});

Nach einem fehlgeschlagenen Test können Sie die Trace anzeigen:

npx playwright show-trace test-results/product-ui-test-chromium/trace.zip

Der Trace Viewer zeigt:

  • Screenshots bei jedem Schritt
  • DOM-Snapshots
  • Netzwerkaktivität
  • Konsolen-Logs

Playwright UI-Tests in Ihren Workflow integrieren

Tests in CI ausführen

Playwright funktioniert gut mit CI-Systemen. Für GitHub Actions erstellt der Setup-Assistent eine Workflow-Datei, die Ihre Tests bei Push und Pull Requests ausführt.

Für andere CI-Systeme können Sie das Playwright Docker Image verwenden:

# Example for GitLab CI
test:
  image: mcr.microsoft.com/playwright:v1.40.0-focal
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 1 week

Komponententests

Über Seitenebenen-Tests hinaus unterstützt Playwright auch Komponententests für Frameworks wie React, Vue und Svelte:

// Example for React component testing
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';

test('ProductCard renders correctly', async ({ mount }) => {
  const component = await mount(
    <ProductCard 
      title="Test Product" 
      price="$19.99" 
      image="/test-image.jpg" 
    />
  );
  
  await expect(component).toContainText('Test Product');
  await expect(component).toContainText('$19.99');
  await expect(component.locator('button')).toBeEnabled();
});

Häufig gestellte Fragen

Playwright bietet browserübergreifende Unterstützung von Haus aus und behandelt mehrere Tabs und Fenster, womit Cypress Schwierigkeiten hat. Playwright hat auch tendenziell weniger Einschränkungen beim domainübergreifenden Testen. Cypress hat jedoch ein ausgereifteres Ökosystem und eine benutzerfreundlichere Test-Runner-Oberfläche.

Nein. Playwright ist für End-to-End- und Integrationstests konzipiert. Unit-Tests mit Frameworks wie Jest sind weiterhin wertvoll für das Testen einzelner Funktionen und Komponenten in Isolation.

Playwright ermöglicht es Ihnen, den Authentifizierungsstatus zu speichern und über Tests hinweg wiederzuverwenden. Starten Sie zunächst einen Browser, navigieren Sie zur Login-Seite und führen Sie die Login-Schritte durch, indem Sie die Benutzername- und Passwort-Felder ausfüllen und das Formular absenden. Nach dem Login speichern Sie den Speicherstatus des Browsers in einer Datei, die die Authentifizierungsdaten enthält. In Ihren eigentlichen Tests können Sie Playwright so konfigurieren, dass es diesen gespeicherten Authentifizierungsstatus verwendet, sodass Sie sich nicht vor jedem Test anmelden müssen. Dieser Ansatz beschleunigt Ihre Testläufe und gewährleistet Konsistenz über Sessions hinweg.

Ja, Playwright hat integrierte Screenshot-Vergleichsfunktionen. Für erweiterte visuelle Tests können Sie sich mit spezialisierten Tools wie Percy oder Applitools integrieren.

Sie können Ihre Playwright UI-Tests beschleunigen, indem Sie sie parallel ausführen, was standardmäßig aktiviert ist. Beim Entwickeln verwenden Sie das --project Flag, um Tests nur auf bestimmten Browsern auszuführen. Die Wiederverwendung des Authentifizierungsstatus anstatt sich bei jedem Test anzumelden reduziert ebenfalls die Ausführungszeit. Zusätzlich bieten Komponententests schnelleres Feedback für einzelne UI-Komponenten.

Fazit

Durch die Integration von Playwright in Ihre Testing-Strategie können Sie zuverlässigere Frontend-Anwendungen mit der Gewissheit entwickeln, dass Ihre UI browserübergreifend und auf verschiedenen Geräten korrekt funktioniert. Die Auto-Waiting-Mechanismen, Isolationsfunktionen und leistungsstarken Debugging-Tools adressieren viele häufige Probleme beim UI-Testing. Ob Sie Responsive Designs, visuelles Erscheinungsbild oder dynamische Interaktionen testen – Playwright bietet eine umfassende Lösung, die sich nahtlos in moderne Entwicklungsworkflows integriert.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Loved by thousands of developers