Engineering TestingPlaywrightGeneration

Playwright Pro — Generate

Generate Playwright tests from user flows and page analysis.

$skillfish add ~skills/playwright-pro-generate

Real Examples Get Started Models & Context

Real Conversations

See how the Playwright Pro — Generate skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

Generate Playwright tests for our checkout flow. User adds item to cart, enters shipping address, pays with Stripe, gets order confirmation. We use Next.js App Router with TypeScript.

Agent

Scanning your codebase for routes and existing fixtures, then generating from the checkout/ templates. This skill includes executable scripts — I'll need your permission before running them.

Found: playwright.config.ts with baseURL: http://localhost:3000, e2e/fixtures/index.ts with authedPage fixture. Using that for auth.

Generated: e2e/checkout.spec.ts

import { test, expect } from '../fixtures';

test.describe('Checkout Flow', () => {
  test('should complete purchase end-to-end', async ({ authedPage: page }) => {
    await page.goto('/products/widget-pro');
    await page.getByRole('button', { name: 'Add to cart' }).click();
    await expect(page.getByRole('status', { name: 'Cart' })).toHaveText('1');

    await page.goto('/checkout');
    await page.getByLabel('Full name').fill('Taylor Kim');
    await page.getByLabel('Address').fill('123 Main St');

    // Stripe iframe
    const stripeFrame = page.frameLocator('[name^="__privateStripeFrame"]').first();
    await stripeFrame.getByPlaceholder('Card number').fill('4242424242424242');
    await stripeFrame.getByPlaceholder('MM / YY').fill('12/26');
    await stripeFrame.getByPlaceholder('CVC').fill('123');

    await page.getByRole('button', { name: 'Place order' }).click();
    await page.waitForResponse(r => r.url().includes('/api/orders') && r.status() === 201);
    await expect(page.getByRole('heading', { name: /order confirmed/i })).toBeVisible();
  });

  test('should show error for declined card', async ({ authedPage: page }) => {
    // uses Stripe test card 4000000000000002
  });
});

Run result: 5 tests passed (8.3s) — includes empty-cart guard, coupon code, and order history tests.

Want me to add the order history verification test?

You

Generate tests for src/components/UserProfile.tsx — it shows user avatar, name, bio, and an Edit button that opens a modal. I want complete coverage.

Agent

Reading the component source to identify all states and interactions.

Scanned src/components/UserProfile.tsx — found: avatar with fallback initials, name/bio display, Edit modal with form, loading skeleton, error state.

Generated: e2e/user-profile.spec.ts (7 tests)

test.describe('UserProfile', () => {
  test('should display user name and bio', async ({ page }) => {
    await page.goto('/profile/u_abc123');
    await expect(page.getByRole('heading', { name: 'Alex Rivera' })).toBeVisible();
    await expect(page.getByText('Senior engineer at Acme')).toBeVisible();
  });

  test('should show initials when avatar fails to load', async ({ page }) => {
    await page.route('**/avatars/**', route => route.abort());
    await page.goto('/profile/u_abc123');
    await expect(page.getByTestId('avatar-initials')).toHaveText('AR');
  });

  test('should open edit modal on button click', async ({ authedPage: page }) => {
    await page.goto('/profile/me');
    await page.getByRole('button', { name: 'Edit profile' }).click();
    await expect(page.getByRole('dialog', { name: 'Edit profile' })).toBeVisible();
    await expect(page.getByLabel('Bio')).toHaveValue('Senior engineer at Acme');
  });

  test('should save updated bio', async ({ authedPage: page }) => { /* fill, submit, assert */ });
  test('should show loading skeleton initially', async ({ page }) => { /* ... */ });
  test('should show error state for unknown user', async ({ page }) => { /* ... */ });
  test('should not show Edit button on other users profiles', async ({ page }) => { /* ... */ });
});

Run result: 7 passed (6.1s) — 100% of component states covered. Page object not created (only 4 unique locators — below the 5-locator threshold).

You

We're WCAG 2.1 AA compliant and need to prove it. Generate keyboard navigation and screen reader tests for our multi-step registration form.

Agent

Using the accessibility/keyboard-navigation.md and forms/multi-step.md templates. Checking your registration route first.

Found: /register — 3 steps: account details, org info, billing.

Generated: e2e/registration-a11y.spec.ts

test.describe('Registration — Accessibility', () => {
  test('should be fully keyboard navigable', async ({ page }) => {
    await page.goto('/register');

    await page.keyboard.press('Tab'); // focuses Email
    await expect(page.getByLabel('Email')).toBeFocused();
    await page.keyboard.type('test@example.com');
    await page.keyboard.press('Tab');
    await page.keyboard.type('SecurePass123!');
    await page.keyboard.press('Tab'); // Next button
    await page.keyboard.press('Enter');

    // Step 2 — confirm focus moves to first field
    await expect(page.getByLabel('Organization name')).toBeFocused();
  });

  test('should announce step changes to screen readers', async ({ page }) => {
    await page.goto('/register');
    const liveRegion = page.getByRole('status');
    await page.getByRole('button', { name: 'Next' }).click();
    await expect(liveRegion).toHaveText(/step 2 of 3/i);
  });

  test('should announce validation errors via ARIA', async ({ page }) => {
    await page.goto('/register');
    await page.getByRole('button', { name: 'Next' }).click(); // submit empty
    await expect(page.getByRole('alert').filter({ hasText: /email/i })).toBeVisible();
    await expect(page.getByLabel('Email')).toHaveAttribute('aria-invalid', 'true');
  });
});

3 passed (4.7s) — keyboard nav, ARIA live regions, and error announcement covered. Want me to add the color-contrast.md template too?

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase. Web-based AI can use the knowledge and frameworks, but won't have tool access.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Best

Claude Opus 4 Claude Sonnet 4 GPT-4.1 Gemini 2.5 Pro Grok 3 Kimi K2

Good

Claude Haiku 4.5 GPT-4.1 mini Gemini 2.5 Flash Grok 3 mini

Larger models produce more detailed, production-ready outputs.

Context Window

This skill's SKILL.md is typically 3–10 KB — fits in any modern context window.

8K Skill only

32K+ Skill + conversation

100K+ Skill + references + codebase

All current frontier models (Claude, GPT, Gemini) support 100K+ context. Use the full window for complex multi-service work.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Ready to try Playwright Pro — Generate?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.

$skillfish add ~skills/playwright-pro-generate

← Browse all 169 skills

Playwright Pro — Generate

Real Conversations

Get Started

Claude Code, OpenCode, or any CLI agent

Cursor, Windsurf, or IDE-based agents

Claude.ai, ChatGPT, Gemini, or any web AI

Models & Context

Recommended Models

Context Window

Pro tips for best results

Ready to try Playwright Pro — Generate?