Playwright E2E Test Planner skill for Claude and Codex

Playwright E2E Test Planner as an AI skill. It asks for The user flow, App URL or route, Login needed and 3 more, then does the rest. Free to install in…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

Use when a user flow in a web app needs Playwright tests with reliable locators, fixtures, and failure screenshots. Do not use for unit tests, load testing, or testing a mobile app. Related topics: coding, technical.

What it will ask you for

• The user flow (longer free text)
• App URL or route (free text, e.g. "Where the flow starts")
• Login needed (choose one: Yes, No)
• Test data setup (longer free text)
• Language (choose one: TypeScript, JavaScript)
• Browsers (choose any: Chromium, Firefox, WebKit)

How it works

1. Split the flow into steps and write the assertion that proves each step worked.
2. Choose a locator for every element, preferring role and accessible name, then label or test id.
3. Move login and data setup into fixtures so each test starts clean and does not depend on another.
4. Write the specs using web-first assertions instead of fixed waits, with screenshots and traces kept on failure.
5. List what the suite does not cover and give the command to run it in CI.

What you get

A table of planned tests with goals and assertions, then the spec and fixture code, then a short note on gaps and the CI command.

What it watches out for

• Chaining CSS selectors that break the first time the layout changes.
• Sharing one logged-in session and one record between tests, so a failure in one cascades into the rest.
• Using waitForTimeout to pass a flaky step, which makes the suite slow and still flaky.

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.