Learning Hub
← Testing & QA

Hands-on Playwright Starter

5 min readΒ·Updated 2026-09-07

A hands-on start with Microsoft Playwright for a small set of critical, maintainable browser test journeys.

Hands-on Playwright Starter

Microsoft Playwright is a free, Apache-2.0-licensed framework for web testing and automation. It supports Chromium, Firefox, and WebKit and provides a test runner, assertions, isolation, parallel execution, traces, and HTML reports.

Download or create a project

Install a supported Node.js release, open a terminal in the folder where you want the project, and run:

npm init playwright@latest

Choose TypeScript or JavaScript, accept a tests folder, and enable a GitHub Actions workflow if useful. The initializer installs Playwright Test and browser binaries and creates a runnable example.

Read or download the framework source

git clone https://github.com/microsoft/playwright.git

The GitHub repository is the framework's source code, not a starter test suite for your application. Use the initializer above for a new project; download or clone the repository when you want to inspect or contribute to Playwright itself.

Your first test

Create tests/homepage.spec.ts:

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

test('homepage exposes its primary heading', async ({ page }) => {
  await page.goto(process.env.BASE_URL ?? 'http://localhost:3000');

  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
  await expect(page).toHaveTitle(/.+/);
});

Prefer user-facing locators such as roles and labels. Avoid arbitrary time delays; Playwright assertions automatically wait for expected UI conditions.

Run and inspect

# Run the suite in configured browsers
npx playwright test

# Run interactively with step-by-step debugging
npx playwright test --ui

# Open the latest HTML report
npx playwright show-report

Where Playwright fits

flowchart LR
    A[Unit and component tests] --> B[API and contract tests]
    B --> C[Small critical Playwright suite]
    C --> D[Deployment smoke]
    D --> E[Production monitoring]
    C -. not intended to prove every business rule .-> A

Use Playwright for a small set of critical browser journeys, browser compatibility, accessibility-oriented interaction, session behavior, and deployment smoke. Keep detailed calculations and boundary logic at unit/API layers.

Turn the example into a maintainable project

  1. Put environment URLs and safe configuration in Playwright config; load secrets from approved secret storage, never source control.
  2. Create reusable domain workflows such as createEmployee or approveLeave; do not expose page selectors to every test.
  3. Generate unique data per run and tenant, and clean only records owned by that run.
  4. Capture screenshots and traces mainly on failure.
  5. Add risk tags such as @critical, @payroll, or @tenant-isolation so CI can select evidence by gate.
  6. Run a fast smoke suite on deployment and a wider suite nightly or before release.
  7. Track flaky tests with an owner and deadline; never quarantine a critical test indefinitely.

Suggested next free resources

These tools cover different risks. Playwright does not replace API, contract, security, performance, data-reconciliation, or AI evaluation work.

Source note

The role of selective UI E2E testing and the automation architecture come from the attached strategy PDF. Repository links, commands, licensing, and current product capabilities were checked against official project sources on 2026-09-06.

Back to index