.png)
.svg){kind=icon}
3. März 2025
•
10
min lesen
Playwright Headless Browser: Schnelles und zuverlässiges Testtool
Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
Dramatiker ist ein Testautomatisierungsframework, das Browsertests mit einer einzigen API vereinfacht für Chromium, Firefox und WebKit. Es ist schnell, zuverlässig und weit verbreitet, mit über 1.2 Millionen Downloads pro Woche.
npm init playwright@latest| Merkmal | Traditionelles Testen | Headless-Tests |
|---|---|---|
| Schnelligkeit | Langsamer | Bis zu 15x schneller |
| Ressourcennutzung | Hoch | Senken |
| Browser-Unterstützung | Limitiert | Chromium, Firefox, WebKit |
Mit Playwright können Sie dynamische Inhalte effizient testen, mehrere Browser verwalten und sogar Geräte und Netzwerkbedingungen simulieren. Bereit zum Start? Lassen Sie uns einen Blick darauf werfen, wie Sie es einrichten und Ihren ersten Test erstellen können.
Befolgen Sie diese Schritte, um Playwright im Headless-Modus einzurichten und mit dem Testen zu beginnen.
Stellen Sie vor dem Eintauchen sicher, dass Ihr System diese Anforderungen erfüllt:
Um Playwright schnell einzurichten, führen Sie Folgendes aus:
npm init playwright@latest
Dieser Befehl initialisiert Playwright und generiert:
Bevorzugen Sie die manuelle Installation? Verwenden Sie die folgenden Befehle:
npm i -D @playwright/test
npx playwright install
Playwright führt Tests standardmäßig im Headless-Modus aus und zeigt die Ergebnisse direkt im Terminal an. Um alles auf dem neuesten Stand zu halten, verwenden Sie:
npm install -D @playwright/test@latest
npx playwright install --with-deps
Mit Playwright ist das Testen in mehreren Browsern ganz einfach. Aktualisieren Sie Ihre playwright.config.ts Datei wie folgt:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
});
So führen Sie Tests durch:
npx playwright testnpx playwright test --project webkitnpx playwright test --project webkit --project firefoxBrowserkompatibilität für Playwright:
| Browser | Windows | macOS | Linux |
|---|---|---|---|
| Chromium | ✓ | ✓ | ✓ |
| Firefox | ✓ | ✓ | ✓ |
| WebKit | ✓ | ✓ | ✓ |
Wenn Sie Playwright installieren, lädt es automatisch die erforderlichen Browserversionen herunter und speichert sie lokal. Dies gewährleistet konsistente Testumgebungen auf verschiedenen Plattformen und Maschinen.
Nachdem Playwright nun eingerichtet ist, können Sie Ihren ersten Test erstellen.
Nachdem Sie Playwright eingerichtet haben, erfahren Sie hier, wie Sie Ihren ersten Test erstellen und ausführen.
Erstellen Sie zunächst eine Datei mit dem Namen first-test.spec.ts und fügen Sie den folgenden Code hinzu. Führen Sie dann den Test mit dem Befehl aus npx playwright test first-test.spec.ts:
import { test, expect } from '@playwright/test';
test('basic navigation test', async ({ page }) => {
await page.goto('https://playwright.dev');
const title = await page.title();
await expect(title).toBe('Playwright');
});
So können Sie mit Elementen in Playwright interagieren:
test('element interactions', async ({ page }) => {
// Fill out a text field
await page.getByRole('textbox').fill('[email protected]');
// Click a button
await page.getByRole('button', { name: 'Submit' }).click();
// Check a checkbox
await page.getByLabel('Remember me').check();
// Select an option from a dropdown
await page.getByLabel('Country').selectOption('United States');
});
Hier sind einige allgemeine Ortungsmethoden, die Sie verwenden können:
| Locator-Typ | Beispiel | Luftüberwachung |
|---|---|---|
| Rollen | getByRole('Schaltfläche') | Für barrierefreie Elemente |
| Label | getByLabel('Passwort') | Für Formularfelder |
| Text | getByText('Anmelden') | Für sichtbaren Text |
| Test-ID | getByTestId('Senden-Schaltfläche') | Für benutzerdefinierte Attribute |
Um sicherzustellen, dass Ihre Tests zuverlässig sind, überprüfen Sie die Ergebnisse mithilfe von Behauptungen:
test('verification examples', async ({ page }) => {
// Check if an element is visible
await expect(page.getByRole('heading')).toBeVisible();
// Verify the text content of an element
await expect(page.getByTestId('status')).toHaveText('Success');
// Confirm the URL after navigation
await expect(page).toHaveURL(/.*dashboard/);
// Ensure a button is enabled
await expect(page.getByRole('button')).toBeEnabled();
});
Zum Debuggen können Sie Playwright mit diesem Befehl im UI-Modus ausführen:
npx playwright test --ui
Playwright führt jeden Test in einem separaten Browserkontext aus und stellt so jedes Mal eine saubere Grundlage sicher. Diese Isolation vermeidet Interferenzen zwischen Tests und sorgt im Headless-Modus für eine schnelle und effiziente Ausführung.
Playwright baut auf grundlegenden Testfunktionen auf und bietet Tools, die die Zuverlässigkeit verbessern und Testszenarien erweitern.
Playwright vereinfacht das Testen dynamischer Webinhalte mit seinen integrierten Wartemechanismen und Web-First-Assertions. Es stellt sicher, dass die Elemente zur Interaktion bereit sind, und macht manuelle Timeouts überflüssig, die häufig zu unzuverlässigen Tests führen.
So können Sie dynamische Inhalte effektiv testen:
// Wait for API response before proceeding
await page.waitForResponse(response =>
response.url().includes('/api/data') &&
response.status() === 200
);
// Wait for dynamic content updates
await page.waitForFunction(() => {
const element = document.querySelector('.dynamic-content');
return element && element.textContent.includes('Updated');
});
Für Situationen mit zeitweiligen Netzwerkproblemen können Sie Wiederholungsmechanismen hinzufügen:
// Retry mechanism for flaky elements
const retryOptions = {
timeout: 30000,
intervals: [1000, 2000, 5000]
};
await page.waitForSelector('.loading-content', retryOptions);
Sehen wir uns als Nächstes an, wie Playwright die Geräteemulation und die Simulation von Netzwerkzuständen unterstützt.
Playwright enthält ein integriertes Geräteregister zur Emulation verschiedener Geräte. Mit dieser Funktion können Sie unterschiedliche Bildschirmgrößen und Benutzeragentkonfigurationen testen.
Hier ist ein Beispiel für Geräteemulation:
const iPhone = playwright.devices['iPhone 13'];
const context = await browser.newContext({
...iPhone,
locale: 'en-US',
geolocation: { longitude: -122.084, latitude: 37.422 },
permissions: ['geolocation']
});
Zum Testen der Netzwerkbedingungen können Sie Routenhandler verwenden:
// Simulate slow network conditions
await page.route('**/*.{jpg,png,jpeg}', route => {
return new Promise(resolve => {
setTimeout(() => {
route.continue();
}, 5000); // 5-second delay
});
});
// Mock API responses
await page.route('/api/data', route => {
route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ status: 'success' })
});
});
Playwright unterstützt die Aufzeichnung von Artefakten wie Screenshots, Videos und Traces, um beim Debuggen zu helfen. Diese Optionen können in Ihrem playwright.config.js Datei:
| Aufzeichnungstyp | Konfiguration | Bester Anwendungsfall |
|---|---|---|
| Screenshots | screenshot: 'only-on-failure' |
Erfassen des visuellen Zustands bei Testfehlern |
| Videos | video: 'retain-on-failure' |
Testausführung für fehlgeschlagene Szenarien aufzeichnen |
| Spur | trace: 'on-first-retry' |
Detaillierte Protokolle zum Debuggen erstellen |
So aktivieren Sie diese Funktionen:
// playwright.config.js
module.exports = {
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure',
trace: 'on-first-retry'
}
};
„Playwright wartet, bis Elemente handlungsfähig sind, bevor Aktionen ausgeführt werden … und eliminiert die Notwendigkeit künstlicher Timeouts – der Hauptursache für fehlerhafte Tests.“ – Playwright-Dokumentation
Alle aufgezeichneten Artefakte werden gespeichert im test-results Verzeichnis und bietet wertvolle Einblicke zur Fehlerbehebung. Videos werden automatisch gespeichert, wenn der Browserkontext geschlossen wird.
Die Verbesserung der Testleistung in Playwright umfasst die intelligente Nutzung paralleler Ausführung, effektives Browserkontextmanagement und durchdachte Wiederholungsstrategien. Diese Methoden tragen dazu bei, dass Tests effizient ausgeführt werden, ohne die Zuverlässigkeit zu beeinträchtigen.
Mit Playwright können Sie Tests über mehrere Arbeitsprozesse hinweg ausführen, was die Zeit für die Fertigstellung einer Testsuite erheblich verkürzen kann. Sie können die parallele Ausführung in konfigurieren playwright.config.ts:
export default {
fullyParallel: true,
workers: 4,
maxFailures: 5
};
Innerhalb einer Testdatei können Sie die parallele Ausführung wie folgt aktivieren:
test.describe.configure({ mode: 'parallel' });
test.describe('User Authentication', () => {
test('login flow', async ({ page }) => {
// Test implementation
});
test('registration flow', async ({ page }) => {
// Test implementation
});
});
Um Datenkonflikte zwischen Mitarbeitern zu vermeiden, verwenden Sie eindeutige Kennungen:
const testId = `user_${process.env.TEST_WORKER_INDEX}_${Date.now()}`;
const userEmail = `test_${testId}@example.com`;
Sobald die Parallelisierung eingerichtet ist, besteht der nächste Schritt darin, Browserkontexte effizient zu verwalten.
Die Verwendung separater Browserkontexte gewährleistet isolierte Testumgebungen, ähnlich der Verwendung von Inkognito-Profilen. Dadurch bleiben die Tests unabhängig und Statuskonflikte werden vermieden.
Hier ist ein Beispiel zum Erstellen und Verwenden eines Browserkontexts:
const context = await browser.newContext({
viewport: { width: 1280, height: 720 },
userAgent: 'Playwright/1.32.0',
storageState: './auth.json'
});
await test.step('Verify dashboard', async () => {
const page = await context.newPage();
await page.goto('https://app.example.com/dashboard');
// Test implementation
});
await context.close();
Zu den gängigen Browserkontextstrategien gehören:
Nachdem für saubere und isolierte Umgebungen gesorgt wurde, liegt der Schwerpunkt als Nächstes auf der Behandlung vorübergehender Fehler mit Wiederholungsstrategien.
Wiederholungsversuche können bei fehlerhaften Tests helfen, die durch Zeitprobleme oder Umgebungsinstabilität verursacht werden. Sie können Wiederholungsversuche in der Playwright-Konfigurationsdatei konfigurieren:
export default {
retries: process.env.CI ? 2 : 0,
expect: {
timeout: 10000,
toPass: { intervals: [1000, 2000, 5000] }
}
};
Für Behauptungen, die möglicherweise mehrere Versuche benötigen, verwenden Sie Polling:
await expect
.poll(async () => {
const element = page.locator('.dynamic-content');
return await element.textContent();
}, {
intervals: [1000, 2000, 10000],
timeout: 60000
})
.toBe('Expected Value');
„Während Wiederholungsversuche die Testzuverlässigkeit verbessern, können durch übermäßigen Einsatz Probleme wie Timeouts und Race Conditions verborgen werden. Es ist wichtig, die Grundursachen für stabile Tests zu beheben, Wiederholungsversuche sinnvoll und mit Einschränkungen durchzuführen und Daten für instabile Muster zu protokollieren.“ – Cerosh Jacob
So stellen Sie sicher, dass die Seite vollständig geladen ist, bevor Sie Ihre Tests ausführen:
await page.waitForLoadState('networkidle', { timeout: 5000 });
await page.waitForSelector('.content-ready');
Die Integration von Playwright in die Low-Code-Plattform von Latenode vereinfacht Webtests und die Workflow-Automatisierung. Diese Kombination ermöglicht es Teams, erweiterte Tests zu erstellen, ohne über umfassende Programmierkenntnisse zu verfügen.
Latenode ergänzt die Funktionalität von Playwright, indem es die Automatisierung auf umfassendere Workflow-Anforderungen ausweitet.
Latenode ist eine Low-Code-Plattform für Integration und Workflow-Automatisierung, die Headless-Browser-Technologie nutzt. Der visuelle Workflow-Builder erleichtert das Erstellen und Verwalten automatisierter Test-Setups, ohne dass komplexer Code geschrieben werden muss.
Hier ist ein Beispiel, wie die Browserautomatisierung von Latenode konfiguriert werden kann:
// Example of a Latenode workflow configuration
const workflowConfig = {
browserAutomation: {
viewport: { width: 1920, height: 1080 },
headless: true,
scenarios: ['login', 'data-extraction', 'form-submission']
}
};
Die Kombination von Playwright mit Latenode bietet mehrere technische Vorteile:
| Merkmal | Vorteile |
|---|---|
| Visual Workflow Builder | Vereinfacht die Einrichtung im Vergleich zu herkömmlichen Codiermethoden |
| KI-unterstützte Codegenerierung | Generiert automatisch Playwright-Testskripte |
| Integrierte Datenbankintegration | Effizientes Management von Testdaten und -ergebnissen |
| Multi-Browser-Unterstützung | Führt Tests auf Chromium, Firefox und WebKit aus |
Diese Integration erweitert die Test-Workflows und verbessert die Automatisierungsprozesse.
Diese Kombination unterstützt eine Vielzahl praktischer Automatisierungsszenarien. Zum Beispiel:
// Example of a multi-browser test workflow
async function crossPlatformTest() {
const workflow = await latenode.createWorkflow({
name: 'E2E Testing Suite',
browser: playwright.chromium,
integrations: ['slack', 'jira']
});
await workflow.addStep({
type: 'ui-test',
script: async ({ page }) => {
await page.goto('https://app.example.com');
await page.fill('#username', process.env.TEST_USER);
await page.click('#submit');
}
});
}
Für Tests im großen Maßstab unterstützt Latenodes Prime-Plan (297 $/Monat) bis zu 1.5 Millionen Szenariodurchläufe. Dieser Plan ist ideal für Teams, die erweiterte Tools für die Zusammenarbeit und detaillierte Berichte benötigen.
Darüber hinaus helfen die integrierten Datenbankfunktionen von Latenode Teams dabei, Testdaten und -ergebnisse ohne zusätzliche Infrastruktur zu verwalten. Automatisierte Berichte und Analysen erleichtern das Erkennen von Trends und die effektive Verfeinerung von Teststrategien.
Playwright bietet eine Reihe erweiterter Funktionen und Leistungsverbesserungen, die es zu einer hervorragenden Wahl für automatisierte Tests machen. Hier ist eine kurze Zusammenfassung seiner wichtigsten Vorteile.
Playwrights Headless-Browsertests steigern die Leistung erheblich, indem unnötige Rendering-Aufgaben übersprungen werden. Tests zeigen, dass der Headless-Modus ausgeführt werden kann 2x bis 15x schneller! als herkömmliche Browsertests.
Zu den wichtigsten Leistungsvorteilen gehören:
| Testaspekt | Leistungsvergleich |
|---|---|
| Web Scraping-Geschwindigkeit | 56.21 Sekunden (ohne Kopf) vs. 73.77 Sekunden (mit Kopf) |
| Ressourcennutzung | Geringere CPU- und Speicherauslastung |
| Browser-Unterstützung | Chrome (64.16 %), Safari (19.62 %), Edge (4.87 %) |
Diese Vorteile, kombiniert mit den zuvor besprochenen Setup- und Teststrategien, machen Playwright zu einem leistungsstarken Tool für skalierbare und effiziente Automatisierung.
Die Leistung und Skalierbarkeit von Playwright machen es zu einer hervorragenden Wahl für moderne Test-Workflows. Arjun Attam, Senior Product Manager bei Microsoft, erklärt:
„Automatisierte End-to-End-Tests sind wichtiger denn je. Die Teams liefern schneller aus und entwickeln Apps, die auf einer wachsenden Anzahl von Geräten laufen. Diese Zunahme an Geschwindigkeit und Webzielen übt enormen Druck auf den Testprozess aus, und Automatisierung ist von entscheidender Bedeutung.“
So beginnen Sie mit der Verwendung von Playwright für Headless-Tests:
npm init playwright@latest .example.spec.js).npx playwright test .Für eine nahtlose Integration verbinden Sie Playwright mit Ihrer CI/CD-Pipeline mithilfe von Tools wie Jenkins or GitHub-Aktionen . Die einheitliche API ermöglicht konsistente Tests in Chrome, Firefox und WebKit, ohne dass browserspezifische Codeänderungen erforderlich sind.
Der Headless-Modus von Playwright glänzt in leistungsintensiven Umgebungen und CI/CD-Pipelines, in denen schnelles Feedback entscheidend ist. Seine Fähigkeit, mehrere Browserinstanzen effizient zu handhaben, macht ihn zur ersten Wahl für groß angelegte Testvorgänge.
