---
name: qa-playwright-pro
description: "Generate Playwright E2E tests from user stories, with stable selectors and fixtures. Takes a user story, writes a Playwright test, adds visual regression snapshots, and sets up a fixture for auth."
license: MIT
---

# 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

```bash
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:

```ts
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.