Web-QA

VibeShift-Webtester

Dieses Projekt bietet einen KI-gestützten Agenten zur Optimierung von Webtest-Workflows, insbesondere für Entwickler, die KI-Codierungsassistenten wie GitHub Copilot, Cursor, Roo Code usw. verwenden. Er lässt sich über das MCP (Machine Command Protocol) direkt in diese Assistenten integrieren und ermöglicht Ihnen die Automatisierung der Testaufzeichnung, -ausführung und -erkennung mithilfe von Eingabeaufforderungen in natürlicher Sprache.

Das Problem: Das manuelle Testen von Webanwendungen nach der Codegenerierung mit KI-Assistenten ist zeitaufwändig und fehleranfällig. Darüber hinaus können KI-gesteuerte Codeänderungen unbeabsichtigt zu Regressionen bei zuvor funktionierenden Funktionen führen.

Die Lösung: Dieses Tool schließt die Lücke, indem es Ihrem KI-Codierungsassistenten Folgendes ermöglicht:

1. Zeichnen Sie neue Testabläufe auf: Beschreiben Sie eine Benutzerreise in natürlicher Sprache, und der Agent interagiert unter KI-Anleitung mit dem Browser (unter Verwendung von Playwright), um ein reproduzierbares Testskript (JSON-Format) zu generieren.
2. Vorhandene Tests ausführen: Führen Sie zuvor aufgezeichnete Testskripte aus, um Regressionstests durchzuführen und sicherzustellen, dass neue Codeänderungen die vorhandene Funktionalität nicht beeinträchtigt haben.
3. Entdecken Sie mögliche Testschritte: Crawlen Sie eine Website, analysieren Sie Seiten mithilfe von Vision und DOM-Struktur und bitten Sie einen LLM, relevante Testschritte für verschiedene Seiten vorzuschlagen.

Dadurch entsteht eine engere Feedbackschleife, die den Testprozess automatisiert und es dem KI-Assistenten (und dem Entwickler) ermöglicht, Probleme oder Regressionen schnell zu erkennen und zu beheben.

Demo (Klicken Sie hier, um diese Videos abzuspielen)

Merkmale

• MCP-Integration: Nahtlose Integration mit Cursor/Windsurf/Github Copilot/Roo Code
• KI-gestützte Testaufzeichnung: Generieren Sie Playwright-basierte Testskripte aus natürlichen Sprachbeschreibungen (im automatisierten Modus).
• Deterministische Testausführung: Führen Sie aufgezeichnete JSON-Testdateien zuverlässig mit Playwright aus.
• KI-gestützte Testerkennung: Durchsuchen Sie Websites und nutzen Sie jedes LLM (im OpenAI-kompatiblen Format), um Testschritte für erkannte Seiten vorzuschlagen.
• Regressionstests: Führen Sie vorhandene Test-Suiten einfach aus, um Regressionen zu erkennen.
• Automatisierte Feedbackschleife: Ausführungsergebnisse (einschließlich Fehler, Screenshots, Konsolenprotokolle) werden zurückgegeben und bieten dem KI-Assistenten direktes Feedback.
• Selbstheilung: Vorhandene Tests reparieren sich selbst, wenn sich der Code ändert. Eine manuelle Aktualisierung ist nicht erforderlich.
• UI-Tests: Auch UI-Tests, die nicht direkt von Playwright unterstützt werden, werden unterstützt. Beispielsweise: Check if the text is overflowing in the div
• Visuelle Regressionstests : Verwendung des traditionellen Pixelmatch- und Vision-LLM-Ansatzes.

So funktioniert es

1. Benutzer: Fordert seinen KI-Codierungsassistenten auf (z. B. „Zeichnen Sie einen Test für den Anmeldefluss auf“, „Führen Sie den Regressionstest ‚test_login.json‘ aus“).
2. AI Coding Agent: Erkennt die Absicht und verwendet MCP, um das entsprechende vom MCP Server bereitgestellte Tool aufzurufen.
3. MCP-Server: Leitet die Anfrage an die entsprechende Funktion weiter ( record_test_flow , run_regression_test , discover_test_flows , list_recorded_tests ).
4. Web-Test-Agent:
   • Aufzeichnung: Der WebAgent (im automatisierten Modus) interagiert mit dem LLM, um Schritte zu planen, steuert den Browser über BrowserController (Playwright), verarbeitet HTML/Vision und speichert die resultierenden Testschritte in einer JSON-Datei im Verzeichnis output/ .
   • Ausführung: Der TestExecutor lädt die angegebene JSON-Testdatei, verwendet BrowserController , um gemäß den aufgezeichneten Schritten mit dem Browser zu interagieren, und erfasst Ergebnisse, Screenshots und Konsolenprotokolle.
   • Erkennung: Der CrawlerAgent verwendet BrowserController und LLMClient , um Seiten zu crawlen und Testschritte vorzuschlagen.
