Playwright: Automating browser tests

In short: Playwright controls real browsers by code, clicks through web pages, checks content and makes end-to-end tests fast and reliable.

In more detail: An end-to-end test (E2E) checks an application as a human uses it: open page, log in, click, check result. Playwright (from Microsoft) controls Chromium, Firefox and WebKit (Safari engine) and runs on Windows, macOS and Linux. Bindings exist for JavaScript/TypeScript, Python, Java and .NET.

In Depth

A first test

import { test, expect } from '@playwright/test';
 
test('home page shows heading', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
  await page.getByRole('link', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/login/);
});

Start with npx playwright test. Reports, screenshots, videos and the trace viewer (step-by-step recording) help with errors.

Why it is reliable

• Auto-waiting: Playwright waits automatically until elements are visible and clickable; less sleep.
• Locators by role and text (getByRole, getByLabel, getByText) like users and screen readers. This makes tests more robust and promotes accessibility.
• Web-first assertions (expect(...).toBeVisible()) repeat the check until timeout.
• Isolation: each test gets a fresh browser context (own cookies, storage).
• Parallel across several workers, several browsers and device emulation (phone, tablet).

Useful features

• codegen (npx playwright codegen url) records clicks as test code.
• Intercept/mock network (page.route) for error cases and offline.
• Save authentication (storageState) so as not to repeat login in every test.
• Visual comparison (toHaveScreenshot), API tests (request), file download/upload.
• CI integration (GitHub Actions, GitLab), reports as HTML.

Good practice

Test important user journeys, not every trifle (E2E tests are slower than unit tests, see test pyramid). Use own test data, ensure independent tests, avoid fixed waits and use stable locators instead of long CSS paths. Mind privacy: do not store real credentials in tests. Alternatives: Cypress (Chromium-based plus Firefox, runs in the browser), Selenium/WebDriver (widespread, older).

See also: Test pyramid and E2E tests, Types of testing, CI/CD pipeline, Building accessible websites