Playwright In 60 Seconds

Want to test a website, or do other web automation? You've come to the right place.

Note: all of the below require light command line usage. Also, it assumes you have NodeJS already installed.

Quick Start

Step 1: Create a new directory and change to it

Step 2: Run "npm init playwright@latest"

The default answers should be reasonable. (Typescript, put tests in "tests" directory, don't add GitHub Actions, and install browsers.)

After a few seconds, you should have Playwright installed. Now, run the following:

npx playwright test --ui

This will bring up a basic visual test against the Playwright website. Click the green triangle to run the tests, and it should complete in a second or two depending on the speed of your computer and Internet connection.

Step 3: There is no step 3.

Bonus: visual test generation

Let's start generating a new test using the automated Codegen included in Playwright.

npx playwright codegen www.steve.net

It will pop up a web browser and a Playwright inspector. If you specified a website, you'll see it rendered, and as you move the mouse around the screen, it will show Playwright methods that would select the specific element.

Click on a link to navigate. The script should update in the inspector. Copy and paste the script, and put it in a file in the tests directory. For example: create tests/stevenet.spec.ts with the following content:

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

test('verify stevenet about', async ({ page }) => {
  await page.goto('https://www.steve.net/');

  await page.getByRole('link', { name: 'About' }).click();

  await expect(page).toHaveTitle('About Me');
});

Now, running npx playwright test --ui again. You should see the new test, and should be able to run it.

Congratulations! You've written a Playwright test in a few seconds.