DEV Community: Pratham Rathod

Playwright E2E Tests: Actions, Assertions, Hooks

Pratham Rathod — Sun, 28 Jun 2026 15:02:45 +0000

Playwright E2E Tests: Actions, Assertions, Hooks

Learn Playwright E2E testing. Write first test, actions, async assertions, test isolation, leverage hooks for reliable web automation!

This guide provides a practical overview of writing tests with Playwright, focusing on core concepts, actions, assertions, and test organization.

Introduction

Playwright tests are designed for simplicity and reliability. They perform actions on web pages and assert expected states. Playwright automatically handles waiting for elements to become actionable and for assertions to eventually pass, eliminating the need for manual waits and reducing test flakiness.

Getting Started: Your First Test

Playwright tests are typically written in TypeScript or JavaScript. A basic test involves navigating to a URL and performing assertions.

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the "Get started" link using its role and name.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects the page to have a heading with the name "Installation".
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Note: When using JavaScript in VS Code, add // @ts-check at the start of each test file to enable automatic type checking.

Performing Actions

Most tests begin with navigation and then interact with page elements.

Navigation

Use page.goto() to navigate to a URL. Playwright waits for the page to reach the load state before proceeding.

await page.goto('https://playwright.dev/');

Interactions

Interacting with elements starts by locating them using Playwright's Locators API. Locators provide a robust way to find elements on the page. Playwright automatically waits for elements to become actionable (e.g., visible, enabled) before performing an action, so you don't need to add explicit waits.

// Create a locator for the "Get started" link.
const getStartedLink = page.getByRole('link', { name: 'Get started' });

// Click the located element.
await getStartedLink.click();

Often, this can be condensed into a single line:

await page.getByRole('link', { name: 'Get started' }).click();

Basic Actions

Here are some common Playwright actions:

Action	Description
`locator.check()`	Check a checkbox
`locator.click()`	Click an element
`locator.uncheck()`	Uncheck a checkbox
`locator.hover()`	Hover mouse over an element
`locator.fill()`	Fill a form field with text
`locator.focus()`	Focus an element
`locator.press()`	Press a single key
`locator.setInputFiles()`	Pick files for upload
`locator.selectOption()`	Select an option in a dropdown

Using Assertions

Playwright includes test assertions via the expect function. Call expect(value) and use a matcher to define your expectation.

Playwright offers async matchers that wait for a condition to be met, making tests non-flaky.

// This assertion waits until the page title contains "Playwright".
await expect(page).toHaveTitle(/Playwright/);

Popular Async Assertions

Assertion	Description
`expect(locator).toBeChecked()`	Checkbox is checked
`expect(locator).toBeEnabled()`	Control is enabled
`expect(locator).toBeVisible()`	Element is visible
`expect(locator).toContainText()`	Element contains specific text
`expect(locator).toHaveAttribute()`	Element has a specific attribute
`expect(locator).toHaveCount()`	List of elements has a given length
`expect(locator).toHaveText()`	Element matches text (exact or regex)
`expect(locator).toHaveValue()`	Input element has a specific value
`expect(page).toHaveTitle()`	Page has a specific title (exact or regex)
`expect(page).toHaveURL()`	Page has a specific URL (exact or regex)

Playwright also includes generic matchers like toEqual, toContain, and toBeTruthy for immediate synchronous checks. These do not require await.

// Synchronous assertion.
expect(success).toBeTruthy();

Test Isolation

Playwright Test ensures strong isolation between tests. Each test receives a fresh environment, thanks to the page fixture which belongs to an isolated BrowserContext. A BrowserContext is equivalent to a brand new browser profile, preventing test interference.

// tests/example.spec.ts
import { test } from '@playwright/test';

test('example test', async ({ page }) => {
  // "page" here is isolated for this specific test.
});

test('another test', async ({ page }) => {
  // "page" in this second test is completely isolated from the first test.
});

Using Test Hooks

Playwright provides various test hooks to organize and manage test execution.

