• Test für dynamische OnLoad-Komponenten
  • Design
  • Erkenntnisse
• Test für State-Change-Zeit

Test für dynamische OnLoad-Komponenten

(Komponenten, deren Repräsentation im DOM während erstem Laden der Seite langsam/verzögert erscheint)

Design

1. MutationObserver über page.addInitScript({ path: './tests/performance.js' }) injizieren
2. Zur Seite navigieren
3. Bis zum Abschluss, bzw. für bestimmte Zeit warten
4. Performancedaten über window.dynamic_component_performance auslesen und auswerten
5. Jede Komponente testen
   1. Screenshot machen
6. Screenshot mit Highlight/Overlay über langsamen Komponenten

Erkenntnisse

1. Design funktioniert mit Playwright, sodass aus failenden Tests erkenntlich wird, welche Komponenten zu langsam laden
2. Identifikation der Komponente stellt ein Problem dar, wenn es keine id hat
   1. Möglichkeit 1: xPath
   2. Option 2: neue id -> kurz und eindeutig, schwer zurückzuverfolgen (strg + f nach der id im Playwright Report führt zum Screenshot, Entwickler muss selber die Codestelle finden)

Test für State-Change-Zeit

(Zeit zwischen State Change durch User Input und letzter anschließender Änderung im DOM)

1. MutationObserver über page.addInitScript({ path: './tests/<xxx>.js' }) injizieren
2. Zur Seite js /create navigieren
3. Loadzeiten löschen & Timer neu starten
4. User Input triggern
5. Bis zum Abschluss, bzw. für bestimmte Zeit warten
6. Performancedaten über window.<xxx> auslesen und auswerten
7. Erste Reaktion (minmale Zeit) und letzte Änderung (maximale Zeit) testen