Automatisierte Tests in Playwright sind super praktisch, aber sie brechen oft, sobald sich CSS-Selektoren oder HTML-Strukturen ändern. Das bedeutet manuelles Anpassen von Tests – mühsam und fehleranfällig.
Mit Künstlicher Intelligenz lässt sich dieses Problem lösen: fehlgeschlagene Selektoren können automatisch erkannt und korrigiert werden. In diesem Beitrag möchte ich also genauer auf Self-Healing für automatisierte Tests eingehen.
Bevor wir Self-Healing direkt in Playwright einbauen, zeige ich ein Proof-of-Concept in reinem JavaScript. So sehen wir zuerst, dass die KI arbeitet und CSS-Selektoren zuverlässig vorschlagen kann.
Node.js-Projekt vorbereiten
Zuerst legen wir einen neuen Projektordner an und initialisieren ein Node.js-Projekt.
Anschließend installieren wir die Cohere-Bibliothek, die uns den Zugriff auf KI-Modelle ermöglicht:
mkdir self-healing
cd self-healing
npm init -y
npm install cohere-ai
package.json sollte ungefähr so aussehen:
-
Wir setzen
"type": "module", damit wir moderne ES-Module (import/export) in Node.js nutzen können. -
Die Cohere-Bibliothek wird später dafür verwendet, dass KI automatisch CSS-Selektoren analysiert und korrigiert.
-
Die Projektstruktur ist bewusst klein gehalten:
self-healing/als Projektordner,package.jsonfür Abhängigkeiten, und späterself-healing-test.jsfür den Testcode.
Datei: self-healing-test.js
In diesem ersten Proof-of-Concept-Skript simulieren wir ein kleines HTML-DOM und einen alten Selector, der in echten Tests absichtlich fehlschlagen würde. So sehen wir, wie die KI automatisch einen neuen, passenden Selector vorschlägt.
import cohere from "cohere-ai";
// Cohere API-Key
const apiKey = "_API_KEY_HIER";
cohere.apiKey = apiKey;
// Beispiel HTML-DOM
const DOM = `
<button> id="loginButtonNew" data-testid="login">Login </button>
`;
// Alter, absichtlich fehlerhafter Selector
const oldSelector = "#loginBtn";
Funktion für KI-gestützte Selector-Korrektur
Wir nutzen die Cohere-API mit der chat-Methode. Die KI erhält das HTML sowie den fehlgeschlagenen Selector und gibt ein JSON mit dem neuen CSS-Selector zurück.
// KI-gestützte Selector-Korrektur
async function getNewSelector(oldSel, html) {
const prompt = `
Der alte CSS-Selector ist fehlgeschlagen: "${oldSel}".
Finde basierend auf dem folgenden HTML den wahrscheinlich passenden neuen Selector.
Gib nur ein JSON zurück mit dem Feld "newSelector".
HTML:
${html}
`;
const response = await cohere.chat({
model: "command-a-03-2025",
messages: [{ role: "user", content: prompt }],
});
// KI-Antwort parsen
const aiText = response?.message?.content?.[0]?.text;
const parsed = JSON.parse(aiText.replace(/```json|```/g, "").trim());
console.log("✅ KI schlägt neuen Selector vor:", parsed.newSelector);
}
getNewSelector(oldSelector, DOM);
Erklärung:
-
Die KI analysiert den HTML-Code und erkennt, dass der alte Selector nicht existiert.
-
Sie gibt automatisch den korrekten neuen Selector zurück, der später in Tests verwendet werden kann.
Proof-of-Concept ausführen
Ich starte das Skript nun über node self-healing-test.js und siehe da: Die KI hat automatisch den richtigen Selector gefunden. In einem echten Playwright-Test könnten wir diesen also direkt verwenden, um den Test wieder zum Laufen zu bringen.
Zwischenfazit
-
Das Proof-of-Concept zeigt, dass die KI Selector-Probleme erkennen kann.
-
Der nächste Schritt: die gleiche Logik in Playwright-Tests integrieren, sodass fehlgeschlagene Selektoren automatisch korrigiert werden.
-
Vorteil: Tests bleiben stabil, und Entwickler müssen weniger manuell eingreifen.
Self-Healing direkt in Playwright testen
Nachdem wir im Proof-of-Concept gesehen haben, dass die KI automatisch CSS-Selektoren vorschlagen kann, können wir nun denselben Ansatz direkt in Playwright-Tests integrieren.
So können fehlgeschlagene Selektoren automatisch korrigiert werden, ohne dass wir manuell eingreifen müssen.
In diesem Schritt erstelle ich einen einfachen Playwright-Test für meine Website walter-test-engineering.de. Ich simuliere bewusst einen kaputten Selector (#searchButtonWrong), der das Such-Icon (siehe nachfolgend) nicht findet.
Der Test prüft zunächst, ob der alte Selector vorhanden ist.
Da der Selector absichtlich falsch ist, erkennt Playwright, dass das Element nicht existiert, und aktiviert die KI-basierte Self-Healing-Funktion.
Playwright-Test mit Self-Healing-Funktion
Hier sehen wir den Testcode, in dem wir zuerst versuchen, den alten Selector zu nutzen. Falls dieser nicht gefunden wird, fragt die KI automatisch nach einem neuen CSS-Selector, der das Element zuverlässig auswählt.
Testausführung
Mit folgendem Befehl können wir den Test direkt starten und Playwright den Browser sichtbar öffnen lassen:
-
Playwright prüft zuerst den alten Selector.
-
Wenn er nicht gefunden wird, fragt die KI nach einem neuen Selector.
-
Der neue Selector wird automatisch angewendet und das Element wird geklickt.
Erkenntnisse
In unserem Test auf walter-test-engineering.de hat die KI zuverlässig einen neuen Selector vorgeschlagen. Selbst wenn der alte Selector nicht existierte, konnte Playwright dank Self-Healing das Such-Icon erfolgreich anklicken.
Vorteile dieses Ansatzes:
-
Keine manuellen Anpassungen der Selektoren bei kleinen HTML-Änderungen mehr nötig.
-
Tests bleiben stabil, auch wenn sich die UI leicht verändert.
-
Entwickler sparen Zeit und Frustration – die KI übernimmt die erste Korrekturschicht.
Ausblick
Mit diesem Ansatz können wir nun:
-
Self-Healing in alle wichtigen Playwright-Tests einbauen.
-
Vorschläge der KI persistieren, sodass beim nächsten Lauf nur neue Änderungen korrigiert werden.
-
Den Mechanismus auf komplexere UI-Elemente erweitern (z. B. Formulare, Menüs, dynamische Buttons).
Der Proof-of-Concept ist damit vollständig in echte Testläufe überführt, und wir haben gezeigt, dass KI-gestützte Tests in Playwright tatsächlich stabiler und wartungsfreundlicher werden können.