Automatisierung der Qualitätssicherung von Webanwendungen mit Claude Desktop: Ein praktischer Leitfaden

Vollständiges Transkript? Öffnen Sie die Video-Watch-Seite.

Sie haben soeben einen wichtigen Hotfix auf die Staging-Umgebung übertragen. Jetzt kommt der Teil, den Sie fürchten: sich anmelden, zur Einstellungsseite navigieren, ein Profil aktualisieren und prüfen, ob die Erfolgsmeldung angezeigt wird.

Das dauert zehn Minuten. Man macht das fünfmal am Tag. Das ist fast eine Stunde deines Lebens, die du damit verschwendest, immer wieder auf dieselben Schaltflächen zu klicken.

Herkömmliche Automatisierungstools wie Selenium oder Cypress sind zwar leistungsstark, aber anfällig. Wenn man eine CSS-Klasse ändert oder eine Schaltfläche verschiebt, funktioniert das Skript nicht mehr. Man verbringt mehr Zeit mit der Pflege des Tests als mit der Behebung des Fehlers.

Hier ist, wo Claude Desktop und dessen Computernutzung Diese Funktion verändert die Spielregeln.

Im Gegensatz zu einem Skript, das blindlings Code-Selektoren folgt, „sieht“ Claude Ihren Bildschirm. Es liest die Benutzeroberfläche wie ein Mensch. Wenn Sie die Schaltfläche „Speichern“ nach links verschieben, sieht Claude dies und klickt trotzdem darauf.

So machen Sie Claude zu Ihrem automatisierten QA-Ingenieur.

Der Unterschied zwischen skriptgesteuerter Qualitätssicherung und KI-Agenten

Bevor wir damit beginnen, müssen Sie verstehen, dass ein Umdenken erforderlich ist.

Skriptgesteuerte Automatisierung (herkömmlich):

• Anleitung: "Element suchen #submit-btn-01 und klicken Sie."
• Fehlerart: Entwickler benennt ID um in #submit-btn-02. Das Skript schlägt fehl.
• Wartung: Hoch.

KI-Agent-Automatisierung (Claude):

• Anleitung: „Klicken Sie auf die blaue Schaltfläche mit der Aufschrift ‚Änderungen speichern‘.“
• Fehlerart: Die Schaltfläche wird vollständig entfernt.
• Wartung: Niedrig.

Claude nutzt eine Funktion namens Computernutzung. Es erstellt einen Screenshot Ihres Bildschirms, analysiert die Koordinaten der Elemente und sendet einen Befehl zum Bewegen der Maus und zum Klicken. Es ist langsamer als ein Skript, aber unendlich viel anpassungsfähiger.

Wichtigste Erkenntnis: Ersetzen Sie nicht Ihre gesamte Regressionssuite durch KI. Nutzen Sie Claude für Visuelle Qualitätssicherung und Rauchprüfung—Prüfungen, die ein menschenähnliches Urteilsvermögen erfordern („Sieht dieses Layout fehlerhaft aus?“) und nicht nur eine reine Codeüberprüfung.

Voraussetzungen

Um dieser Anleitung zu folgen, reicht es nicht aus, nur das Standard-Chatfenster zu verwenden. Du benötigst eine Umgebung, in der Claude die Berechtigung hat, deine Peripheriegeräte zu steuern.

Derzeit ist die zuverlässigste Methode, dies für die Qualitätssicherung durchzuführen, die Verwendung der Referenzimplementierung für die anthropische Computernutzung (in Docker ausgeführt) oder eine Verbindung herstellen Claude Desktop an einen Browser über das Model Context Protocol (MCP).

In dieser Anleitung konzentrieren wir uns auf die Docker-Methode da es eine sichere, isolierte Umgebung bietet, in der der Agent arbeiten kann, ohne dass Ihre persönlichen Dateien versehentlich gelöscht werden.

Was Sie benötigen:

1. Ein Anthropic-API-Schlüssel (mit Zugang zu claude-3-5-sonnet oder höher).
2. Docker Desktop auf Ihrem Rechner installiert.
3. Eine Web-App (Staging oder Localhost) zum Testen.

Schritt 1: Starten der Agent-Umgebung

Wir müssen einen Container starten, in dem Claude „leben“ und auf einen Browser zugreifen kann. Öffne dein Terminal.

Wenn Sie das offizielle Anthropic-Quickstart-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 das Programm läuft, navigieren Sie zu http://localhost:8080. Es erscheint ein geteilter Bildschirm: links die Chat-Oberfläche, rechts eine virtuelle Desktop-Ansicht des Computers des Agenten.

Schritt 2: Erstellung des QA-Testplans (Die Aufgabenstellung)

Der Erfolg Ihrer KI-Qualitätssicherung hängt vollständig von Ihrer Eingabe ab. Wenn Sie sich vage ausdrücken, wird Claude verwirrt sein. Sie müssen eine Testskript in natürlicher Sprache.

Hier ist eine Vorlage, die sich gut für die Qualitätssicherung 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: Geben Sie immer eine konkrete Überprüfungsschritt. Ein KI-Agent könnte auf „Speichern“ klicken und davon ausgehen, dass der Vorgang abgeschlossen ist, selbst wenn der Server einen 500-Fehler zurückgibt. Zwingen Sie ihn dazu, nach einer Erfolgsmeldung zu suchen.

Schritt 3: Durchführung und Überwachung

Füge deinen Befehl in das Chatfenster ein.

Und jetzt pass auf, wie die Magie wirkt. Auf der rechten Seite deines Bildschirms siehst du, wie sich die virtuelle Maus bewegt. Sie öffnet den Browser. Sie gibt die URL ein.

Worauf Sie achten sollten:

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