5. Browser: Playwright steuert die eigentliche Browserinteraktion.
6. Feedback: Die Ergebnisse (Erfolg/Misserfolg, Dateipfade, Fehlermeldungen, erkannte Schritte) werden über den MCP-Server an den KI-Codierungsassistenten zurückgegeben, der sie dann dem Benutzer präsentiert.

Erste Schritte

Voraussetzungen

• Python 3.10+
• Zugriff auf alle LLMs (bei meinen Tests funktionierte Gemini 2.0 Flash kostenlos am besten)
• MCP installiert ( pip install mcp[cli] )
• Installierte Playwright-Browser ( playwright install )

Installation

1. Klonen Sie das Repository:
   git clone <repository-url> cd <repository-name>
2. Erstellen Sie eine virtuelle Umgebung (empfohlen):
   python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows
3. Installieren Sie Abhängigkeiten:
   pip install -r requirements.txt
4. Installieren Sie Playwright-Browser:
   playwright install --with-deps # Installs browsers and OS dependencies

Konfiguration

1. Benennen Sie die Datei .env.example im Stammverzeichnis des Projekts in die Datei .env um.
2. Fügen Sie Ihren LLM-API-Schlüssel und andere notwendige Details hinzu:
   # .env LLM_API_KEY="YOUR_LLM_API_KEY"
   • Ersetzen Sie YOUR_LLM_API_KEY durch Ihren tatsächlichen Schlüssel.

Hinzufügen des MCP-Servers

Fügen Sie dies zu Ihrer MCP-Konfiguration hinzu:

Lassen Sie diesen Server laufen, während Sie mit Ihrem KI-Codierungsassistenten interagieren.

Verwendung

Interagieren Sie mit dem Agenten über Ihren MCP-fähigen KI-Codierungsassistenten in natürlicher Sprache.

Beispiele:

• Einen Test aufzeichnen:

  „Zeichnen Sie einen Test auf: Gehen Sie zu https://practicetestautomation.com/practice-test-login/ , geben Sie „Student“ in das Feld „Benutzername“ ein, geben Sie „Password123“ in das Feld „Passwort“ ein, klicken Sie auf die Schaltfläche „Senden“ und vergewissern Sie sich, dass der Text „Herzlichen Glückwunsch, Student“ sichtbar ist.“

  • (Der Agent führt diese Aktionen automatisch aus und speichert eine test_....json Datei in output/ )
• Führen Sie einen Test durch:

  „Führen Sie den Regressionstest output/test_practice_test_login_20231105_103000.json aus“

  • (Der Agent führt die Schritte in der angegebenen Datei aus und meldet den PASS/FAIL-Status mit Fehlern und Details.)
• Entdecken Sie die Testschritte:

  „Entdecken Sie mögliche Testschritte ab https://practicetestautomation.com/practice/ “

  • (Der Agent durchsucht die Site, analysiert die Seiten und gibt für jede Seite vorgeschlagene Testschritte zurück.)
• Aufgezeichnete Tests auflisten:

  "Listen Sie die verfügbaren aufgezeichneten Webtests auf."

  • (Der Agent gibt eine Liste der im Verzeichnis output/ gefundenen .json Dateien zurück.)

Ausgabe:

• Aufgezeichnete Tests: Als JSON-Dateien im Verzeichnis output/ gespeichert (Format siehe test_schema.md ).
• Ausführungsergebnisse: Wird als JSON-Objekt zurückgegeben, das den Ausführungsvorgang zusammenfasst (Status, Fehler, Beweispfade). Die vollständigen Ergebnisse werden außerdem in output/execution_result_....json gespeichert.
• Ergebnisse der Erkennung: Wird als JSON-Objekt mit erkannten URLs und empfohlenen Schritten zurückgegeben. Die vollständigen Ergebnisse werden unter output/discovery_results_....json gespeichert.

Inspiration

• Browsernutzung : Die Generierung des Dom-Kontextbaums ist stark von ihnen inspiriert und wird angepasst, um statische, dynamische und visuelle Elemente zu berücksichtigen. Besonderer Dank gilt ihnen für ihren Beitrag zu Open Source.

Beitragen

Beiträge sind willkommen! Weitere Informationen zum Einstieg, zur Problemmeldung und zum Einreichen von Pull Requests finden Sie in CONTRIBUTING.md .

Lizenz

Dieses Projekt ist unter APACHE-2.0 lizenziert.