QA von Webanwendungen mit Claude Desktop automatisieren: Ein praktischer Leitfaden

Sie haben gerade einen kritischen Hotfix in den Staging-Bereich übertragen. Jetzt kommt der gefürchtete Teil: Anmelden, zur Einstellungsseite navigieren, ein Profil aktualisieren und prüfen, ob der Erfolgs-Toast erscheint.

Es dauert zehn Minuten. Sie machen das fünfmal am Tag. Das ist fast eine Stunde Ihres Lebens, die Sie durch das Klicken auf dieselben Tasten verlieren.

Herkömmliche Automatisierungstools wie Selenium oder Cypress sind zwar leistungsfähig, aber sie sind spröde. Wenn Sie eine CSS-Klasse ändern oder eine Schaltfläche verschieben, bricht das Skript ab. Sie verbringen mehr Zeit damit, den Test zu pflegen, als den Fehler zu beheben.

Dies ist der Ort, an dem Claude Schreibtisch und seine Computereinsatz Fähigkeit verändert das Spiel.

Im Gegensatz zu einem Skript, das blindlings den Codeselektoren folgt, "sieht" Claude Ihren Bildschirm. Er liest die Oberfläche wie ein Mensch. Wenn Sie die Schaltfläche "Speichern" nach links verschieben, sieht Claude sie und klickt sie trotzdem an.

Hier erfahren Sie, wie Sie Claude zu Ihrem automatischen QA-Ingenieur machen.

Der Unterschied zwischen skriptgesteuerter QA und KI-Agenten

Bevor wir dies in die Wege leiten, müssen Sie verstehen, wie sich die Denkweise ändert.

Skriptgesteuerte Automatisierung (traditionell):

• Unterweisung: "Element finden #submit-btn-01 und klicken."
• Versagensmodus: Entwickler benennt ID um in #submit-btn-02. Das Skript schlägt fehl.
• Wartung: Hoch.

AI Agent Automation (Claude):

• Unterweisung: "Klicken Sie auf die blaue Schaltfläche mit der Aufschrift 'Änderungen speichern'.
• Versagensmodus: Die Schaltfläche wird vollständig entfernt.
• Wartung: Niedrig.

Claude verwendet eine Fähigkeit namens Computereinsatz. Es macht einen Screenshot Ihres Bildschirms, analysiert die Koordinaten der Elemente und sendet einen Befehl, um die Maus zu bewegen und zu klicken. Es ist langsamer als ein Skript, aber unendlich viel anpassungsfähiger.

Wichtige Erkenntnis: Ersetzen Sie nicht Ihre gesamte Regressionssuite durch KI. Verwenden Sie Claude für Visuelle QA und Rauchtest-Prüfungen, die ein menschliches Urteilsvermögen erfordern ("Sieht dieses Layout kaputt aus?") und nicht nur eine Codeüberprüfung.

Voraussetzungen

Um dieser Anleitung zu folgen, verwenden Sie nicht nur das Standard-Chatfenster. Sie benötigen eine Umgebung, in der Claude die Erlaubnis hat, Ihre Peripheriegeräte zu steuern.

Derzeit ist die stabilste Methode, dies für QA auszuführen, die Verwendung der Anthropic Computer Use Reference Implementation (läuft in Docker) oder die Verbindung Claude Schreibtisch an einen Browser über das Model Context Protocol (MCP).

In diesem Leitfaden werden wir uns auf die Docker-Methode da es dem Agenten eine sichere Sandkastenumgebung bietet, in der er arbeiten kann, ohne versehentlich Ihre persönlichen Dateien zu löschen.

Was Sie brauchen:

1. Eine Anthropischer API-Schlüssel (mit Zugang zu claude-3-5-sonnet oder später).
2. Docker-Desktop auf Ihrem Rechner installiert.
3. Eine Webanwendung (Staging oder localhost) zum Testen.

Schritt 1: Starten der Agentenumgebung

Wir müssen einen Container aufsetzen, in dem Claude "leben" und auf einen Browser zugreifen kann. Öffnen Sie Ihr Terminal.

