Guide · Agent skill
How to use the Generate Playwright Tests agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The generate skill is an agent skill that writes Playwright end-to-end tests for a login flow, page, component, or feature. It is aimed at developers who already use Playwright and want a faster first draft. This guide explains what the skill does, how to install it, how to trigger it, and what to check before you trust the tests it writes.
Generate Playwright Testsalirezarezvani/claude-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the generate skill ZIP from this page and unzip it. Confirm the folder contains SKILL.md and patterns.md.
- 2Choose an install location. Place the folder in ~/.claude/skills/ for personal use, or in your project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.
- 3Confirm project requirements. Make sure Node.js and npm are installed, Playwright (@playwright/test) is in the project, and a playwright.config.ts file exists.
- 4Start your local app. Run the app the tests will target so the generated tests have something to load through baseURL.
- 5Ask for tests in plain language. Describe the user story, page, component, or feature, using a trigger phrase such as "write tests" or "test this page".
- 6Review the generated files. Read the spec file, any page objects, fixtures, or test data, and check that the assertions match the intended behavior.
- 7Check the test run. Look at the run result the agent reports. If a test fails, confirm whether the agent fixed the test or flagged a real app issue.
What the generate skill makes the agent do
An agent skill is a folder containing a SKILL.md file that tells a compatible agent how to handle a specific kind of task. This skill covers writing Playwright tests. You give the agent a user story, a URL, a component path, or a feature description, and it works through a fixed set of steps.
The agent first reads your playwright.config.ts and existing tests to pick up your conventions, such as testDir, baseURL, projects, fixtures, page objects, and auth setup. It then selects a matching template for the kind of flow you are testing and generates a spec file. After writing the test, it runs it with npx playwright test and reports the result.
- Finds elements by role, label, text, placeholder, or test ID, in that order of preference.
- Uses web-first assertions such as toBeVisible and toHaveText, which retry automatically.
- Creates page objects, fixtures, or JSON test data files when the test needs them.
- Includes error and edge-case tests alongside the happy path.
Install the generate skill from the ZIP
Download the ZIP for the generate skill from this page and unzip it. The skill folder contains SKILL.md and patterns.md. Put that folder in one of two places depending on how you want to use it.
For a personal install available across your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into the .claude/skills/ folder inside that project. A project-level install is useful when you want the whole team to share the same conventions.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal: ~/.claude/skills/
- Project: <your-project>/.claude/skills/
- Claude apps: Settings → Capabilities → Skills
Check your project before you run it
The skill assumes a working Playwright setup. Before you ask for tests, confirm that the project meets the requirements listed for this skill. Results are unreliable in projects that do not use Playwright conventions.
- Node.js and npm are installed, so npx playwright test works.
- Playwright (@playwright/test) is installed in the target project.
- A playwright.config.ts file exists in the project.
- Your agent runtime supports SKILL.md skills and subagents.
- A local app is running that the tests can point at through baseURL.
npx playwright test <generated-file> --reporter=listTrigger the skill with natural requests
You do not need to name the skill. The description in SKILL.md tells the agent when to use it. Phrases that match include "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", and "test this feature".
Be specific about the behavior. The skill turns your words into the test target, so a clear user story produces clearer test names and assertions.
- "Write tests for the user can log in with email and password."
- "Add tests for the checkout flow."
- "Test this component: src/components/UserProfile.tsx"
- "Generate tests for the search page with filters."
Review the output and fix failing tests
The output lists the generated test file paths, any supporting files, the test run result, and a coverage note describing which behaviors are now tested. Read the tests before you commit them. Generated tests can assert the wrong behavior.
If a test fails, the skill tells the agent to read the error, fix the test rather than the app, run again, and report to you if the problem is in the app. Check that the agent did not weaken an assertion just to make it pass.
- Confirm each assertion matches the behavior you actually want.
- Check that navigation uses relative paths such as page.goto('/').
- Look at any new page object or fixture files for fit with your project.
Safety notes: scripts and network
This skill runs scripts. It runs Playwright through npx, which executes commands in your project and starts browser tests against the app you point it at. Review what the agent is about to run and run it in a project you control.
The skill does not use the network according to its listing. It still runs tests against your app, so use a local or test environment rather than production data.
- Runs scripts: yes
- Uses network: no
What people use it for
- Turning a login user story into browser tests covering valid and invalid credentials.
- Adding tests for a checkout or search page that already has a Playwright setup.
- Generating a first draft of tests for a component from its source file, then refining them.
- Creating a page object or test data file for a page that has many locators.
Frequently asked questions
How do I install the generate Playwright skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills.
What does the Playwright generate skill require?
It requires Node.js and npm, Playwright (@playwright/test) installed in the target project, a playwright.config.ts file, and an agent runtime that supports SKILL.md skills and subagents. It also needs a local app to test against.
Is the generate skill free to use?
The source gives the licence as MIT. It does not list a price, so check the repository for licence terms before using it in a commercial project.
Can I use this skill without Playwright?
No. The skill assumes Playwright config and conventions, and results will be unreliable in projects that do not use Playwright.
Are the generated tests guaranteed to be correct?
No. Generated tests can assert the wrong behavior, so review each assertion. The skill tells the agent to fix tests rather than the app when they fail, which means you should still check the changes it makes.
Does the skill send my code over the network?
The listing says it uses no network, but it does run scripts such as npx playwright test. Run it in a project you control against a local or test environment.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the generate skill if you already run Playwright and want faster first drafts of end-to-end tests that follow your project's existing conventions. Pick something else if your project does not use Playwright or if you need tests you can trust without reviewing them.
Download the skill