How to Run Playwright with Deno

JavaScript and TypeScript Runtimes🔗

Deno 2.1 LTS has emerged as an alternative to Node.js. We're testing how to use the UI test automation tool Playwright with it. This article demonstrates the setup and compares the performance.

Deno is pronounced as 'DEE-noh'. Since version Deno 2.1, the runtime environment for JavaScript, TypeScript, and WebAssembly (WASM) has been offered in a Long Term Support (LTS) variant, where critical bugs and security issues are fixed for 6 months while the APIs remain stable. These semi-annual releases are published under the MIT license.

Since Deno is delivered as a single binary file, installation is very simple, even on CI/CD pipelines.

To demonstrate compatibility with Node, we'll use the UI tests for this website as an example.

These UI tests were implemented using Playwright.

Node 22🔗

For projects without Playwright, the tool can be added using npm add playwright.

npx playwright install
npx playwright test kapp.technology

Deno 2.1🔗

In Node projects, packages must be prefixed with npm:. It's necessary to explicitly grant Deno access to network, disks, and packages. The convenient blanket approach is using --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

You can find more information about this in the GitHub issue NPM: Playwright does not work #16899.

The Test Script🔗

The script verifies the basic correctness of:

• the local website
• the pull or merge request and
• the published 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();

});

Results🔗

These spontaneous performance tests with just one test script can only give an impression: Both platforms are roughly equally fast.

Benefits🔗

As developers, we write the UI tests locally and then run them in continuous integration pipelines or against the published website.

When each pull request can be easily deployed and tested like with Netlify, it brings a great gain in security. That's when it becomes worthwhile to invest in Playwright test scripts.