KI-gestützte Webformular-Tests: Ein Chrome-Tool revolutioniert das QA-Management

Ein Softwareentwickler hat ein Chrome-Plugin namens QA Helper entwickelt, das den manuellen Testprozess von Webformularen mit künstlicher Intelligenz automatisiert. Das Tool analysiert Anforderungsdokumente, generiert Testfälle und simuliert menschliches Verhalten, um Formulare vollständig zu durchlaufen – inklusive Validierungsprüfungen und Fehlerberichterstattung.

Warum manuelle Webformular-Tests ein veraltetes Modell sind

In vielen Unternehmen – insbesondere in Branchen wie Bankwesen, Versicherungen oder öffentlichen Dienstleistungen – werden Webformulare noch immer manuell getestet. QA-Teams durchlaufen dabei jeden einzelnen Schritt: Felder ausfüllen, Dropdowns bedienen, Validierungsmeldungen prüfen und schließlich die erfolgreiche Übermittlung bestätigen. Bei komplexen Formularen kann dieser Prozess mehrere Stunden in Anspruch nehmen. Jede Änderung im Code erfordert eine erneute Durchführung – ein zeitaufwendiger und fehleranfälliger Zyklus.

Genau hier setzt QA Helper an. Statt menschliche Tester zu ersetzen, soll die Technologie sie von repetitiven Aufgaben entlasten und die Testabdeckung durch KI-gestützte Automatisierung verbessern. Der Entwickler hinter dem Projekt, Denyse, betont: „Der Fokus lag darauf, ein Werkzeug zu schaffen, das zunächst mit einfachen Formularen beginnt und sich schrittweise zu komplexeren Strukturen weiterentwickelt.“

Die Funktionsweise: Von der KI-Generierung zur automatisierten Ausführung

Die Arbeitsweise von QA Helper lässt sich in drei zentrale Schritte unterteilen:

1\. KI-generierte Testfälle aus Anforderungsdokumenten

Das Tool benötigt ein Software Requirements Document (SRD) als Eingabe. Mithilfe von Sprachmodellen wie Groq oder OpenAI werden daraus Testfälle abgeleitet, die typische Prüfpunkte abdecken:

• Pflichtfeldvalidierung
• Formatprüfungen (z. B. E-Mail-Adressen, Telefonnummern)
• Konditionelle Felder (abhängig von vorherigen Eingaben)
• Erfolgreiche Übermittlung des Formulars
• Konsistenzprüfung von Labels und Beschriftungen

Diese Testfälle bilden die Grundlage für die anschließende automatisierte Ausführung.

2\. Interaktion mit dem Formular wie ein menschlicher Tester

Nach der Generierung der Testfälle öffnet der Nutzer das zu prüfende Formular im Chrome-Browser und startet den Testvorgang über das Plugin. QA Helper übernimmt nun die Steuerung:

• Felder werden nacheinander mit simulierten Benutzereingaben gefüllt.
• Dropdowns werden geöffnet und Optionen ausgewählt.
• Validierungsmeldungen werden erfasst und auf Fehler analysiert.
• Bei Misserfolgen werden Screenshots erstellt und im Bericht dokumentiert.

Der entscheidende Unterschied zu herkömmlichen Automatisierungstools: QA Helper ahmt nicht nur das Ausfüllen von Feldern nach, sondern simuliert das gesamte Nutzerverhalten – inklusive der notwendigen DOM-Events, die Frameworks wie Angular für die interne Zustandssynchronisation benötigen.

3\. Automatisierte Berichterstellung und Datenexport

Nach Abschluss des Tests erhält der Nutzer einen detaillierten Pass/Fail-Bericht direkt in der Plugin-Oberfläche. Zusätzlich können die Ergebnisse als Excel-Datei exportiert werden, um sie in bestehende QA-Prozesse zu integrieren. Aktuell unterstützt das Tool einfache, einteilige Formulare, während die Erweiterung auf mehrteilige Formulare in Arbeit ist.

Die größte Herausforderung: Angular-Formulare korrekt ausfüllen

Die technische Hürde bei der Entwicklung von QA Helper war nicht die KI-Integration oder die Plugin-Architektur, sondern die spezifischen Anforderungen von Angular-Formularen. Im Gegensatz zu einfachen HTML-Formularen, bei denen man Werte direkt setzen und Events auslösen kann, funktioniert das bei Angular nicht so einfach.

Angular setzt auf reactive Formulare, die einen eigenen internen Zustand verwalten. Dieser Zustand aktualisiert sich nur, wenn die richtigen DOM-Events – wie input, change oder blur – ausgelöst werden. Ein einfaches Setzen des Feldwerts per JavaScript führt dazu, dass das Formular zwar optisch gefüllt erscheint, Angular aber weiterhin den ursprünglichen Zustand annimmt und daher eine leere Eingabe meldet.

Lösungsansatz: Framework-konforme Event-Simulation

