📌 Introduction Link to heading

Playwright is a modern end-to-end testing library developed by Microsoft. It enables reliable testing for web applications across all modern rendering engines — Chromium, Firefox, and WebKit — with a single API.

Playwright is fast, flexible, and developer-friendly, supporting powerful features like:

  • Headless browser testing
  • Auto-waiting for elements
  • Screenshots & video recording
  • Built-in support for multiple browsers and devices
  • Cross-platform test execution

🚀 Getting Started with Playwright Link to heading

1. 📦 Installation Link to heading

You can install Playwright using npm or yarn:

npm init playwright@latest
# or
npm install -D @playwright/test

To install browser binaries:

npx playwright install

📁 Project Structure Link to heading

A typical Playwright project looks like:

playwright.config.ts
tests/
  └── example.spec.ts
tests-examples/
  └── login.spec.ts

✍️ Writing Your First Test Link to heading

Let’s create a basic test using Playwright’s built-in test runner @playwright/test.

📄 example.spec.ts Link to heading

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

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

  // Expect title to contain Playwright
  await expect(page).toHaveTitle(/Playwright/);

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

  // Expect the URL to contain intro
  await expect(page).toHaveURL(/.*intro/);
});

🧪 Run the Test Link to heading

npx playwright test

🌍 Cross-Browser Testing Link to heading

Playwright supports:

  • Chromium (Chrome, Edge)
  • Firefox
  • WebKit (Safari)

Update playwright.config.ts to test on all browsers:

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

export default defineConfig({
  projects: [
    { name: 'Chromium', use: { browserName: 'chromium' } },
    { name: 'Firefox', use: { browserName: 'firefox' } },
    { name: 'WebKit', use: { browserName: 'webkit' } },
  ],
});

📱 Emulating Devices Link to heading

You can emulate real-world devices using devices from Playwright.

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

projects: [
  {
    name: 'Mobile Safari',
    use: devices['iPhone 13'],
  },
]

📸 Screenshots & Videos Link to heading

Enable media capture in playwright.config.ts:

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

Inside your test:

await page.screenshot({ path: 'screenshot.png' });

🔐 Authentication Testing Link to heading

Example: Login and Save Storage State Link to heading

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

test('login and save state', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('button[type="submit"]');

  // Save state to file
  await page.context().storageState({ path: 'auth.json' });
});

Then reuse this state:

// playwright.config.ts
use: {
  storageState: 'auth.json'
}

🧱 Component Testing (React, Vue, etc.) Link to heading

Playwright supports component testing with frameworks like React, Vue, and Angular via its component testing mode.

npx playwright test --project=react

Learn more: Component Testing

🧰 Useful Utilities Link to heading

  • Fixtures: Custom test setup/teardown
  • Trace Viewer: Visualize what happened in a test
  • Parallel Execution: Speed up test runs
npx playwright show-trace trace.zip

📊 CI Integration Link to heading

Playwright integrates seamlessly with CI tools like GitHub Actions, GitLab CI, CircleCI, etc.

Example: GitHub Actions Link to heading

name: Playwright Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npx playwright install --with-deps
      - run: npx playwright test

🧠 Best Practices Link to heading

  • Use data-testid or getByRole for reliable selectors
  • Isolate test state with beforeEach and afterEach
  • Keep tests deterministic and idempotent
  • Mock API responses when needed
  • Use page.waitForURL or expect to ensure stability

📚 Resources Link to heading

✅ Conclusion Link to heading

Playwright is a robust and modern tool for end-to-end testing. Whether you’re testing across browsers, simulating mobile devices, or integrating into CI pipelines, Playwright offers everything needed to deliver high-quality web applications.