# Playwright

> Write effective end-to-end tests using Playwright for web applications. Use when this capability is needed.

- Skill: `tomevault-io/playwright-10` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/playwright-10`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/playwright-10/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/playwright-10

---


# Playwright Skill

## Purpose
Write effective end-to-end tests using Playwright for web applications.

## Core Concepts

### Page Object Model
Encapsulate page interactions in reusable classes.

```typescript
class LoginPage {
  constructor(private page: Page) {}
  
  async login(email: string, password: string) {
    await this.page.fill('[data-testid="email"]', email);
    await this.page.fill('[data-testid="password"]', password);
    await this.page.click('[data-testid="submit"]');
  }
}
```

### Locator Strategies (Priority Order)
1. `data-testid` attributes (most stable)
2. Accessible roles and names
3. Text content
4. CSS selectors (least preferred)

### Waiting Strategies
- Auto-wait for elements (built-in)
- `waitForSelector` for dynamic content
- `waitForResponse` for API calls
- `waitForLoadState` for navigation

## Best Practices

1. **Use Test IDs** - Add `data-testid` for test stability
2. **Isolate Tests** - Each test should be independent
3. **Mock Strategically** - Mock external services, not internal logic
4. **Screenshot on Failure** - Capture state for debugging
5. **Parallel Execution** - Use workers for speed

## Common Patterns

```typescript
// Wait for API response
await page.waitForResponse(resp => 
  resp.url().includes('/api/users') && resp.status() === 200
);

// Screenshot on failure
test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status !== testInfo.expectedStatus) {
    await page.screenshot({ path: `failure-${testInfo.title}.png` });
  }
});
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/hffmnnj) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->