Ein neuer Player: Microsoft Playwright

Web Applikationen testen ist bei vielen Entwicklern unbeliebt weil mühsam. Testautomatisierung ist eine Voraussetzung für eine flexible Entwicklung einer Web Applikation von hoher Qualität. Features kommen so schneller zu den Usern, weil Changes innert Minuten statt Tagen ausgeliefert werden können. Microsoft hat mit Playwright ein neues End-to-End-Testing Tool aufgelegt, das Vieles erleichtert.

Playwright, (deutsch “Dramatiker, Drehbuchschreiber”) soll ‘jeden’ Webbrowser auf ‘jedem’ Betriebssystem unterstützen. In der Tat kann mit modernen Browsern wie Chrome, Firefox, Safari, Edge unter den Betriebssystemen von Apple, Linux und Windows getestet werden. Dabei werden jeweils die als Open Source erhältlichen Rendering Engines Chromium, WebKit und Firefox eingesetzt. Auch Tests mit den mobilen Browser Versionen unterstützt das Tool.

Polyglott🔗

Tests können in den wichtigsten Programmiersprachen geschrieben werden:

• Typescript, JavaScript
• Python
• .NET
• Java

Möglich ist diese Breite durch den Ansatz, auf das Chrome Debugger Protokoll zu setzen.

Tests werden parallel abgearbeitet. Sie warten jeweils, bis der Browser die Seite geladen hat. Entwickler haben einen Testinspektor und einen Testgenerator als Unterstützung zur Hand.

Playwright kann auch sehr einfach auch Bilder der Webseite erzeugen und als Basis für Testfälle verwenden. Auch Videos vom Testablauf können erzeugt werden.

Ein Beispiel soll illustrieren wie mit async und await nichtblockierende Tests geschrieben werden, hier in JavaScript:

	const { test, expect } = require('@playwright/test');
	
	test('basic test', async ({ page }) => {  
	
	  await page.goto('https://github.com/login');
	
	  await page.fill('input[name="login"]', 'USER NAME');
	
	  await page.fill('input[name="password"]', 'PASSWORD');
	
	  await page.click('text=Sign in');
	
	});

Entwickler schreiben die Tests lokal und lassen sie dann in den Continuous Integration Pipelines integriert laufen.

Fazit🔗

Dadurch, das Playwright auf locator Funktionen setzt, wird die Brüchigkeit der Tests reduziert.

test('display image', async ({ page }) => {
  const url = 'about/';
  await page.goto(baseURL + url);
  await expect(page).toHaveURL(baseURL + url);
  console.log(page.url)
  expect(await page.locator('img[alt="Andreas Kapp"]').screenshot()).toMatchSnapshot('about.png');

});

Eines der grossenHindernisse der Testautomatisierung war bisher, dass Kosten und Aufwand für die Wartung der Tests hoch waren.

Es scheint nun die Zeit zu sein, wo wir Selenium und Cypress im Rückspiegel verschwinden sehen.