- Startseite
- Skills
- Testen
- E2E-Test-Architekt
E2E-Test-Architekt
End-to-End-Teststrategien entwerfen, die echte Nutzerprobleme finden — Browser-Automatisierung, kritische Pfade und Flake-Praevention.
Das Problem
End-to-End-Tests sind die wertvollsten — und die fragilsten. Sie finden Bugs, die keine andere Testebene aufdeckt, brechen aber auch aus Gruenden, die nichts mit dem Code zu tun haben: langsame Netzwerke, geaenderte Selektoren, Animationstiming, Drittanbieter-Skripte. Eine E2E-Strategie zu entwerfen, die kritische Nutzerreisen abdeckt ohne zum Wartungsalptraum zu werden, erfordert sorgfaeltige Architektur, die die meisten Teams ueberspringen.
Der Prompt
Entwirf eine End-to-End-Teststrategie fuer meine Anwendung. Ich brauche Tests, die echte nutzerseitige Bugs finden und dabei wartbar und schnell bleiben.
ANWENDUNG:
[App beschreiben — Typ, zentrale Nutzer-Flows, Tech-Stack]
AKTUELLER STAND:
[z.B. "Noch keine E2E-Tests" oder "50 Cypress-Tests, 30% instabil"]
E2E-FRAMEWORK: [Playwright / Cypress / Selenium]
Folgendes entwerfen:
1. **Inventar kritischer Pfade** — Die 5-10 Nutzerreisen auflisten, die funktionieren MUESSEN. Nach Geschaeftsauswirkung ranken.
2. **Page Object Model** — POM-Klassen/Helfer fuer die Top-3 kritischen Pfade generieren. Einschliesslich:
- Robuste Selektoren (data-testid, rollenbasiert, nie CSS-Klassen)
- Wartestrategien (keine willkuerlichen Sleeps — auf spezifische Bedingungen warten)
- Wiederverwendbare Aktionen (Login, Navigation, Formular ausfuellen)
3. **Test-Implementierung** — Die tatsaechlichen E2E-Tests fuer den wichtigsten kritischen Pfad mit:
- Setup: Testdaten via API anlegen (nicht ueber UI)
- Assertions auf sichtbare Nutzerergebnisse (nicht DOM-Interna)
- Screenshot bei Fehler zum Debugging
- Bereinigung: Zustand nach jedem Test zuruecksetzen
4. **Anti-Flake-Massnahmen** — Retry-Konfiguration, Netzwerk-Idle-Waits, Animationsdeaktivierung und Timeout-Tuning.
5. **CI-Konfiguration** — GitHub Actions / CI-Konfiguration zum Ausfuehren bei jedem PR.
Beispielausgabe
// pages/CheckoutPage.ts — Page Object Model
export class CheckoutPage {
constructor(private page: Page) {}
async fillShippingAddress(address: Address) {
await this.page.getByLabel('Strasse').fill(address.street);
await this.page.getByLabel('Stadt').fill(address.city);
await this.page.getByLabel('PLZ').fill(address.zip);
}
async submitOrder() {
await this.page.getByRole('button', { name: 'Bestellung aufgeben' }).click();
await this.page.waitForURL('**/bestellbestaetigung/**');
}
async getOrderNumber(): Promise<string> {
return this.page.getByTestId('order-number').textContent();
}
}
Wann verwenden
Beim Launch eines neuen Produkts, nach einem Ausfall eines kritischen Nutzer-Flows in Produktion oder wenn die bestehende E2E-Suite unzuverlaessig ist und eine neue Architektur braucht. Mit der einzeln wichtigsten Nutzerreise beginnen und schrittweise erweitern — fuenf stabile E2E-Tests sind mehr wert als fuenfzig instabile.
Profi-Tipps
- API-First-Setup — Testdaten via API-Aufrufe im beforeEach anlegen, nie ueber die UI. KI kann die Seed-Skripte passend zum Datenbankschema generieren.
- Nutzerergebnisse testen, nicht Implementierung — “Bestellbestaetigung ist sichtbar” assertieren, nicht “div.order-confirm hat Klasse active.”
- Nicht-essentielle Services deaktivieren — Analytics, Chat-Widgets und Drittanbieter-Skripte waehrend E2E blockieren, um Instabilitaet zu reduzieren.
- Trace-Dateien verwenden — KI bitten, Playwright-Trace-Aufzeichnung hinzuzufuegen, um eine vollstaendige Timeline-Wiedergabe bei fehlgeschlagenen Tests in CI zu erhalten.