Falls Claude nicht weiterkommt (z. B. weil er auf das falsche Feld geklickt hat), kannst du im Chat eingreifen: „Du hast auf die Suchleiste statt auf das Feld für den Benutzernamen geklickt. Suche nach dem Feld mit der Bezeichnung ‚E-Mail‘.“

Genau dieser Eingriff ist der Grund dafür, dass Sie bei einem vollständigen Regressionslauf immer noch am Schreibtisch sitzen müssen. Wenn Sie einen langen Lauf lieber von einem anderen Ort aus verfolgen möchten, bietet die Terminal-Seite von Claude eine speziell dafür entwickelte Lösung: Remote Control spiegelt eine laufende Claude-Code-Sitzung auf Ihr Smartphone, einschließlich der Abfragen, auf die sie wartet.

Schritt 4: Auswertung der Ergebnisse

Sobald der Mitarbeiter „PASS“ meldet, überprüfen Sie den von ihm erstellten Screenshot.

Diese visuelle Bestätigung ist entscheidend. Manchmal ist eine Seite technisch gesehen Es funktioniert (die Anfrage hat den Status „200 OK“ zurückgegeben), aber die Benutzeroberfläche sieht furchtbar aus – Schaltflächen überlappen sich, der Text ist falsch ausgerichtet.

Da Claude sich Screenshots ansieht, kannst du ihm qualitative Fragen stellen:

• „Wirkte das Layout überladen?“
• „War die Schaltfläche ‚Speichern‘ ohne Scrollen sichtbar?“

Das ist Visuelle Qualitätssicherung, was mit Selenium nicht ohne Weiteres möglich ist.

Die Kosten unter der Lupe

Die Automatisierung der Qualitätssicherung mit KI ist nicht kostenlos. Anders als bei der lokalen Ausführung eines Python-Skripts beinhaltet jeder Schritt, den Claude ausführt, das Senden eines Screenshots an die API (Verbrauch von Eingabetoken) und das Erzeugen einer Mausbewegung (Ausgabetoken).

Sehen wir uns den Kostenvergleich für einen Standardtest „Anmelden und Profil aktualisieren“ an.

Realitätscheck: Zwar klingen 1,20 Dollar pro Test im Vergleich zu einem Menschen günstig, im Vergleich zu einem herkömmlichen Code-Skript (0,00 Dollar) sind sie jedoch teuer. Verwenden Sie Claude für komplexe, fehleranfällige UI-Tests, nicht um zu prüfen, ob 1+1=2.

Wann sollte man Claude statt herkömmlicher Automatisierung einsetzen?

Werft eure Cypress-Skripte noch nicht weg. Hier ist das Entscheidungsmodell:

Häufige Fallstricke, die es zu vermeiden gilt

1. Die „Schleife des Todes“

Manchmal übersieht Claude einen Klick auf eine Schaltfläche, bemerkt nicht, dass sich die Seite geändert hat, und versucht, noch einmal darauf zu klicken. Und noch einmal. Behebung: Fügen Sie Ihrer Eingabeaufforderung eine Einschränkung hinzu: „Maximal 3 Versuche pro Schritt. Bei Fehlschlag anhalten und Fehler melden.“

2. Grenzen des Kontextfensters

Visuelle Daten (Screenshots) sind sehr tokenintensiv. Wenn sich Ihre Testsitzung über 50 Schritte hinzieht, könnten Sie an die Kontextgrenze des Modells stoßen, was dazu führt, dass es die ursprünglichen Anweisungen „vergisst“. Behebung: Halten Sie die Testszenarien kurz und modular. Testen Sie „Anmeldung“ getrennt von „Kasse“.

3. Offenlegung von Anmeldedaten

Niemals Geben Sie die Anmeldedaten des Produktionsadministrators in Ihre Eingabeaufforderung ein. Behebung: Verwenden Sie Testkonten, die speziell für die Staging-Umgebung erstellt wurden und über eingeschränkte Berechtigungen verfügen.

Fazit

Der Einsatz von Claude Desktop für die Qualitätssicherung ist nicht nur ein cooler Partytrick – er ist eine praktische Lösung für das Problem der „instabilen Tests“. Er schließt die Lücke zwischen manuellen Tests durch Menschen und starrer Code-Automatisierung.

Man muss kein Python-Experte sein, um diese Tests zu erstellen. Man muss lediglich die Aufgabe gut erklären können – und genau das tun Sie ja bereits für Ihr menschliches Team.

Das Wichtigste auf einen Blick:

• Verwenden Sie Claude für Visuelle Qualitätssicherung wo herkömmliche Skripte leicht versagen.
• Tests in einer Docker-Sandbox um Ihren lokalen Rechner zu schützen.
• Tests aufbewahren kurz und modular um Token-Beschränkungen zu vermeiden.
• Überprüfen Sie das Ergebnis „PASS“ stets mit einem Screenshot.

Fang mit deinem nervigsten, sich ständig wiederholenden Testfall an – dem, der jedes Mal fehlschlägt, wenn du eine CSS-Klasse änderst. Überlass das Claude und hol dir diese Stunde deines Lebens zurück.

Vereinbaren Sie eine Demo mit Evalics Erfahren Sie, wie wir maßgeschneiderte QA-Agenten entwickeln, die sich an Ihr Produkt anpassen lassen.

Weiterführende Ressourcen

• Was ist ein API-Schlüssel? Ein einfacher Leitfaden zur KI-Automatisierung
• KI-Agenten vs. Automatisierungen
• Selbst entwickeln oder kaufen: KI-Automatisierung
• Einführung in Claude: Code Agent-CLI-Tool

Offizielle Quellen

• Dokumentation zur Nutzung anthropischer Computer
• Anleitung zur Installation von Docker Desktop
• Überblick über das Model Context Protocol (MCP)