Geräteemulation
Die Geräteemulation im Device Lab nutzt Playwrights Device Descriptors, um reale Geräte im Browser zu simulieren. Damit testen Sie responsives Verhalten, ohne physische Geräte zu benötigen.
Was sind Device Descriptors?
Playwright liefert eine umfangreiche Bibliothek vordefinierter Geräteprofile mit. Jeder Descriptor enthält:
- Viewport-Größe — Breite und Höhe in Pixeln
- Device Scale Factor — Pixel-Dichte (z. B. 2x für Retina)
- User Agent — gerätespezifischer Browser-String
- Touch-Unterstützung — ob Touch-Events emuliert werden
- Mobile-Flag — ob die Seite als mobile Version ausgeliefert wird
INFO
Die vollständige Liste der verfügbaren Geräte finden Sie in der Playwright-Dokumentation. xyva gruppiert die gängigsten Geräte für schnellen Zugriff.
Vordefinierte Geräte
Smartphones
| Gerät | Viewport | Scale |
|---|---|---|
| iPhone 14 | 390 x 844 | 3x |
| iPhone SE | 375 x 667 | 2x |
| Pixel 7 | 412 x 915 | 2.625x |
| Galaxy S21 | 360 x 800 | 3x |
Tablets
| Gerät | Viewport | Scale |
|---|---|---|
| iPad (10. Gen.) | 820 x 1180 | 2x |
| iPad Mini | 768 x 1024 | 2x |
| Galaxy Tab S8 | 800 x 1280 | 1.5x |
Desktop
| Profil | Viewport | Besonderheit |
|---|---|---|
| Desktop Chrome | 1280 x 720 | Standard-Desktop |
| Desktop Full HD | 1920 x 1080 | Breitbild-Monitor |
| Laptop | 1366 x 768 | Häufigste Laptop-Auflösung |
Eigene Geräte definieren
Neben den vordefinierten Profilen können Sie eigene Descriptors anlegen:
- Klicken Sie auf Eigenes Gerät
- Geben Sie Viewport-Breite und -Höhe ein
- Setzen Sie Scale Factor und User Agent
- Aktivieren Sie Touch-Emulation, falls gewünscht
TIP
Nutzen Sie eigene Descriptors für die spezifischen Geräte Ihrer Zielgruppe. Die Analytics Ihrer Anwendung zeigen, welche Bildschirmgrößen tatsächlich relevant sind.
Touch-Emulation
Bei Smartphone- und Tablet-Profilen emuliert Playwright Touch-Events:
- Tap — entspricht einem Klick auf Touchscreens
- Scroll — Wisch-Gesten für vertikales und horizontales Scrollen
- Long Press — langer Tastendruck für Kontextmenüs
WARNING
Die Touch-Emulation deckt grundlegende Gesten ab. Komplexe Multi-Touch-Interaktionen (Pinch-to-Zoom, Zwei-Finger-Rotation) werden nicht unterstützt.
Viewport-Validierung
Das Device Lab prüft automatisch, ob Ihre Anwendung auf dem gewählten Viewport korrekt dargestellt wird:
- Kein horizontaler Overflow (Seiteninhalt ragt über den Viewport hinaus)
- Lesbare Schriftgröße (mindestens 16px auf mobilen Geräten empfohlen)
- Interaktionselemente ausreichend groß (mindestens 44 x 44px Touch-Target)
Weiterführende Seiten
- Device Lab — Übersicht und Flow-Aufzeichnung
- Multi-Browser-Testing — Cross-Browser auf emulierten Geräten
- Barrierefreiheit — Zugänglichkeit auf allen Geräteklassen