Wenn Sie das offizielle Anthropic-Schnellstart-Image verwenden, sieht der Befehl wie folgt aus:

export ANTHROPIC_API_KEY=%your_api_key%
docker run \
    -e ANTHROPIC_API_KEY=$ANTHROPIC_API_KEY \
    -v $HOME/.anthropic:/home/computeruse/.anthropic \
    -p 8080:8080 \
    -p 8501:8501 \
    -it ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo-latest

Sobald es läuft, navigieren Sie zu http://localhost:8080. Sie sehen einen geteilten Bildschirm: links eine Chat-Oberfläche, rechts eine virtuelle Desktop-Ansicht des Rechners des Agenten.

Schritt 2: Entwurf des QA-Testplans (Die Aufforderung)

Der Erfolg Ihrer KI-Qualitätssicherung hängt ganz von Ihrer Aufforderung ab. Wenn Sie vage sind, wird Claude verwirrt sein. Sie müssen eine Test-Skript in natürlicher Sprache.

Hier ist eine Vorlage, die sich gut für die QA von Webanwendungen eignet:

ROLE:
You are a meticulous QA Engineer. Your job is to verify user flows on a web application.

GOAL:
Test the "User Profile Update" flow on [URL].

STEPS:
1. Open Firefox and navigate to [URL].
2. Log in using username "testuser" and password "TestPass123!".
3. Navigate to the "Settings" tab in the dashboard.
4. Change the "Display Name" to "Claude Test [Timestamp]".
5. Click "Save Changes".
6. VERIFICATION: Wait for the green toast notification. Take a screenshot. Confirm the text says "Profile updated successfully".

CONSTRAINTS:
- If a page takes longer than 10 seconds to load, stop and report a timeout error.
- If you encounter a popup modal, close it before proceeding.
- Report the final status as PASS or FAIL clearly at the end.

Profi-Tipp: Fügen Sie immer eine spezifische Schritt der Verifizierung. Ein KI-Agent könnte auf "Speichern" klicken und davon ausgehen, dass der Auftrag erledigt ist, auch wenn der Server einen 500-Fehler zurückgibt. Zwingen Sie ihn dazu, nach einer Erfolgsmeldung zu suchen.

Schritt 3: Durchführung und Überwachung

Fügen Sie Ihre Eingabeaufforderung in das Chat-Fenster ein.

Beobachten Sie nun die Magie. Auf der rechten Seite Ihres Bildschirms sehen Sie, wie sich die virtuelle Maus bewegt. Sie öffnet den Browser. Sie gibt die URL ein.

Worauf Sie achten sollten:

• Latenzzeit: Beachten Sie, dass Claude zwischen den einzelnen Aktionen ein paar Sekunden braucht, um zu "denken" (den Screenshot zu verarbeiten).
• Fehlerbehandlung: Wenn ein Popup erscheint, das nicht in Ihrem Skript enthalten war, schließt Claude es dann? (Normalerweise ja - das ist der Vorteil von KI gegenüber Skripten).

Wenn Claude nicht weiterkommt (z. B. weil er das falsche Feld anklickt), können Sie im Chat eingreifen: "Sie haben auf die Suchleiste statt auf das Feld für den Benutzernamen geklickt. Suchen Sie nach dem Feld mit der Bezeichnung 'E-Mail'.

Schritt 4: Analysieren der Ergebnisse

Sobald der Agent "PASS" meldet, überprüfen Sie den Screenshot, den er gemacht hat.

Diese visuelle Bestätigung ist entscheidend. Manchmal ist eine Seite technisch funktioniert (die Anfrage wurde mit 200 OK gesendet), aber die Benutzeroberfläche sieht schrecklich aus - die Schaltflächen überlappen sich, der Text ist falsch ausgerichtet.

Da Claude sich Screenshots ansieht, können Sie ihm qualitative Fragen stellen:

• "Sah das Layout unübersichtlich aus?"
• "War die Schaltfläche zum Speichern ohne Scrollen sichtbar?"

Dies ist Visuelle QA etwas, was Selenium nicht ohne weiteres kann.

