Your First Playwright Test

1 Goal

By the end of this exercise you will have a working Playwright project on your machine, a single test file that opens the public playwright.dev homepage, asserts the page title contains "Playwright", and drops a screenshot into your project folder. You will also have run the test once and seen it pass in the terminal. That is enough foundation to build every other test in this track.

2 Install the tool (Node.js + Playwright)

Playwright runs on Node.js. You will install Node.js first, then let Playwright's own installer pull down the browsers and a starter project.

1. Download and install Node.js 20 LTS Go to nodejs.org and grab the LTS installer for your OS. Accept all defaults. The installer includes npm and npx, which you will use below.
2. Verify the install Open a fresh terminal window (important — an existing window won't see the new PATH) and run:
   Windows (PowerShell) macOS (Terminal) Linux (bash)

   node --version
   npm --version

   node --version
   npm --version

   node --version
   npm --version

   You should see something like v20.11.1 and 10.2.4. Anything on v18 or newer is fine.

3. Create a project folder and install Playwright Pick a folder you can find again (Desktop is fine). The init command scaffolds the config, example tests, and a GitHub Actions workflow — answer the prompts as shown.
   Windows (PowerShell) macOS / Linux

   cd $HOME\Desktop
   mkdir pw-practice-01
   cd pw-practice-01
   npm init playwright@latest

   cd ~/Desktop
   mkdir pw-practice-01
   cd pw-practice-01
   npm init playwright@latest

   When prompted, choose: TypeScript → tests folder → No GitHub Actions (not needed yet) → Yes install browsers.

4. Confirm browsers downloaded The installer downloads Chromium, Firefox, and WebKit into a cache. If you skipped the browser step above, run this now:

   npx playwright install

   This is safe to re-run — it is idempotent.

3 Project setup

The installer created a folder that looks like this:

pw-practice-01/
├── node_modules/
├── tests/
│   └── example.spec.ts
├── tests-examples/
├── package.json
├── playwright.config.ts
└── .gitignore

Delete the example file — you are going to write your own.

Remove-Item tests\example.spec.ts
Remove-Item tests-examples -Recurse

rm tests/example.spec.ts
rm -rf tests-examples

Now create a new empty file at tests/homepage.spec.ts. Any text editor will do — VS Code is recommended if you don't have a preference.

4 Write the script

Paste this exact content into tests/homepage.spec.ts:

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

test('playwright homepage has the right title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  await expect(page).toHaveTitle(/Playwright/);

  await page.screenshot({ path: 'homepage.png', fullPage: true });
});

Line-by-line:

• import { test, expect } from '@playwright/test'; — pulls in the test runner and the assertion helper. Every spec file starts with this.
• test('...', async ({ page }) => { }) — declares one test. The first argument is the human-readable name you will see in the report. The page object is a fresh browser tab, already opened for you.
• await page.goto('https://playwright.dev/') — navigates the tab. await is mandatory — Playwright actions are asynchronous, and forgetting await is the #1 cause of mysterious failures.
• await expect(page).toHaveTitle(/Playwright/) — the assertion. The /Playwright/ is a regex that matches any title containing the word "Playwright" (currently "Fast and reliable end-to-end testing for modern web apps | Playwright"). Playwright retries this assertion for up to 5 seconds by default, so you don't have to add explicit waits.
• await page.screenshot(...) — saves a PNG to your project folder. fullPage: true captures the whole scrollable page, not just the viewport.

5 Run & verify

From the project root, run:

npx playwright test

Expected output (timings will differ):

Running 3 tests using 3 workers

  3 passed (6.2s)

To open last HTML report run:

  npx playwright show-report

Three tests? Yes — by default the config runs your one test against Chromium, Firefox, and WebKit. That is Playwright's cross-browser-by-default behaviour. All three should pass.

Check your project folder: you will now have a homepage.png file. Open it — it should show the Playwright homepage.

Want the UI? Run:

npx playwright test --ui

This opens a watch-mode runner with a timeline, DOM snapshots per step, and a re-run button. Extremely useful when you start debugging.

6 Troubleshooting

npx playwright install

7 Challenge