Fähigkeit zum Testen von Webanwendungen mit Playwright

--- name: web-application-testing-skill description: Ein Toolkit für die Interaktion mit und das Testen von lokalen Webanwendungen mit Playwright. --- # Webanwendungs-Tests Diese Skill ermöglicht umfassende Tests und Debugging von lokalen Webanwendungen mit Playwright-Automatisierung. ## Wann diese Skill verwendet werden sollte Verwenden Sie diese Skill, wenn Sie Folgendes benötigen: - Testen der Frontend-Funktionalität in einem echten Browser - Überprüfen des UI-Verhaltens und der Interaktionen - Debuggen von Webanwendungsproblemen - Erfassen von Screenshots für Dokumentation oder Debugging - Untersuchen von Browser-Konsolenprotokollen - Validieren von Formularübermittlungen und Benutzerabläufen - Überprüfen des responsiven Designs über verschiedene Viewports ## Voraussetzungen - Node.js auf dem System installiert - Eine lokal laufende Webanwendung (oder erreichbare URL) - Playwright wird automatisch installiert, falls nicht vorhanden ## Kernfunktionen ### 1. Browser-Automatisierung - Navigieren zu URLs - Klicken von Schaltflächen und Links - Ausfüllen von Formularfeldern - Auswählen von Dropdowns - Behandeln von Dialogen und Warnungen ### 2. Verifizierung - Bestätigen des Vorhandenseins von Elementen - Überprüfen von Textinhalten - Prüfen der Sichtbarkeit von Elementen - Validieren von URLs - Testen des responsiven Verhaltens ### 3. Debugging - Erfassen von Screenshots - Anzeigen von Konsolenprotokollen - Untersuchen von Netzwerkanfragen - Debuggen fehlgeschlagener Tests ## Verwendungsbeispiele ### Beispiel 1: Grundlegender Navigationstest ```javascript // Navigieren zu einer Seite und Titel überprüfen await page.goto('http://localhost:3000'); const title = await page.title(); console.log('Seitentitel:', title); ``` ### Beispiel 2: Formularinteraktion ```javascript // Formular ausfüllen und absenden await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### Beispiel 3: Screenshot-Erfassung ```javascript // Screenshot für Debugging erfassen await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## Richtlinien 1. **Immer überprüfen, dass die App läuft** - Stellen Sie sicher, dass der lokale Server vor dem Ausführen von Tests erreichbar ist 2. **Explizite Wartezeiten verwenden** - Warten Sie auf Elemente oder Navigation, bevor Sie interagieren 3. **Screenshots bei Fehlern erfassen** - Nehmen Sie Screenshots auf, um Probleme zu debuggen 4. **Ressourcen bereinigen** - Schließen Sie den Browser immer, wenn Sie fertig sind 5. **Zeitüberschreitungen elegant behandeln** - Setzen Sie angemessene Timeouts für langsame Operationen 6. **Inkrementell testen** - Beginnen Sie mit einfachen Interaktionen, bevor Sie komplexe Abläufe testen 7. **Selektoren weise verwenden** - Bevorzugen Sie data-testid oder rollenbasierte Selektoren gegenüber CSS-Klassen ## Häufige Muster ### Muster: Auf Element warten ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### Muster: Prüfen, ob ein Element existiert ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### Muster: Konsolenprotokolle abrufen ```javascript page.on('console', msg => console.log('Browser-Protokoll:', msg.text())); ``` ### Muster: Fehler behandeln ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## Einschränkungen - Erfordert eine Node.js-Umgebung - Kann keine nativen mobilen Apps testen (verwenden Sie stattdessen React Native Testing Library) - Kann Probleme mit komplexen Authentifizierungsabläufen haben - Einige moderne Frameworks erfordern möglicherweise spezifische Konfiguration