Der Kosten-Realitätscheck

Die Automatisierung der QA mit KI ist nicht kostenlos. Im Gegensatz zur lokalen Ausführung eines Python-Skripts muss Claude bei jedem Schritt einen Screenshot an die API senden (Eingabe-Token) und eine Mausbewegung erzeugen (Ausgabe-Token).

Schauen wir uns den Kostenvergleich für einen Standardtest "Anmeldung und Profil aktualisieren" an.

Realitätsprüfung: Während 1,20 $ pro Test im Vergleich zu einem Menschen billig klingt, ist es im Vergleich zu einem herkömmlichen Code-Skript (0,00 $) teuer. Verwenden Sie Claude für komplexe, fehlerhafte UI-Tests nicht zur Überprüfung, ob 1+1=2.

Wann sollte man Claude im Vergleich zur traditionellen Automatisierung einsetzen?

Werfen Sie Ihre Cypress-Skripte noch nicht weg. Hier ist der Entscheidungsrahmen:

Häufig zu vermeidende Fallstricke

1. Die "Schleife des Todes"

Manchmal verpasst Claude den Klick auf eine Schaltfläche, sieht nicht, dass sich die Seite ändert, und versucht, sie erneut zu klicken. Und wieder. Reparieren: Fügen Sie in Ihrer Eingabeaufforderung eine Einschränkung hinzu: "Maximal 3 Versuche pro Schritt. Wenn fehlgeschlagen, anhalten und Fehler melden."

2. Grenzen des Kontextfensters

Visuelle Daten (Screenshots) sind sehr tokenlastig. Wenn sich Ihre Testsitzung über 50 Schritte hinzieht, stoßen Sie möglicherweise an die Kontextgrenze des Modells, was dazu führt, dass es die ursprünglichen Anweisungen "vergisst". Reparieren: Halten Sie die Testszenarien kurz und modular. Testen Sie "Login" getrennt von "Checkout".

3. Lecks in den Zugangsdaten

Niemals Geben Sie die Anmeldedaten für den Produktionsadministrator in Ihre Eingabeaufforderung ein. Reparieren: Verwenden Sie Testkonten, die speziell für die Staging-Umgebung mit eingeschränkten Berechtigungen erstellt wurden.

Schlussfolgerung

Die Verwendung von Claude Desktop für die Qualitätssicherung ist nicht nur ein cooler Partytrick, sondern eine praktische Lösung für das Problem der "spröden Tests". Er überbrückt die Lücke zwischen manuellen Tests und rigider Code-Automatisierung.

Sie müssen kein Python-Experte sein, um diese Tests zu erstellen. Sie müssen nur gut darin sein, die Aufgabe zu erklären - was Sie ja bereits für Ihr menschliches Team tun.

Wichtigste Erkenntnisse:

• Verwenden Sie Claude für Visuelle QA wo herkömmliche Skripte leicht zerbrechen.
• Führen Sie Tests in einer Docker-Sandbox um Ihren lokalen Rechner zu schützen.
• Tests beibehalten kurz und modular um Token-Limits zu vermeiden.
• Überprüfen Sie das Ergebnis "PASS" immer mit einer Bildschirmfoto.

Beginnen Sie mit Ihrem lästigsten, sich wiederholenden Testfall - dem, der jedes Mal abbricht, wenn Sie eine CSS-Klasse ändern. Übergeben Sie ihn an Claude und holen Sie sich diese Stunde Ihres Lebens zurück.

Buchen Sie eine Demo mit Evalics um zu erfahren, wie wir kundenspezifische QA-Agenten entwickeln, die mit Ihrem Produkt skalieren.

Verwandte Ressourcen

• was-ist-ein-api-schlüssel-ein-einfacher-leitfaden-für-ai-automation
• ai-agents-vs-automations
• Bauen-gegen-Kaufen-Automatisierung
• einführung-zu-claude-code-agentic-cli-tool

Offizielle Quellen

• Dokumentation der anthropischen Computernutzung
• Docker Desktop Installationsanleitung
• Überblick über das Model Context Protocol (MCP)