# Playwright
Playwright is a cross-browser automation library developed by Microsoft that enables reliable end-to-end testing and web automation across Chromium, Firefox, and WebKit browsers. It supports multiple programming languages and provides powerful features like auto-waiting, tracing, and parallel test execution.
First released in 2020 by former [[Puppeteer]] team members who joined Microsoft.
## Key Features
### Cross-Browser Support
- **Chromium**: Chrome, Edge, Opera, Brave
- **Firefox**: Full support via custom protocol
- **WebKit**: Safari engine support
### Multi-Language Support
- JavaScript/TypeScript
- Python
- .NET (C#)
- Java
### Auto-Waiting
Automatically waits for elements to be actionable before performing actions, reducing flaky tests.
### Browser Contexts
Isolated browser sessions for parallel testing without interference.
### Powerful Selectors
- CSS selectors
- Text content matching
- XPath
- Role-based (accessibility)
- Custom selector engines
### Testing Features
- Test generator (codegen)
- Trace viewer for debugging
- Visual regression testing
- API testing support
- Component testing
## Installation
### JavaScript/TypeScript
```bash
npm init playwright@latest
# or
npm install @playwright/test
npx playwright install
```
### Python
```bash
pip install playwright
playwright install
```
## Basic Usage
### JavaScript
```javascript
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();
```
### Python
```python
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto('https://example.com')
page.screenshot(path='screenshot.png')
browser.close()
```
### Connect to Existing Browser
```javascript
// Connect to Chrome with --remote-debugging-port=9222
const browser = await chromium.connectOverCDP('http://localhost:9222');
```
See [[Chrome Debug Mode]] for running Chrome with debugging enabled.
## Test Example
```javascript
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('https://example.com');
// Auto-waits for element and checks
await expect(page).toHaveTitle(/Example/);
// Click and verify navigation
await page.click('text=More information');
await expect(page).toHaveURL(/iana.org/);
});
```
## Key Concepts
### Browser Contexts
Isolated sessions with separate cookies, storage, and cache:
```javascript
const context = await browser.newContext();
const page = await context.newPage();
```
### Locators
Recommended way to find elements with auto-retry:
```javascript
const button = page.locator('button:has-text("Submit")');
await button.click();
// Role-based locators
const nav = page.getByRole('navigation');
const input = page.getByPlaceholder('Search...');
const link = page.getByText('Click me');
```
### Assertions
Built-in assertions with auto-retry:
```javascript
await expect(page.locator('.status')).toHaveText('Success');
await expect(page.locator('img')).toBeVisible();
await expect(page).toHaveURL(/dashboard/);
```
## Tools
### Codegen (Test Generator)
```bash
npx playwright codegen example.com
```
Records your actions and generates test code.
### Trace Viewer
```bash
npx playwright show-trace trace.zip
```
Visual debugging with screenshots, DOM snapshots, and network logs.
### UI Mode
```bash
npx playwright test --ui
```
Interactive test runner with time-travel debugging.
## Configuration
```javascript
// playwright.config.js
export default {
testDir: './tests',
timeout: 30000,
retries: 2,
use: {
headless: true,
viewport: { width: 1280, height: 720 },
screenshot: 'only-on-failure',
trace: 'on-first-retry',
},
projects: [
{ name: 'chromium', use: { browserName: 'chromium' } },
{ name: 'firefox', use: { browserName: 'firefox' } },
{ name: 'webkit', use: { browserName: 'webkit' } },
],
};
```
## Playwright vs Puppeteer
| Feature | Playwright | [[Puppeteer]] |
|---------|------------|-----------|
| Browsers | Chrome, Firefox, Safari | Chrome only |
| Developer | Microsoft | Google |
| Languages | JS, Python, .NET, Java | JavaScript |
| Auto-wait | ✅ Built-in | Manual |
| Test runner | ✅ Built-in | External |
| Parallelism | ✅ Contexts | Manual |
## Related
- [[AI Agents Web Browsing]]
- [[Browser Use]]
- [[Vercel Agent Browser]]
- [[Puppeteer]] - Chrome-focused alternative
- [[Chrome DevTools Protocol (CDP)]] - Underlying protocol (Chromium)
- [[Chrome Debug Mode]] - Running Chrome with debugging
- [[Chrome DevTools]] - Browser developer tools
- [[socat]] - Bridge remote debugging connections
## References
- Official Documentation: https://playwright.dev/
- GitHub: https://github.com/microsoft/playwright
- Python Docs: https://playwright.dev/python/
- Test Generator: https://playwright.dev/docs/codegen