# Playwright Testing
> Enforces Test-Driven Development workflow using Playwright. Use when user requests tests, validation, E2E testing, or implementation tasks. Use when this capability is needed.
- Skill: `tomevault-io/playwright-testing-7` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/playwright-testing-7`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/playwright-testing-7/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/playwright-testing-7
---
# Playwright Testing Standard
## MANDATORY TDD Workflow
1. **RED:** Write failing test FIRST (never assume success)
2. **GREEN:** Implement minimal code to pass test
3. **REFACTOR:** Improve while tests pass
## Test Requirements
- **Selectors:** Use `data-testid` ONLY (never CSS/XPath)
- **Wait Strategy:** `await page.waitForLoadState('networkidle')` before assertions
- **User Perspective:** Test from user's viewpoint, not internal implementation
- **Visual Evidence:** Include screenshots in test output
## Test Structure Template
```javascript
test('feature description', async ({ page }) => {
// Arrange
await page.goto('/');
// Act
await page.getByTestId('action-button').click();
await page.waitForLoadState('networkidle');
// Assert
const result = await page.getByTestId('result');
await expect(result).toBeVisible();
await expect(result).toHaveText('expected value');
// Evidence
await page.screenshot({ path: 'test-evidence.png', fullPage: true });
});
```
## Visual Dashboard (MANDATORY)
After ALL tests pass, generate `task-dashboard.html`:
- **Mermaid diagrams:** Show architecture changes
- **Test screenshot:** Passing test output
- **Outcome screenshot:** Final UI state
- **Max 10 words per text block**
- **Max 20 bullets total**
## Dashboard Template
```html
Task Complete: [Feature Name]
✅ [Feature Name] Complete
Architecture
graph TB
A[Component A] --> B[Component B]
Test Evidence
Final Outcome
```
## Prohibited Verification Methods
- ❌ `grep` for text matching
- ❌ `curl` for API testing
- ❌ `wget` for download verification
- ❌ Assumptions without test evidence
## Success Criteria
Task is complete ONLY when:
1. Playwright test passes ✅
2. Visual dashboard generated ✅
3. Screenshots show desired outcome ✅
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/mikejsmith1985) — claim your Tome and manage your conversions.