MCPInstall

generate

Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".

Installs
1.6K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/alirezarezvani/claude-skills --skill generate
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads generate automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Generate Playwright Tests

Generate production-ready Playwright tests from a user story, URL, component name, or feature description.

Input

$ARGUMENTS contains what to test. Examples:

  • "user can log in with email and password"
  • "the checkout flow"
  • "src/components/UserProfile.tsx"
  • "the search page with filters"

Steps

1. Understand the Target

Parse $ARGUMENTS to determine:

  • User story: Extract the behavior to verify
  • Component path: Read the component source code
  • Page/URL: Identify the route and its elements
  • Feature name: Map to relevant app areas

2. Explore the Codebase

Use the Explore subagent to gather context:

  • Read playwright.config.ts for testDir, baseURL, projects
  • Check existing tests in testDir for patterns, fixtures, and conventions
  • If a component path is given, read the component to understand its props, states, and interactions
  • Check for existing page objects in pages/
  • Check for existing fixtures in fixtures/
  • Check for auth setup (auth.setup.ts or storageState config)

3. Select Templates

Check templates/ in this plugin for matching patterns:

If testing...Load template from
Login/auth flow../pw/templates/auth/login.md
CRUD operationstemplates/crud/
Checkout/paymenttemplates/checkout/
Search/filter UItemplates/search/
Form submissiontemplates/forms/
Dashboard/datatemplates/dashboard/
Settings pagetemplates/settings/
Onboarding flowtemplates/onboarding/
API endpointstemplates/api/
Accessibilitytemplates/accessibility/

Adapt the template to the specific app — replace {{placeholders}} with actual selectors, URLs, and data.

4. Generate the Test

Follow these rules:

Structure:

import { test, expect } from '@playwright/test';
// Import custom fixtures if the project uses them

test.describe('Feature Name', () => {
  // Group related behaviors

  test('should <expected behavior>', async ({ page }) => {
    // Arrange: navigate, set up state
    // Act: perform user action
    // Assert: verify outcome
  });
});

Locator priority (use the first that works):

  1. getByRole() — buttons, links, headings, form elements
  2. getByLabel() — form fields with labels
  3. getByText() — non-interactive text content
  4. getByPlaceholder() — inputs with placeholder text
  5. getByTestId() — when semantic options aren't available

Assertions — always web-first:

// GOOD — auto-retries
await expect(page.getByRole('heading')).toBeVisible();
await expect(page.getByRole('alert')).toHaveText('Success');

// BAD — no retry
const text = await page.textContent('.msg');
expect(text).toBe('Success');

Never use:

  • page.waitForTimeout()
  • page.$(selector) or page.$$(selector)
  • Bare CSS selectors unless absolutely necessary
  • page.evaluate() for things locators can do

Always include:

  • Descriptive test names that explain the behavior
  • Error/edge case tests alongside happy path
  • Proper await on every Playwright call
  • baseURL-relative navigation (page.goto('/') not page.goto('http://...'))

5. Match Project Conventions

  • If project uses TypeScript → generate .spec.ts
  • If project uses JavaScript → generate .spec.js with require() imports
  • If project has page objects → use them instead of inline locators
  • If project has custom fixtures → import and use them
  • If project has a test data directory → create test data files there

6. Generate Supporting Files (If Needed)

  • Page object: If the test touches 5+ unique locators on one page, create a page object
  • Fixture: If the test needs shared setup (auth, data), create or extend a fixture
  • Test data: If the test uses structured data, create a JSON file in test-data/

7. Verify

Run the generated test:

npx playwright test <generated-file> --reporter=list

If it fails:

  1. Read the error
  2. Fix the test (not the app)
  3. Run again
  4. If it's an app issue, report it to the user

Output

  • Generated test file(s) with path
  • Any supporting files created (page objects, fixtures, data)
  • Test run result
  • Coverage note: what behaviors are now tested

FAQ

What does the generate skill do?

Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".

How do I install generate?

Run npx skills add https://github.com/alirezarezvani/claude-skills --skill generate in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/generate/ (personal) or .claude/skills/generate/ (project).

Which AI agents can use generate?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is generate safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains generate?

It is published by alirezarezvani in alirezarezvani/claude-skills. It has 1,625 recorded installs.

More from alirezarezvani/claude-skills

View all →

engineering-skills

alirezarezvani/claude-skills

Index of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365 (stdlib-only Python tools). Use when browsing or choosing among engineering-team role skills — load only the one specialist SKILL.md you need, never bulk-load the bundle.

Backend & APIs2.4K installs

finance-skills

alirezarezvani/claude-skills

Router/index for the finance skills bundled in this plugin: financial-analyst (ratio analysis, DCF valuation, budget variance, rolling forecasts), saas-metrics-coach (ARR/MRR, churn, CAC/LTV, NRR, quick ratio) and month-end-close (close calendar, reconciliations, flux review). Use when a finance request doesn't obviously match one skill and you need to pick the right one (e.g., 'analyze these financials', 'how healthy are my SaaS metrics').

Business & Finance2.3K installs

marketing-skills

alirezarezvani/claude-skills

Directory and router for the marketing skills library. Use when you need to find the right marketing skill for a task, see what marketing capabilities exist, or get oriented in this plugin. 44 specialist skills across 8 pods (content, SEO + AEO, CRO, channels, growth, intelligence, sales enablement, ops), 59 stdlib Python tools. Routes to one skill — it does not execute marketing work itself.

Marketing & SEO2.3K installs

business-growth-skills

alirezarezvani/claude-skills

Router/index for the 4 business & growth skills bundled in this plugin: customer-success-manager (health scoring, churn risk, expansion), sales-engineer (RFP analysis, competitive matrices, PoC planning), revenue-operations (pipeline, forecast accuracy, GTM efficiency), and contract-and-proposal-writer. Use when a growth/revenue request doesn't obviously match one skill and you need to pick the right one (e.g., 'which accounts are at risk', 'should we bid on this RFP').

Business & Finance2.2K installs

engineering-advanced-skills

alirezarezvani/claude-skills

Index of 37 advanced engineering agent skills for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Use when browsing or choosing among the POWERFUL-tier engineering skills: agent design, RAG, MCP servers, CI/CD, database design, observability, security auditing, changelog/release automation, reliability (SLO/chaos/flags/operators), platform ops.

AI & Agents2K installs

product-skills

alirezarezvani/claude-skills

Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, code-to-PRD, research summarizer). Triggers on 'help me prioritize', 'plan a product experiment', 'we ship features nobody uses', 'run the discovery loop', 'is our OST sound'. Forks context to route to one sub-skill via a deterministic signal router and returns a digest; can also drive a continuous-discovery loop (Torres cadence tracker + OST linter as machine gates) or a full goal→plan→execute→verify→close run through the repo-wide agent-harness. Distinct from project-management (how to deliver vs what to build), marketing/landing (from-scratch pages), and engineering/agent-harness (the generic loop engine this orchestrator plugs into).

Popular testing & qa skills

View category →

tdd

mattpocock/skills

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

Testing & QA1.2M installs

grilling

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Testing & QA996.2K installs

migrate-to-shoehorn

mattpocock/skills

Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.

Testing & QA484.1K installs

run-train

lllllllama/rigorpilot-skills

Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.

Testing & QA337.8K installs

test-driven-development

obra/superpowers

Use when implementing any feature or bugfix, before writing implementation code

Testing & QA261.8K installs

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

Testing & QA216.8K installs