KI & Automatisierung / Desktop-Automatisierung / Playwright / Visual Regression

Praxis-Guide: Playwright Visual Regression Testing

Automatisierter Abgleich von Benutzeroberflächen durch Pixel-genauen Vergleich von Screenshots (Visual Regression Testing) zur Vermeidung unerwünschter Layout-Fehler.

---

🐍 1. Python Skript (visual_test.py)

import pytest
from playwright.sync_api import Page, expect

def test_homepage_visual_regression(page: Page):
    # 1. Webseite aufrufen
    page.goto("https://beispiel.de")
    
    # 2. Warten bis alle Schriften & Bilder geladen sind
    page.wait_for_load_state("networkidle")
    
    # 3. Screenshot abgleichen mit Baseline-Referenzbild
    expect(page).to_have_screenshot("homepage_baseline.png", max_diff_pixels=100)

---

⚡ 2. Ausführung & Baseline-Erstellung

# Baseline-Screenshots beim ersten Mal erzeugen
pytest --update-snapshots visual_test.py

# Regelmäßigen visuellen Test ausführen
pytest visual_test.py

---

🔗 Verwandte Themen

• Playwright Trace Viewer – Test-Debugging
• Playwright Network Interception – Mocking
• Robot Framework API-Testing – Testing
• Beste Screenshot-Analyse-KI-Agenten (Top 20) – Applitools/Percy/Chromatic im Vergleich zu weiteren Werkzeugen