Tag Archives: npx playwright codegen

An Introduction to Playwright

Pretty much the only end-to-end automation tool that I’ve used to date has been Selenium. I heard about Playwright in passing, and thought I’d have a play. This may end up being the start of a series of posts, because I’m very impressed so far.

Installation

You’ll need node.js installed, and then to install Playwright, it’s just:

npm -i -D playwright     

Running

You can actually have Playwright create the test (or at least some of it) for you.

 npx playwright codegen 

Launches a browser and an inspector window. Once you’ve create the test, you’ll end up with a script like this:

const { test, expect } = require('@playwright/test');
test('test', async ({ page }) => {
  // Go to https://www.pmichaels.net/
  await page.goto('https://www.pmichaels.net/');
  // Go to https://www.pmichaels.net/about/
  await page.goto('https://www.pmichaels.net/about/');
  // Click a:has-text("About")
  await page.click('a:has-text("About")');
  expect(page.url()).toBe('https://www.pmichaels.net/about/');

});

You can then run the test using the following command:

npx playwright test

There are some very interesting concepts at play here: playwright will automatically wait for elements to be available, it’s also clever enough to work out if there’s some kind of CSS at work, and will wait for that to complete, too.

Caveats

This one caught me out: it appears that Playwright insists on the tests being named *.spec.js, if they are not, you’ll get:

No tests found

The other thing to note about Playwright is that it’s headless by default – this can be overridden, but it fits much better into the testing idea.