Um Angular davon zu überzeugen, dass ein Feld tatsächlich ausgefüllt wurde, musste QA Helper eine simulierte Nutzerinteraktion durchführen. Drei Beispiele zeigen, wie das im Detail funktioniert:

#### Textfelder: Schrittweise Eingabe mit Event-Triggering

Für Standard-Textfelder folgt das Plugin diesem Ablauf:

// Beispiel für ein Textfeld
const inputField = document.querySelector('input');

// 1. Fokus setzen und Feld leeren
inputField.focus();
inputField.value = '';

// 2. Wert characterweise eingeben und Events auslösen
const value = 'Testwert123';
for (let char of value) {
  inputField.value += char;
  inputField.dispatchEvent(new Event('input', { bubbles: true }));
}

// 3. Finalen Input- und Change-Event auslösen
inputField.dispatchEvent(new Event('input', { bubbles: true }));
inputField.dispatchEvent(new Event('change', { bubbles: true }));

// 4. Feld verlassen, um Blur-Event zu triggern
inputField.blur();

Diese Methode simuliert das Verhalten eines Nutzers, der langsam tippt, und stellt sicher, dass Angular die Eingabe erkennt.

#### Angular-spezifische Dropdowns (ng-select): Interaktion über DOM-Manipulation

Angular-Komponenten wie ng-select besitzen keine direkte API zum Setzen von Werten. Stattdessen muss das Plugin die Dropdown-Logik manuell auslösen:

// ng-select-Dropdown öffnen
const dropdownContainer = document.querySelector('.ng-select');
dropdownContainer.click();

// Warten, bis die Optionen geladen sind
await new Promise(resolve => setTimeout(resolve, 500));

// Gewünschte Option auswählen
const option = document.querySelector('.ng-option');
option.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
option.click();

Durch das Auslösen von mouseenter- und click-Events wird Angular signalisiert, dass ein Nutzer eine Auswahl getroffen hat. Die Komponente aktualisiert daraufhin ihren internen Zustand.

#### Radiobuttons und Datumspicker: Vereinfachte Event-Handling

Bei einfachen HTML-Elementen wie Radiobuttons oder Standard-Datumspickern reicht es oft aus, die click()-Methode aufzurufen und die entsprechenden Events auszulösen:

// Radiobutton auswählen
const radioButton = document.querySelector('input[type="radio"]');
radioButton.click();
radioButton.dispatchEvent(new Event('change', { bubbles: true }));

// Datumspicker (Beispiel)
datePicker.value = '2024-05-15';
datePicker.dispatchEvent(new Event('input', { bubbles: true }));
datePicker.dispatchEvent(new Event('change', { bubbles: true }));

Technische Umsetzung: Ein Tool mit bewusster Einfachheit

Die Architektur von QA Helper wurde bewusst schlank gehalten, um Wartbarkeit und Erweiterbarkeit zu priorisieren:

• Chrome-Erweiterung: Vanilla JavaScript mit Content-Script und Popup-Logik
• Backend: Node.js für die Verarbeitung der Testfälle
• Dashboard: React-basierte Oberfläche, gehostet auf Render
• KI-Integration: Aktuell Kombination aus Groq und OpenAI, geplanter Wechsel zu Google Gemini
• Ausgabeformate: Pass/Fail-Bericht im Dashboard, Screenshots bei Fehlern, Excel-Export

Der Entwickler betont, dass die Wahl der Technologien nicht auf Innovation, sondern auf Zuverlässigkeit und Skalierbarkeit abzielte. Die eigentliche Innovation liegt in der Art und Weise, wie das Tool mit Angular-Formularen interagiert – ein Problem, das viele Automatisierungstools bisher nicht zufriedenstellend lösen konnten.

Ausblick: Multi-Section-Formulare und erweiterte KI-Fähigkeiten

Aktuell befindet sich QA Helper noch in einer frühen Phase. Die nächste große Entwicklungsstufe umfasst die Unterstützung von mehrteiligen Formularen, die komplexe Nutzerpfade und Abhängigkeiten zwischen Abschnitten beinhalten. Zudem arbeitet das Team an einer erweiterten KI, die nicht nur Testfälle generiert, sondern auch Fehlerursachen automatisch analysiert und Verbesserungsvorschläge liefert.

Langfristig könnte das Tool nicht nur in der QA-Abteilung von Denyses Unternehmen, sondern in der gesamten Tech-Branche Anwendung finden. Besonders in regulierten Umgebungen, wo manuelle Tests zeitaufwendig und fehleranfällig sind, könnte QA Helper eine effizientere Alternative bieten – ohne dabei die Qualität zu beeinträchtigen.

Mit diesem Projekt zeigt sich einmal mehr, wie künstliche Intelligenz nicht nur repetitive Aufgaben übernimmt, sondern auch die Art und Weise verändert, wie wir Software entwickeln und testen. Die Kombination aus KI, Web-Automatisierung und Framework-spezifischem Know-how könnte den Grundstein für eine neue Generation von QA-Tools legen.