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.