KI-Testautomation: Playwright und Generative AI

Generative AI revolutioniert die Testabdeckung komplexer Web-Anwendungen. Erfahren Sie, wie Testautomation und Generative AI zusammenarbeiten, um die Testautomatisierung auf das nächste Level zu bringen.

Durch die Nutzung generativer KI können wir nicht nur vorhandene Funktionalitäten testen, sondern auch Nutzerverhalten vorhersagen und darauf reagieren oder UI-Änderungen intelligent und automatisch handhaben. Dies führt zu einer realistischeren, robusteren und umfassenderen Testabdeckung.

Wir zeigen anhand Testautomations-Frameworks Playwright, wie Generative AI die Testautomatisierung verbessert. Eine Integration in andere Frameworks wie Cypress oder Selenium ist mit dem gleichen Verfahren möglich und genauso effektiv.

Wie wird das Nutzerverhalten vorhergesagt?

Im Grundsatz gibt es zwei Varianten.

• Variante 1: Eigenes Modell trainieren
• Variante 2: Bestehende Modell wie chatGPT verwenden

Bei Variante 1 trainieren wir unser Modell mit Daten aus Benutzeraktionen wie Klicks, Formular-Eingaben, Navigation und Daten aus Geschäftsbetrachtungen wie Abschlüsse, Umsatz und Verträge. Dies ermöglicht einen Fokus auf das, was die Benutzer tatsächlich tun und geschäftskritisch ist.

Bei Variante 2 erzielen wir rasch bereits erstaunliche Erfolge, indem wir einer bestehenden GPT einen Hintergrund und eine Aufgabe geben. Bspw. «Du bist ein ICT-Spezialist und suchst auf akros.ch nach einem AI-Kurs – identifiziere dafür 5 sinnvolle User Journeys».

Integration von Generative AI in Playwright

Generative KI-Modelle können in das Playwright-Framework eingebettet werden, um das Verhalten der Benutzer genauer zu simulieren und Tests dynamisch anzupassen. Dies ermöglicht es, UI-Änderungen intelligent zu handhaben und die Testskripte kontinuierlich zu verbessern.

Ein konkretes Beispiel zum Nachmachen

In diesem Beispiel, dass man in 5 Minuten nachstellen kann, generieren wir ein Benutzerverhalten und Erzeugen daraus Code, der über Playwright ausgeführt werden kann. In einem zweiten Schritt erweitern wir den Code so, dass das Benutzerverhalten nicht von Anfang an komplett festgelegt ist, sondern immer der nächste Schritt des Benutzers vorhergesagt wird.

Prompt bei chatGPT 4.0:
Du bist ein ICT Professional und suchst nach einem Kurs um dich in AI weiterzubilden. Bitte schau dir www.akros.ch an und identifizier eine User Journey. Klick für Klick.

Die Ausgabe ist eine Schritt für Schritt Anleitung, wie ein solcher Benutzer auf der Webseite von AKROS navigiert. Also ein dynamisch generierter Testfall.

In einem nächsten Schritt wird dieser Testfall zu einem automatisierten Test.

Bitte schreibe mir dafür einen automatisierten Playwright-Test.

Die Ausgabe ist der Code vom automatisierten Testfall der über Playwright ausgeführt wird.

const { test, expect } = require('@playwright/test');

test('Register for an AI course at AKROS', async ({ page }) => {
  // Navigate to the AKROS homepage
  await page.goto('https://www.akros.ch');

  // Go to the Academy section to find courses
  await page.click('text=Academy');

  // Choose an AI course
  // This will depend on the text used on the site to denote AI courses
  await page.click('text=ChatGPT Apps: Entwicklung KI-basierter Applikationen');
  
  // Check the course detail page
  const title = await page.textContent('h1');
  expect(title).toContain('ChatGPT Apps');

  // Check available dates and prices
  const availability = await page.textContent('.course-details');
  expect(availability).toContain('Verfügbar');

  // Proceed to register
  await page.click('button:text("Anmelden")');

  // Fill in the registration form
  await page.fill('input[name="first_name"]', 'John');
  await page.fill('input[name="last_name"]', 'Doe');
  await page.fill('input[name="email"]', 'john.doe@example.com');
  await page.fill('input[name="company"]', 'ExampleCorp');
  
  // Choose a course date
  await page.selectOption('select[name="course_date"]', { label: '06.06.2024, Remote' });

  // Agree to terms and conditions
  await page.check('input[name="terms"]');

  // Submit the form
  await page.click('button:text("Submit")');

  // Check for confirmation message
  const confirmation = await page.textContent('.confirmation');
  expect(confirmation).toContain('Vielen Dank für Ihre Anmeldung');
});

Dieses Script funktioniert bereits gut als Proof of Concept und kann in bestehende Patterns übernommen werden.

Das Beispiel mit noch dynamischeren Entscheiden erweitern

Für ein noch dynamischeres Verhalten können wir das trainierte (Variante 1) oder ein bestehendes (Variante 2) Modell direkt einbinden und erhalten so einen Test, bei dem sich der simulierte Benutzer von Schritt zu Schritt entscheidet, was er als nächstes tut.

Zuerst definieren wir eine Map, die Schlüsselwörter (Aktionen, die das Modell vorhersagen kann) mit zugehörigen Funktionen verbindet. Diese Funktionen führen die entsprechenden Aktionen auf der Web-Anwendung aus.

const actionsMap = {
  register: async (page) => {
    await page.click('text=ChatGPT Apps: Entwicklung KI-basierter Applikationen');
    await page.click('button:text("Anmelden")');
    await page.fill('input[name="first_name"]', 'John');
    await page.fill('input[name="last_name"]', 'Doe');
    await page.fill('input[name="email"]', 'john.doe@example.com');
    await page.fill('input[name="company"]', 'ExampleCorp');
    await page.click('button:text("Submit")');
    const confirmation = await page.textContent('.confirmation');
    return confirmation.includes('Vielen Dank für Ihre Anmeldung');
  },
  navigate: async (page) => {
    await page.click('text=Academy');
  },
  // Weitere Aktionen können hier hinzugefügt werden...
};

Die Vorhersagefunktion predictNextAction gibt den Schlüssel für die nächste Aktion zurück, und wir verwenden diesen Schlüssel, um die entsprechende Funktion aus actionsMap aufzurufen.

const { test, expect } = require('@playwright/test');
// Funktion, die die nächste Aktion des Benutzers vorhersagt
async function predictNextAction(page) {
   return await page.evaluate(() => {
    // Beispielhafte Vorhersage, basierend auf dem Modell
    return "register";
  });
}

test('Register for an AI course at AKROS using dynamic actions', async ({ page }) => {
  await page.goto('https://www.akros.ch');
  
  const predictedAction = await predictNextAction(page);
  if (actionsMap[predictedAction]) {
    const result = await actionsMap[predictedAction](page);
    expect(result).toBeTruthy();
  } else {
    console.log('Predicted action is not defined in actionsMap');
  }
});

Voilà.