Voraussetzungen

Für dieses Tutorial benötigst du:

• Ein funktionierendes Playwright-Setup (@playwright/test)
• Node.js (empfohlen: aktuelle LTS-Version)
• Einen AI-Anbieter oder eine Library wie @zerostep/playwright
• Einen API-Key (z. B. OpenAI, Cohere o. ä.)

Klassischer Test vs. KI-gesteuerter Test

Sobald dein Setup steht, wollen wir gemeinsam einen typischen Anwendungsfall durchspielen: den Besuch der Stepstone-Website, das Überprüfen des Seitentitels und den Wechsel der Sprache auf Deutsch. Zuerst zeige ich dir, wie das mit klassischem Playwright-Code funktioniert – danach ersetzen wir Schritt für Schritt Teile davon durch KI-basierte Befehle, die auf natürlicher Sprache basieren. So bekommst du ein Gefühl dafür, wie du KI nahtlos in deine bestehenden Tests integrieren kannst.

Klassischer Playwright-Test

import { test, expect } from "@playwright/test";

test("open Stepstone, has title and switches to German, check german title", async ({ page }) => {
  await page.goto("https://www.stepstone.com/");

  // Titel prüfen
  await expect(page).toHaveTitle(/We help companies to hire the right talent/);

  // Sprachmenü öffnen
  const languageButton = page.locator("button.language-switcher__button").first();
  await expect(languageButton).toBeVisible();
  await languageButton.click();

  // "Deutsch"-Link anklicken
  const germanLink = page.locator("ul.language-switcher__list li.lang-item-deutsch a").first();
  await expect(germanLink).toBeVisible();
  await germanLink.click();

  // Auf URL warten und deutschen Titel prüfen
  await page.waitForURL("**/deutsch/");
  await expect(page).toHaveURL(/deutsch/);
  await expect(page).toHaveTitle(/Wir helfen Unternehmen, die richtigen Talente zu finden/);
});

Ziel: Ich überprüfe hier, ob Stepstone geladen wird, ob der Sprachwechsel auf „Deutsch“ funktioniert – und ob danach der passende Titel angezeigt wird.

Die gleiche Testidee mit KI-Unterstützung

Nachdem wir den klassischen Playwright-Test gesehen haben, schauen wir uns nun an, wie derselbe Test mithilfe von Künstlicher Intelligenz umgesetzt werden kann. Dabei verwenden wir die ZeroStep-Erweiterung, die es ermöglicht, Browserinteraktionen in natürlicher Sprache zu beschreiben.

Das Ziel bleibt identisch – wir öffnen die Stepstone-Website, prüfen den Titel und wechseln die Sprache auf Deutsch – aber dieses Mal überlassen wir der KI die genaue Lokalisierung und Auswahl der Elemente. So wird der Code nicht nur kompakter, sondern auch robuster gegenüber Änderungen im DOM.

import { test, expect } from "@playwright/test";
import { ai } from "@zerostep/playwright";

test("open Stepstone, has title and switches to German, check german title", async ({ page }) => {
  const aiArgs = { page, test };

  // Seite öffnen
  await page.goto("https://www.stepstone.com/");
  await page.waitForLoadState("domcontentloaded");

  // Englischen Titel über KI abfragen und prüfen
  const englishTitle = await ai("What is the title of the page?", aiArgs);
  expect(englishTitle).toBe("We help companies to hire the right talent");

  // Sprachmenü öffnen (per natürlicher Sprache)
  await ai("Click the button in the top right corner that opens the language menu", aiArgs);

  // 'Deutsch'-Link im Sprachmenü anklicken
  await ai("Click the link labeled 'Deutsch' in the language menu", aiArgs);

  // Auf neue URL warten
  await page.waitForURL("**/deutsch/");
  await expect(page).toHaveURL(/deutsch/);

  // Deutschen Titel über KI abfragen
  const germanTitle = await ai("What is the title of the current page?", aiArgs);
  expect(germanTitle).toBe("Wir helfen Unternehmen, die richtigen Talente zu finden");
});

Welche Unterschiede gibt es?

• Kein direktes Arbeiten mit locators
• Mehr Robustheit bei dynamischen Seiten
• Tests lassen sich in natürlicher Sprache formulieren

Vorteile der KI-gestützten Variante

Lesbarkeit: Deine Tests lesen sich wie Spezifikationen – ideal auch für Stakeholder ohne Coding-Kenntnisse
Wartbarkeit: Weniger anfällig für Änderungen im DOM
Schnelles Prototyping: Du kannst grobe Testideen mit Sprache skizzieren und sofort ausführen

So richtest du ZeroStep ein

Installiere die Library mit:

npm install @zerostep/playwright

Dann brauchst du einen API-Schlüssel deines KI-Anbieters (z. B. OpenAI) – und schon kannst du ai() wie oben nutzen. Das Tool übernimmt dann automatisch die Übersetzung deiner Eingabe in ausführbaren Code.

Hinweis: aiArgs enthält u. a. page, damit ZeroStep auf Playwright zugreifen kann.

Fazit

Mit ZeroStep oder ähnlichen Ansätzen bringst du deine Playwright-Tests auf das nächste Level. Du kannst schneller starten, Tests robuster gestalten und auch komplexe Benutzeraktionen einfach in Sprache formulieren.

Perfekt für alle, die Testautomatisierung lieben – und noch mehr aus ihr herausholen wollen.