Playwright can automate Chromium, Firefox and WebKit through a test runner that provides isolation, assertions, reports and debugging tools. This tutorial builds a harmless check against Playwright's own public documentation: open the site, follow the Get started link and verify that the Installation heading appears. It does not submit forms, bypass access controls or automate a third-party account. Commands and requirements were checked against official Playwright documentation on 20 July 2026.
Prerequisites and expected result
A supported system: current documentation lists Windows 11 or Windows Server 2019+, recent macOS, or supported Debian/Ubuntu releases.
A supported Node.js release; Playwright currently documents the latest 22.x, 24.x or 26.x lines.
A terminal, a code editor and permission to download browser binaries.
A new empty folder so the generated configuration cannot change an existing project unexpectedly.
The expected result is one passing test in the terminal. The test opens playwright.dev, activates a link by accessible role and name, and waits for a visible Installation heading. A successful result proves only that this example and environment worked; it is not evidence that an unrelated production workflow is safe.
Step 1: create the project
Create an empty folder, open a terminal in it and run the official initializer. Choose TypeScript, keep the default tests folder, and allow browser installation. The initializer creates package files, a Playwright configuration and an example test. Review the generated files before committing them.
npm init playwright@latestIf browsers were skipped or a later error reports a missing executable, install them explicitly with `npx playwright install`. Linux CI images may need the documented `--with-deps` option. Do not run installation commands from an untrusted project until you have reviewed its package scripts.
Step 2: write a safe test
Replace the generated example with the following test. Role-based locators describe what a user can identify and are generally more resilient than long CSS selectors. Playwright's web-first assertion waits for the heading to reach the expected state instead of relying on an arbitrary sleep.
import { test, expect } from '@playwright/test';
test('opens the official installation guide', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});Step 3: run and inspect the result
npx playwright test
npx playwright show-reportThe terminal should report one passed test for each configured browser project. The HTML report shows duration, project and steps. During debugging, run one browser with `npx playwright test --project=chromium --headed`, or use `npx playwright test --ui`. Headed mode is for observation, not a fix for timing problems.
