Multi-Browser-Testing

Das Multi-Browser-Testing im Device Lab kombiniert Geräteemulation mit verschiedenen Browser-Engines. So testen Sie nicht nur verschiedene Bildschirmgrößen, sondern auch unterschiedliches Rendering-Verhalten.

Browser und Geräte kombinieren

Jedes emulierte Gerät kann mit einer der drei Playwright-Browser-Engines betrieben werden:

Browser	Engine	Typischer Einsatz
Chromium	Blink	Android-Geräte, Chrome auf Desktop
Firefox	Gecko	Firefox auf allen Plattformen
WebKit	WebKit	iPhone, iPad, Safari auf macOS

TIP

Für realitätsnahe iOS-Tests wählen Sie WebKit mit einem iPhone-Descriptor. Für Android-Tests verwenden Sie Chromium mit einem Pixel- oder Galaxy-Profil.

Test-Matrix erstellen

Eine vollständige Test-Matrix kombiniert Geräte und Browser:

Gerät	Chromium	Firefox	WebKit
iPhone 14	—	—	Primär
Pixel 7	Primär	Optional	—
iPad	Optional	—	Primär
Desktop	Primär	Pflicht	Optional

INFO

Sie müssen nicht jede Kombination testen. Konzentrieren Sie sich auf die Kombinationen, die Ihre Zielgruppe tatsächlich nutzt.

Häufige Cross-Browser-Unterschiede

Bei mobilen Tests treten bestimmte Abweichungen häufiger auf als auf dem Desktop:

Layout-Unterschiede

• Flexbox-Verhalten — Firefox berechnet Flex-Items anders als Chromium bei bestimmten Wrapping-Szenarien
• Scroll-Verhalten — WebKit behandelt overflow: scroll und Bounce-Effekte eigenständig
• Viewport-Units — vh wird auf iOS-Safari anders berechnet (Dynamic Viewport)

JavaScript-Unterschiede

• Date-Parsing — verschiedene Browser interpretieren Datumsformate unterschiedlich
• Clipboard-API — eingeschränkte Unterstützung in bestimmten Kontexten auf Firefox
• Touch-Events — Reihenfolge und Timing der Events variieren zwischen Engines

WARNING

Der häufigste Fehler bei Cross-Browser-Tests: Selektoren, die in Chromium funktionieren, aber in WebKit scheitern, weil das DOM leicht unterschiedlich aufgebaut ist. Verwenden Sie stabile data-testid-Attribute.

Aufzeichnung mit verschiedenen Browsern

Im Device Lab können Sie Flows in jedem Browser aufzeichnen:

1. Wählen Sie Gerät und Browser im Device Lab
2. Starten Sie die Aufzeichnung
3. Der generierte Code enthält die Browser- und Gerätekonfiguration

Der erzeugte Test kann anschließend über den Runner in allen Browsern ausgeführt werden.

Ergebnisvergleich

Nach einem Multi-Browser-Lauf zeigt xyva die Ergebnisse nebeneinander:

• Bestanden in allen Browsern — Test ist stabil
• Nur in einem Browser fehlgeschlagen — browser-spezifisches Problem
• In mehreren Browsern fehlgeschlagen — wahrscheinlich ein echter Bug

Performance-Hinweis

Multi-Browser-Tests verdoppeln oder verdreifachen die Laufzeit. Nutzen Sie diese Strategie:

• Entwicklung — nur den Hauptbrowser testen (Chromium)
• Vor dem Release — vollständige Cross-Browser-Matrix ausführen
• CI-Pipeline — Browser-Matrix parallelisieren mit Sharding

Weiterführende Seiten

• Device Lab — Übersicht und Flow-Aufzeichnung
• Geräteemulation — Device Descriptors und Viewports
• Browser-Auswahl — Browser im Runner konfigurieren