QA Playwright Pro

QA Playwright Pro turns plain-language user stories into runnable Playwright end-to-end tests, complete with resilient locators, an authentication fixture, and visual regression snapshots. It's built for frontend engineers and QA folks who want their acceptance criteria expressed as *.spec.ts files rather than written up in a ticket and forgotten. Hand it a story, get a test you can actually commit.

When to use it

• You've just shipped a feature and need an E2E test covering the happy path plus a couple of edge cases.
• A flaky suite is full of page.click('.btn-3')-style selectors and you want them rewritten around roles and test IDs.
• You want pixel-diff coverage on a component or page but don't want to hand-author toHaveScreenshot() calls and baseline config.
• Your tests keep logging in through the UI on every run and you want a shared auth fixture instead.

What it does

Given a story like "As a member, I can update my display name in settings," the skill generates a test() block using @playwright/test. Selectors favor page.getByRole(), getByLabel(), and getByTestId() over CSS/XPath, with web-first assertions (expect(locator).toBeVisible()) that auto-wait instead of fixed sleeps.

For auth it writes a storageState-based setup: a globalSetup or a dependent project that logs in once, saves cookies/localStorage to a JSON file, and a fixture that loads it so every test starts authenticated. Visual coverage is added via expect(page).toHaveScreenshot(), and it can scaffold the snapshotPathTemplate and threshold options in playwright.config.ts.

Usage

curl -fsSL --create-dirs -o ~/.claude/skills/qa-playwright-pro/SKILL.md https://claudeskil.com/skills/qa-playwright-pro/SKILL.md

# then, in your project:
"Write a Playwright test for: As a user, I can add an item to my cart
 and see the cart count increment. Use a logged-in fixture and snapshot
 the cart drawer."

Produces something like:

test('cart count increments after adding an item', async ({ page }) => {
  await page.goto('/products/widget');
  await page.getByRole('button', { name: 'Add to cart' }).click();
  await expect(page.getByTestId('cart-count')).toHaveText('1');
  await expect(page.getByTestId('cart-drawer')).toHaveScreenshot('cart-drawer.png');
});

Tips & gotchas

• Run npx playwright test --update-snapshots once to create baselines; the first visual run has nothing to diff against and would otherwise "fail."
• Snapshots are OS- and browser-specific. Generate baselines in the same environment as CI (usually a Linux container) or they'll diff on font rendering.
• The auth fixture reuses storageState until tokens expire — regenerate it if your login flow or session length changes.
• Prefer adding data-testid attributes for elements without accessible roles; the skill will use them, keeping selectors stable across refactors.

FAQ

Does it support component tests too? Its focus is full-page E2E. It can produce experimental @playwright/experimental-ct-react tests if you ask, but coverage is best for page-level flows.

Will it run the tests? It writes them. You run npx playwright test (and --update-snapshots for baselines). It does not commit or push on its own.

Can I keep my existing config? Yes. It merges into your current playwright.config.ts rather than overwriting projects or reporters.