So läuft Playwright mit Deno

JavaScript und Typescript Runtimes🔗

Deno 2.1 LTS ist als Alternative zu Node.js erschienen. Wir testen, wie man das UI-Testautomationstool Playwright damit nutzen kann. Dieser Artikel zeigt die Einrichtung und vergleicht die Performance.

Deno wird wie 'DEE-noh' ausgesprochen. Seit Version Deno 2.1 wird die Laufzeitumgebung für JavaScript, Typescript und WebAssembly (WASM) in einer Long Term Support (LTS) Variante angeboten, wobei für 6 Monate kritische Bugs und Sicherheitsprobleme behoben werden, jedoch die APIs stabil bleiben. Diese halbjährlichen Releases werden unter der MIT Lizenz veröffentlicht.

Da Deno als einzelne Binärdatei ausgeliefert wird, ist die Installation sehr einfach, auch auf CI/CD Pipelines.

Um die Kompatibilität mit Node zu demonstrieren, nehmen wir die UI Tests für diese Website als Beispiel.

Diese UI Tests haben wir mittels Playwright realisiert.

Node 22🔗

Bei Projekten ohne Playwright kann das Tool mit npm add playwright hinzugefügt werden.

npx playwright install
npx playwright test kapp.technology

Deno 2.1🔗

Bei Node Projekten müssen Pakete mit npm: Präfix versehen werden. Es ist erforderlich, Deno den Zugriff auf Netzwerk, Disks und Pakete explizit zu geben. Pauschal bequem geht das mit --allow-all.

deno install
deno run --allow-all npm:playwright install
deno run --allow-all npm:playwright test kapp.technology
deno run --allow-all npm:playwright show-report

Mehr dazu findet man im Github Issue NPM: Playwright does not work #16899.

Das Testscript🔗

Das Script verifiziert die grundlegende Korrektheit

• der lokalen Website
• des Pull bzw Merge Requests und
• der veröffentlichten Website.

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

test('test', async ({ page }) => {

  // Go to https://www.kapp.technology/
  await page.goto('https://www.kapp.technology/');

  // Click header >> text=Kapp Technology
  await page.locator('header >> text=Kapp Technology').click();
  await expect(page).toHaveURL('https://www.kapp.technology/');

  // Click nav >> text=Angebot
  await page.getByRole('navigation').getByRole('link', { name: 'Angebot' }).click();
  await expect(page).toHaveURL('https://www.kapp.technology/angebot-und-services/');

  // Click text=Angebot Blog Kontakt
  await page.getByRole('link', { name: 'Blog' }).click();
  await expect(page).toHaveURL('https://www.kapp.technology/blog/');

  // Click text=Der Neubau unserer Website
  await page.getByText('Der Neubau unserer Website').click();
  await expect(page).toHaveURL('https://www.kapp.technology/blog/relaunch-unserer-website/');

  // Click footer >> text=Angebot
  await page.getByRole('contentinfo').getByRole('link', { name: 'Angebot' }).click();
  await expect(page).toHaveURL('https://www.kapp.technology/angebot-und-services/');

  // Click text=Jetzt Kontakt aufnehmen
  await page.getByRole('link', { name: 'Jetzt Kontakt aufnehmen' }).click();
  await expect(page).toHaveURL('https://www.kapp.technology/contact/');

  // Click div[role="main"]:has-text("Hallo. Say Hello Senden")
  await page.locator('div[role="main"]:has-text("Hallo. Say Hello Senden")').click();
  await page.getByPlaceholder('Email Address').click();
  await page.getByPlaceholder('Email Address').fill('hello@example.com');
  await page.getByPlaceholder('What would you like to say?').fill('Hello from Test Automation.');
  await page.getByRole('button', { name: 'Senden' }).click();
  await expect(page.getByRole('button', {
    name: 'Nachricht abgeschickt!'
  })).toBeVisible();

});

Ergebnis🔗

Diese spontanen Performance Tests mit nur einem Testscript können höchstens einen Eindruck vermitteln: Beide Plattformen sind etwa gleich schnell.

Nutzen🔗

Als Entwickler schreiben wir die UI Tests lokal und lassen sie dann in den Continuous Integration Pipelines laufen oder gegen die veröffentliche Website laufen.

Wenn jeder Pull Request wie bei Netlify einfach deployed und getestet werden kann, bringt das viel Gewinn an Sicherheit. Dann lohnt es sich, in Playwright Testscripts zu investieren.