# Playwright — Cross-Browser End-to-End Testing Framework

> Reliable end-to-end testing for modern web apps across Chromium, Firefox, and WebKit with a single API.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Playwright — Cross-Browser End-to-End Testing Framework

## Quick Use
```bash
npm init playwright@latest
npx playwright test
npx playwright show-report
```

## Introduction
Playwright is a browser automation framework built by Microsoft for end-to-end testing of web applications. It supports Chromium, Firefox, and WebKit engines with a single API, enabling teams to test across all major browsers from one codebase.

## What Playwright Does
- Runs tests in parallel across Chromium, Firefox, and WebKit
- Auto-waits for elements to be actionable before interacting
- Captures traces, screenshots, and videos on failure for debugging
- Emulates mobile devices, geolocation, and permissions
- Intercepts network traffic for mocking APIs during tests

## Architecture Overview
Playwright controls browsers through persistent WebSocket connections to each engine's debugging protocol. It ships patched builds of Chromium, Firefox, and WebKit to guarantee consistent behavior. The test runner (`@playwright/test`) orchestrates parallel worker processes, each spinning up isolated browser contexts that share no cookies or storage, making tests hermetic by default.

## Self-Hosting & Configuration
- Initialize with `npm init playwright@latest` which scaffolds config and installs browsers
- Configure `playwright.config.ts` for base URL, timeouts, retries, and projects per browser
- Run `npx playwright install --with-deps` in CI to install browsers and system libraries
- Use `playwright.config.ts` projects array to test multiple viewports or devices
- Store auth state with `storageState` to avoid repeated login across tests

## Key Features
- Built-in test runner with fixtures, parallelism, and retries
- Codegen tool records user interactions and generates test scripts
- Trace viewer provides a timeline of every action, network call, and DOM snapshot
- Component testing support for React, Vue, and Svelte
- API testing utilities for making HTTP requests inside test specs

## Comparison with Similar Tools
- **Puppeteer** — Chrome-focused automation library; Playwright covers three engines plus a test runner
- **Cypress** — Runs inside the browser with time-travel UI; Playwright uses out-of-process control for true multi-tab and multi-origin support
- **Selenium** — Broad language support via WebDriver; Playwright is faster with auto-waiting and richer debugging tools
- **TestCafe** — No browser plugins needed; Playwright offers deeper browser control and trace-based debugging

## FAQ
**Q: Which browsers does Playwright support?**
A: Chromium (Chrome, Edge), Firefox, and WebKit (Safari) are all supported with first-class APIs.

**Q: Can Playwright test mobile apps?**
A: It emulates mobile browsers (viewport, user agent, touch) but does not automate native iOS or Android apps.

**Q: How does Playwright handle flaky tests?**
A: Auto-waiting, web-first assertions, and configurable retries reduce flakiness. Trace files help diagnose remaining issues.

**Q: Is Playwright free?**
A: Yes. Playwright is open source under the Apache 2.0 license with no commercial tiers.

## Sources
- https://github.com/microsoft/playwright
- https://playwright.dev

---
Source: https://tokrepo.com/en/workflows/playwright-cross-browser-end-end-testing-framework-af656d8e
Author: Microsoft AI