Playwright-Screenshots und Videos
Dieses Kapitel führt in die Verwendung von Playwright für Screenshots und Videoaufzeichnung ein und hilft Ihnen, Probleme bei fehlgeschlagenen Tests schnell zu lokalisieren.
page.screenshot() Screenshots
Ganzseitiger Screenshot
Beispiel
// In Datei speichern
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Buffer-Daten abrufen (direkt verwenden, nicht in eine Datei schreiben)
const buffer = await page.screenshot();
await page.screenshot({ path: 'screenshots/example-homepage.png' });
// Buffer-Daten abrufen (direkt verwenden, nicht in eine Datei schreiben)
const buffer = await page.screenshot();
Screenshot-Optionen
Beispiel
await page.screenshot({
path: 'screenshots/full-page.png',
fullPage: true, // Die gesamte Seite erfassen (nicht nur den Viewport)
type: 'png', // Format: 'png' (Standard) oder 'jpeg'
quality: 90, // JPEG-Qualität (0-100, nur JPEG)
clip: { // Clip-Bereich
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // CSS-Animationen deaktivieren (stabilere Screenshots)
omitBackground: false, // Ob der Standardhintergrund ausgeblendet werden soll
});
path: 'screenshots/full-page.png',
fullPage: true, // Die gesamte Seite erfassen (nicht nur den Viewport)
type: 'png', // Format: 'png' (Standard) oder 'jpeg'
quality: 90, // JPEG-Qualität (0-100, nur JPEG)
clip: { // Clip-Bereich
x: 0,
y: 0,
width: 800,
height: 600,
},
animations: 'disabled', // CSS-Animationen deaktivieren (stabilere Screenshots)
omitBackground: false, // Ob der Standardhintergrund ausgeblendet werden soll
});
Element-Screenshot
Beispiel
// Einen Screenshot von einem bestimmten Element aufnehmen
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Einen Button aufnehmen
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
await page.getByRole('navigation').screenshot({ path: 'nav.png' });
// Einen Button aufnehmen
await page.getByRole('button', { name: 'Submit' }).screenshot({ path: 'btn.png' });
Automatische Screenshot-Konfiguration
Legen Sie die automatische Screenshot-Richtlinie in der Konfigurationsdatei fest, ohne sie in jedem Test manuell aufzurufen:
Beispiel
// Dateipfad: playwright.config.ts
export default defineConfig({
Verwenden Sie: {
// Nur bei fehlgeschlagenen Tests automatisch Screenshots aufnehmen
screenshot: 'only-on-failure',
// Optionale Werte:
// 'off' — Keine Screenshots aufnehmen
// 'on' — Bei jedem Test einen Screenshot erstellen
// 'only-on-failure' — Nur bei Fehlschlag einen Screenshot erstellen (empfohlen)
},
});
export default defineConfig({
Verwenden Sie: {
// Nur bei fehlgeschlagenen Tests automatisch Screenshots aufnehmen
screenshot: 'only-on-failure',
// Optionale Werte:
// 'off' — Keine Screenshots aufnehmen
// 'on' — Bei jedem Test einen Screenshot erstellen
// 'only-on-failure' — Nur bei Fehlschlag einen Screenshot erstellen (empfohlen)
},
});
Screenshots bei Fehlschlägen werden imtest-results/Verzeichnis gespeichert und im HTML-Bericht angezeigt.
Videoaufzeichnung
Videoaufzeichnung konfigurieren
Beispiel
// Dateipfad: playwright.config.ts
export default defineConfig({
Verwenden Sie: {
// Videos nur bei Fehlschlag behalten
video: 'retain-on-failure',
// Optionale Werte:
// 'off' — Nicht aufzeichnen
// 'on' — Jedes Mal aufzeichnen
// 'retain-on-failure' — Bei Fehlschlag behalten, bei Bestehen löschen (empfohlen)
// 'on-first-retry' — Nur beim ersten Wiederholungsversuch aufzeichnen
},
});
export default defineConfig({
Verwenden Sie: {
// Videos nur bei Fehlschlag behalten
video: 'retain-on-failure',
// Optionale Werte:
// 'off' — Nicht aufzeichnen
// 'on' — Jedes Mal aufzeichnen
// 'retain-on-failure' — Bei Fehlschlag behalten, bei Bestehen löschen (empfohlen)
// 'on-first-retry' — Nur beim ersten Wiederholungsversuch aufzeichnen
},
});
Manuelle Videosteuerung
Beispiel
test('Video manuell speichern', async ({ page }) => {
await page.goto('https://www.example.com/');
// Aktionen ausführen
await page.getByText('EXAMPLE Tutorial').click();
// Das Video-Objekt abrufen
const video = page.video();
// Das Video im angegebenen Pfad speichern
await video.saveAs('videos/example-test.mp4');
// Oder das Video löschen
// await video.delete();
});
await page.goto('https://www.example.com/');
// Aktionen ausführen
await page.getByText('EXAMPLE Tutorial').click();
// Das Video-Objekt abrufen
const video = page.video();
// Das Video im angegebenen Pfad speichern
await video.saveAs('videos/example-test.mp4');
// Oder das Video löschen
// await video.delete();
});
Videoaufzeichnungsoptionen
Beispiel
// Dateipfad: playwright.config.ts
export default defineConfig({
Verwenden Sie: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Videogröße
},
},
});
export default defineConfig({
Verwenden Sie: {
video: {
mode: 'retain-on-failure',
size: { width: 1280, height: 720 }, // Videogröße
},
},
});
Anwendungsfälle für Screenshots und Videos
| Szenario | Empfohlene Lösung |
|---|---|
| Den Seitenzustand schnell verstehen, wenn CI-Tests fehlschlagen | screenshot: 'only-on-failure' |
| Den vollständigen Testausführungsprozess anzeigen | video: 'retain-on-failure' |
| Visuelles Regressionstesting | expect(page).toHaveScreenshot() |
| Bestimmte Schritte debuggen | Manueller Aufrufpage.screenshot() |
Andere ErweiterungenScreenshots und Videos erhöhen die Testausführungszeit und die Speicherplatznutzung. Es wird empfohlen, sie nur in Produktionsumgebungen zu verwenden
'only-on-failure'oder'retain-on-failure'um nicht jedes Mal Mediendateien zu erzeugen.