0Pricing
React Academy · Lesson

Getting Started with Playwright for React

Write Playwright tests that open a browser, interact with the React app, and assert on results.

Getting Started with Playwright for React is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Playwright?

Playwright is a Node.js E2E testing framework that drives real Chromium, Firefox, and WebKit browsers. It's ideal for testing full React app flows including routing, auth, and API interactions.

Installation

Install Playwright and its browser binaries with a single command.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Playwright Config for React

Configure Playwright to start your dev server before running tests.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Writing Your First Test

Tests use page, a browser page object. Navigate to a URL, interact with elements, and assert on the result.

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

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

Locators

Playwright's locators are similar to RTL queries. Prefer role-based locators for resilience.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Clicking and Typing

Interact with elements using click(), fill(), press(), and selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Waiting for Navigation

Playwright auto-waits for elements to be ready, but you can explicitly wait for navigation or network requests to complete.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Assertions

Use expect(locator) with Playwright's built-in matchers. They auto-wait for the condition to be true.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Taking Screenshots on Failure

Playwright automatically captures screenshots and traces on test failure when configured. Enable it in the config.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Running Tests

Run all tests headless, or use --ui for the interactive test explorer that lets you step through tests visually.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Playwright Trace Viewer

When a test fails, open the trace file with npx playwright show-trace to replay the test step by step with screenshots, network requests, and console logs.

CI Integration

Playwright runs headless by default in CI. Install browsers with npx playwright install --with-deps and run tests as a normal npm script.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Quick Check

Which Playwright method should you use to fill a text input field?

Recap

Playwright tests real browsers and auto-waits for elements. Use role-based locators, fill() and click() for interactions, expect(locator) for assertions, and --ui mode for visual debugging during development.

Frequently asked questions

Is the “Getting Started with Playwright for React” lesson free?

Yes — the full text of “Getting Started with Playwright for React” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Getting Started with Playwright for React”?

Write Playwright tests that open a browser, interact with the React app, and assert on results. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Getting Started with Playwright for React” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Integration Testing with React Testing Library
  2. Testing Async UI & API Calls with MSW
  3. Getting Started with Playwright for React
  4. Testing Forms & User Flows End-to-End
← Back to React Academy