Introduction to Playwright

What Is Playwright?

Playwright is a Node.js library (with bindings for Python, Java, and .NET) that lets you drive real browsers through a single, consistent API. It ships with a built-in test runner, auto-waiting, powerful locators, network interception, trace recording, and first-class TypeScript support.

Unlike classic Selenium WebDriver, Playwright communicates with browsers over a modern, bidirectional protocol and runs each test in an isolated browser context. That isolation, combined with automatic waiting on actions and assertions, dramatically reduces the flakiness that plagued older automation stacks.

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

test('homepage shows welcome message', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

A complete Playwright test: navigate, locate by accessible role, and assert visibility — with auto-waiting built in.

How a Playwright Test Is Structured

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

test.describe('feature name', () => {
  test('does something specific', async ({ page }) => {
    // actions and assertions
  });
});

• test.describe() groups related tests into a readable block.
• test() defines a single test case with a clear description.
• The page fixture provides a browser tab for navigation and interaction.
• expect() from @playwright/test includes web-first assertions that auto-retry.
• Spec files live in a tests/ folder by default and use .spec.ts naming.

Playwright at a Glance

Core ideas you will use in nearly every Playwright test.

How Playwright Architecture Differs from WebDriver

Classic WebDriver sends one-way commands to a browser driver over HTTP. Playwright instead maintains a persistent connection to each browser engine and can observe events, intercept network traffic, and execute code in multiple isolated contexts within one browser process.

Each test gets a fresh browser context by default — equivalent to an incognito profile with its own cookies, storage, and permissions. That design makes parallel execution and test isolation straightforward without spinning up separate browser instances for every test.

• Single API across Chromium, Firefox, and WebKit.
• Browser contexts provide cookie/storage isolation per test.
• Auto-waiting on locators, actions, and web assertions.
• Built-in network routing, tracing, and video/screenshot capture.

What You Can Test with Playwright

Playwright supports end-to-end testing of full user journeys, API testing via APIRequestContext, component testing for React/Vue/Svelte, and accessibility scans via integrations like @axe-core/playwright.

Common Mistakes

• Assuming Playwright works like Cypress — Playwright runs out-of-process and supports multiple tabs, contexts, and languages.
• Skipping the official Trace Viewer when debugging failures; it replaces much guesswork.
• Treating Playwright as Chromium-only when Firefox and WebKit are first-class engines.
• Writing tests without await on async Playwright calls, causing race conditions.

Key Takeaways

• Playwright is a cross-browser automation library with a built-in test runner and TypeScript-first API.
• Browser contexts isolate cookies and storage, enabling safe parallel execution.
• Auto-waiting on actions and expect() assertions reduces manual wait logic.
• Playwright covers E2E, API, component, and accessibility testing from one toolchain.