How do I install the Playwright Testing skill?

Run npx skillmds@latest add tomevault-io/playwright-testing-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Playwright Testing safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Playwright Testing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Playwright Testing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Playwright Testing?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Playwright Testing by tomevault-io — Agent Skill

Name: Playwright Testing
Author: tomevault-io

File contents

Playwright Testing Standard

MANDATORY TDD Workflow

RED: Write failing test FIRST (never assume success)
GREEN: Implement minimal code to pass test
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

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

<!DOCTYPE html>
<html>
<head>
    <title>Task Complete: [Feature Name]</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
</head>
<body>
    <h1>✅ [Feature Name] Complete</h1>
    
    <h2>Architecture</h2>
    <div class="mermaid">
    graph TB
        A[Component A] --> B[Component B]
    </div>
    
    <h2>Test Evidence</h2>
    <img src="test-evidence.png" />
    
    <h2>Final Outcome</h2>
    <img src="final-state.png" />
</body>
</html>

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:

Playwright test passes ✅
Visual dashboard generated ✅
Screenshots show desired outcome ✅

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: playwright-testing-7description: Enforces Test-Driven Development workflow using Playwright. Use when user requests tests, validation, E2E testing, or implementation tasks. Use when this capability is needed.---# Playwright Testing Standard## MANDATORY TDD Workflow1. **RED:** Write failing test FIRST (never assume success)2. **GREEN:** Implement minimal code to pass test3. **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```javascripttest('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<!DOCTYPE html><html><head> <title>Task Complete: [Feature Name]</title> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script></head><body> <h1>✅ [Feature Name] Complete</h1> <h2>Architecture</h2> <div class="mermaid"> graph TB A[Component A] --> B[Component B] </div> <h2>Test Evidence</h2> <img src="test-evidence.png" /> <h2>Final Outcome</h2> <img src="final-state.png" /></body></html>```## Prohibited Verification Methods- ❌ `grep` for text matching- ❌ `curl` for API testing - ❌ `wget` for download verification- ❌ Assumptions without test evidence## Success CriteriaTask 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.

Frequently asked questions

Playwright Testing