KI-Testautomation: Playwright und Generative AI

Dean Klopsch02. Mai 2024· 3 Min. lesen Copy link Share on LinkedIn
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.

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à.

CypressGenerative AIKünstliche IntelligenzPlaywrightSDETSeleniumTestautomation

«Als Software Development Engineer in Test (SDET) und Enthusiast im Bereich KI und Testautomation bin ich nicht nur überzeugt von der entwicklungsnahen Testautomation, sondern auch, dass die innovative Kombination aus Testautomation und generativer KI die Art und Weise, wie wir Software testen, grundlegend verändert. Dieser Ansatz verbessert nicht nur die Genauigkeit unserer Tests, sondern macht den gesamten Prozess effizienter und effektiver.»

Dean Klopsch
Leiter Domäne Testautomation
Weitere Blogbeiträge:

Biel
Bahnhofstrasse 15
2502 Biel
+41 32 329 90 30

Zürich
Herostrasse 12
8048 Zürich
+41 32 329 90 30

Luzern
Platz 4
6039 Root D4
+41 32 329 90 30

Bern
Lindenpark
Lindenhofstrasse 1
3048 Worblaufen
+41 32 329 90 30

News Archive Jobs Archive Referenzen Archive Academy Archive Solution Brief Archive Scaled Agile Framework (SAFe®)