test.describe(name, callback): Groups related tests.
test.beforeEach(callback): Runs before each test in the current describe block.
test.afterEach(callback): Runs after each test in the current describe block.
test.beforeAll(callback): Runs once before all tests in the current describe block.
test.afterAll(callback): Runs once after all tests in the current describe block.

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('navigation', () => {
  // Navigate to the starting URL before each test in this group.
  test.beforeEach(async ({ page }) => {
    await page.goto('https://playwright.dev/');
  });

  test('main navigation', async ({ page }) => {
    // This test starts at 'https://playwright.dev/' due to beforeEach.
    await expect(page).toHaveURL('https://playwright.dev/');
  });

  test('navigate to docs', async ({ page }) => {
    // This test also starts at 'https://playwright.dev/'.
    await page.getByRole('link', { name: 'Docs' }).click();
    await expect(page).toHaveURL(/.*docs/);
  });
});

How to Install Playwright: The Ultimate End-to-End Testing Guide

Pratham Rathod — Sun, 28 Jun 2026 11:36:20 +0000

How to Install Playwright: The Ultimate End-to-End Testing Guide

Learn how to install Playwright and set up your first end-to-end testing environment for modern web applications. This comprehensive guide walks you through the installation process using npm, yarn, or pnpm, ensuring a seamless setup for TypeScript or JavaScript projects. Discover how to configure browser binaries for Chromium, WebKit, and Firefox, and leverage the powerful VS Code extension for efficient test development. We cover everything from initializing your project with the playwright.config.ts file to executing your first example test. Explore advanced features like the HTML Test Reporter for detailed debugging, UI Mode for live time-travel debugging, and GitHub Actions integration for continuous integration pipelines. Whether you are working on Windows, Linux, or macOS, this tutorial provides the essential steps to get your automation suite running quickly. We also detail system requirements, including Node.js compatibility and OS support, to ensure your environment is fully optimized for testing success. By following these steps, you will master parallel execution, headless browser testing, and native mobile emulation. Start your journey into reliable, high-performance web testing with Playwright today and streamline your QA workflow with the industry’s most robust automation framework. Elevate your development standards now with our expert installation guide.

Introduction

Playwright Test is an end-to-end testing framework for modern web applications. It provides a unified solution for testing across Chromium, WebKit, and Firefox with support for parallelization, native mobile emulation, and CI/CD integration.

System Requirements

Node.js: 22.x, 24.x, or 26.x.
OS:
- Windows 11+ or Windows Server 2019+ (or WSL).
- macOS 14 (Sonoma) or later.
- Debian 12/13, Ubuntu 22.04/24.04/26.04 (x86-64 or arm64).

Installation

Run the following command to initialize a new project or add Playwright to an existing project:

npm init playwright@latest

Configuration Prompts

During installation, you will be prompted to configure the following:

Language: TypeScript (default) or JavaScript.
Test Folder: Name of the directory (default: tests or e2e).
GitHub Actions: Recommended for CI integration.
Browser Install: Automatically download required binaries (recommended).

Project Structure

Playwright creates the following scaffold:

File/Folder	Purpose
`playwright.config.ts`	Global configuration (browsers, timeouts, reporters).
`tests/`	Directory containing your test specifications.
`package.json`	Project dependencies and scripts.

Running Tests

Execute tests using the Playwright CLI. By default, tests run in parallel in headless mode across all configured browsers.

Execution Commands

Task	Command
Run all tests	`npx playwright test`
Run specific file	`npx playwright test tests/example.spec.ts`
Run in headed mode	`npx playwright test --headed`
Run specific browser	`npx playwright test --project=chromium`
Open UI Mode	`npx playwright test --ui`

HTML Reports

After execution, generate and view the detailed HTML report:

npx playwright show-report

Maintenance

Updating Playwright

To update the framework and ensure browser binaries are synchronized:

# Update dependency
npm install -D @playwright/test@latest

# Update browser binaries
npx playwright install --with-deps

Version Check

Verify your current installation:

npx playwright --version

Key Features

UI Mode: Use npx playwright test --ui for watch mode, live step-by-step debugging, and time-travel inspection.
Configuration: Edit playwright.config.ts to adjust retries, global timeouts, and environment-specific settings.
Cross-Browser: Supports Chromium, Firefox, and WebKit out of the box.