KI-Werkzeuge können in wenigen Minuten ein Formular, einen Preisrechner oder einen interaktiven Abschnitt für eine Website erzeugen. Das Ergebnis sieht im ersten Browserfenster oft überzeugend aus. Ob es unter realen Bedingungen funktioniert, sicher mit Eingaben umgeht und später noch wartbar ist, zeigt sich aber erst beim Testen.
Eine kleine, feste Prüfroutine kann sinnvoller als blindes Vertrauen in den generierten Code sein. Die folgenden fünf Tests lassen sich auch ohne große Entwicklungsabteilung durchführen. Wichtig: Neue Snippets gehören zunächst in eine Testumgebung oder lokale Kopie, nicht direkt auf die produktive Website.
1. Die Kernfunktion mit echten und falschen Eingaben testen
Beginnen Sie nicht mit dem Quellcode, sondern mit dem gewünschten Ergebnis. Was soll der Baustein zuverlässig tun? Bei einem Kontaktformular sind das beispielsweise: Pflichtfelder prüfen, eine verständliche Fehlermeldung zeigen, die Nachricht genau einmal versenden und anschließend eine Bestätigung ausgeben.
Testen Sie mindestens diese Fälle:
- vollständige, gültige Angaben;
- leere Pflichtfelder;
- ungewöhnlich lange Texte;
- Umlaute, Sonderzeichen und kopierten Text;
- Doppelklick auf den Senden-Button;
- Abbruch oder langsame Verbindung.
2. Darstellung und Bedienung auf kleinen Bildschirmen prüfen
Verkleinern Sie nicht nur das Browserfenster. Öffnen Sie die Seite auf einem echten Smartphone und testen Sie Hoch- sowie Querformat. KI-generiertes CSS verwendet häufig feste Breiten, zu kleine Abstände oder Elemente, die sich gegenseitig überlagern.
Eine kurze Sichtprüfung sollte folgende Fragen beantworten:
- Bleiben Text und Schaltflächen ohne seitliches Scrollen lesbar?
- Sind Eingabefelder groß genug und mit dem Finger gut erreichbar?
- Bleibt eine Fehlermeldung am zugehörigen Feld sichtbar?
- Verdeckt die Bildschirmtastatur den Absende-Button?
- Funktioniert der Baustein auch bei vergrößerter Schrift?
Testen Sie außerdem mindestens zwei Browser-Engines, zum Beispiel Chrome und Safari oder Firefox. MDN beschreibt Cross-Browser-Tests als Prüfung über verschiedene Browser, Geräte und Bedienhilfen hinweg. Nicht jede moderne CSS- oder JavaScript-Funktion ist überall identisch verfügbar.
3. Tastatur, Fokus und Fehlermeldungen kontrollieren
Legt die KI einen hübschen Button als nicht semantisches <div> an, kann er mit der Maus funktionieren und für Tastaturnutzer trotzdem unerreichbar sein. Ziehen Sie deshalb die Maus ab und bedienen Sie den gesamten Abschnitt nur mit Tabulator, Umschalt+Tabulator, Enter und Leertaste.
Der Fokus muss sichtbar sein und in einer nachvollziehbaren Reihenfolge wandern. Dialogfenster dürfen den Fokus nicht „verschlucken“. Jedes Formularfeld braucht eine eindeutige Beschriftung; Hinweise allein als Platzhalter reichen nicht. Fehler sollten nicht nur rot markiert, sondern in Textform benannt werden.
Die W3C-Einstiegsprüfung zur Barrierefreiheit umfasst unter anderem Tastaturbedienung, Fokus, Alternativtexte und Farbkontrast. Das ist kein vollständiges Audit, findet aber viele typische Mängel in generierten Komponenten schnell.
4. Sicherheitskritische Stellen im Code suchen
Jetzt lohnt der Blick in den Code. Suchen Sie nach allen Stellen, an denen Nutzereingaben verarbeitet, in die Seite geschrieben, an eine Datenbank gesendet oder an externe Dienste übertragen werden. Besonders kritisch sind hart codierte Zugangsdaten, ungefiltertes HTML, dynamisch zusammengesetzte Datenbankabfragen und weitreichende Berechtigungen.
| Prüffrage | Warnsignal |
|---|---|
| Wo werden Eingaben geprüft? | Nur JavaScript im Browser |
| Wie erscheinen Eingaben wieder auf der Seite? | Direktes Einfügen als HTML |
| Wo liegen Schlüssel und Passwörter? | Im öffentlich ausgelieferten Code |
| Welche Daten gehen an Dritte? | Unklare oder unnötig vollständige Übertragung |
| Welche Rechte benötigt der Baustein? | Mehr Rechte als für die Funktion erforderlich |
Die OWASP-Checkliste für sichere Code-Reviews empfiehlt ausdrücklich die Prüfung von Eingabevalidierung, Ausgabekodierung, DOM-Manipulation, Authentifizierung und Berechtigungen. Automatische Scanner helfen, ersetzen aber nicht die menschliche Prüfung der Geschäftslogik.
5. Ladezeit, Fehlerzustand und Rückbau testen
Ein Baustein ist nicht fertig, wenn er im Idealfall läuft. Simulieren Sie eine langsame Verbindung, blockieren Sie testweise einen externen Dienst und beobachten Sie die Browser-Konsole. Bleibt die restliche Seite bedienbar? Erhält der Nutzer eine verständliche Meldung? Werden Anfragen unkontrolliert wiederholt?
Prüfen Sie außerdem die Seitengeschwindigkeit vor und nach dem Einbau. Die Google-Dokumentation zu Core Web Vitals und Messwerkzeugen unterscheidet sinnvoll zwischen Labortests zur Diagnose und Felddaten aus echten Besuchen. Für einen ersten Vergleich reicht ein wiederholter Labortest; nach dem Start sollten reale Nutzungsdaten beobachtet werden.
Dokumentieren Sie zuletzt den Rückweg: Welche Dateien, Snippets, Plugins oder Einstellungen wurden geändert? Gibt es eine Sicherung? Lässt sich die Funktion deaktivieren, ohne die Seite zu beschädigen? Wer einen KI-Baustein in WordPress oder eine individuelle Website integriert, sollte diese Fragen bereits vor dem Einbau klären. Die Konzeption und technische Umsetzung von Websites gehören genau deshalb zusammen: Eine sichtbare Funktion ist nur ein Teil des Ergebnisses.
Eine kompakte Freigaberegel
Geben Sie KI-generierten Website-Code erst frei, wenn die Kernfunktion mit Grenzfällen arbeitet, die Bedienung mobil und per Tastatur möglich ist, Nutzereingaben serverseitig abgesichert sind, die zusätzliche Last vertretbar bleibt und ein dokumentierter Rückbau existiert. Scheitert einer dieser Punkte, ist Nacharbeit nötig – auch dann, wenn der erste Entwurf optisch bereits fertig wirkt.