Write and Verify Playwright Tests
appsmithorg/appsmith
Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.
Generate Playwright tests. An agent skill from alirezarezvani/claude-skills.
Install Generate
$ npx skills add alirezarezvani/claude-skills --skill generate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install alirezarezvani/claude-skills generate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .claude/skills/generate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .claude/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add alirezarezvani/claude-skills --skill generate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install alirezarezvani/claude-skills generate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .agents/skills/generate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .agents/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add alirezarezvani/claude-skills --skill generate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install alirezarezvani/claude-skills generate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .cursor/skills/generate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .cursor/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/alirezarezvani/claude-skills.git --path engineering-team/playwright-pro/skills/generate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add alirezarezvani/claude-skills --skill generate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install alirezarezvani/claude-skills generate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .gemini/skills/generate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .gemini/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install alirezarezvani/claude-skills generateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add alirezarezvani/claude-skills --skill generate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .github/skills/generate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .github/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add alirezarezvani/claude-skills --skill generate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install alirezarezvani/claude-skills generate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/alirezarezvani/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/engineering-team/playwright-pro/skills/generate .opencode/skills/generate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "generate" agent skill from https://github.com/alirezarezvani/claude-skills/tree/main/engineering-team/playwright-pro/skills/generate into .opencode/skills/generate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
generate- GitHub stars
- 28k
- Used in
- 1 other repo
- Token cost
- ~1.1k tokens
- SKILL.md length
- 452 words
- Files
- 2
- Skills in repo
- 342
- Repo updated
- First seen
- Licence
- MIT
At a glance
Generate Playwright tests. An agent skill from alirezarezvani/claude-skills.
- Works in 7 steps: Understand the Target → Explore the Codebase → Select Templates → …
- User says write tests
- SKILL.md covers Input, Steps and Output
- Calls npx
What it does
Generate is an agent skill from alirezarezvani/claude-skills. Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `patterns.md`).
It sits in Testing & QA, covering Test generation, Browser testing and End-to-end testing. It works with Playwright. The repository describes itself as: 380 Claude Code skills & agent skills & plugins (30+ Agents, 70+ custom commands, 380+ skills, customizable references, scripts)for Claude Code, Codex, Gemini CLI, Cursor, and 8… The licence is MIT.
When your agent uses it
- User says write tests
- Test this component
- Create test for
- Test this feature
Example prompts
- “write tests”
- “generate tests”
- “add tests for”
- “/generate”
Requirements
- Node.js
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 19392f7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Generate loads about 1.1k tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 452 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from alirezarezvani/claude-skills at commit 19392f7, republished under its MIT licence (© alirezarezvani). 452 words, ~1,131 tokens.
Download SKILL.mdSave it as
.claude/skills/generate/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- generate
- description
- Generate Playwright tests. Use when user says "write tests", "generate tests", "add tests for", "test this component", "e2e test", "create test for", "test this page", or "test this feature".
Generate Playwright Tests
Generate production-ready Playwright tests from a user story, URL, component name, or feature description.
Input
$ARGUMENTS contains what to test. Examples:
"user can log in with email and password""the checkout flow""src/components/UserProfile.tsx""the search page with filters"
Steps
1. Understand the Target
Parse $ARGUMENTS to determine:
- User story: Extract the behavior to verify
- Component path: Read the component source code
- Page/URL: Identify the route and its elements
- Feature name: Map to relevant app areas
2. Explore the Codebase
Use the Explore subagent to gather context:
- Read
playwright.config.tsfortestDir,baseURL,projects - Check existing tests in
testDirfor patterns, fixtures, and conventions - If a component path is given, read the component to understand its props, states, and interactions
- Check for existing page objects in
pages/ - Check for existing fixtures in
fixtures/ - Check for auth setup (
auth.setup.tsorstorageStateconfig)
3. Select Templates
Check templates/ in this plugin for matching patterns:
| If testing... | Load template from |
|---|---|
| Login/auth flow | ../pw/templates/auth/login.md |
| CRUD operations | templates/crud/ |
| Checkout/payment | templates/checkout/ |
| Search/filter UI | templates/search/ |
| Form submission | templates/forms/ |
| Dashboard/data | templates/dashboard/ |
| Settings page | templates/settings/ |
| Onboarding flow | templates/onboarding/ |
| API endpoints | templates/api/ |
| Accessibility | templates/accessibility/ |
Adapt the template to the specific app — replace {{placeholders}} with actual selectors, URLs, and data.
4. Generate the Test
Follow these rules:
Structure:
import { test, expect } from '@playwright/test';
// Import custom fixtures if the project uses them
test.describe('Feature Name', () => {
// Group related behaviors
test('should <expected behavior>', async ({ page }) => {
// Arrange: navigate, set up state
// Act: perform user action
// Assert: verify outcome
});
});Locator priority (use the first that works):
getByRole()— buttons, links, headings, form elementsgetByLabel()— form fields with labelsgetByText()— non-interactive text contentgetByPlaceholder()— inputs with placeholder textgetByTestId()— when semantic options aren't available
Assertions — always web-first:
// GOOD — auto-retries
await expect(page.getByRole('heading')).toBeVisible();
await expect(page.getByRole('alert')).toHaveText('Success');
// BAD — no retry
const text = await page.textContent('.msg');
expect(text).toBe('Success');Never use:
page.waitForTimeout()page.$(selector)orpage.$$(selector)- Bare CSS selectors unless absolutely necessary
page.evaluate()for things locators can do
Always include:
- Descriptive test names that explain the behavior
- Error/edge case tests alongside happy path
- Proper
awaiton every Playwright call baseURL-relative navigation (page.goto('/')notpage.goto('http://...'))
Show full SKILL.md (159 more words)Show less
5. Match Project Conventions
- If project uses TypeScript → generate
.spec.ts - If project uses JavaScript → generate
.spec.jswithrequire()imports - If project has page objects → use them instead of inline locators
- If project has custom fixtures → import and use them
- If project has a test data directory → create test data files there
6. Generate Supporting Files (If Needed)
- Page object: If the test touches 5+ unique locators on one page, create a page object
- Fixture: If the test needs shared setup (auth, data), create or extend a fixture
- Test data: If the test uses structured data, create a JSON file in
test-data/
7. Verify
Run the generated test:
npx playwright test <generated-file> --reporter=listIf it fails:
- Read the error
- Fix the test (not the app)
- Run again
- If it's an app issue, report it to the user
Output
- Generated test file(s) with path
- Any supporting files created (page objects, fixtures, data)
- Test run result
- Coverage note: what behaviors are now tested
© alirezarezvani, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in engineering-team/playwright-pro/skills/generate of alirezarezvani/claude-skills.
- SKILL.md
- patterns.md
Open the folder on GitHubat commit 19392f7
Used in 1 other repository
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in alirezarezvani/claude-skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Generate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Generate this skillalirezarezvani/claude-skills | 28k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Write and Verify Playwright Testsappsmithorg/appsmith | 41k | — | ~2.9k | Automated safety check: Notes | Apache-2.0 | |
| Dev Webtest Planclassmethod/tsumiki | 974 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Record E2E Giflablup/backend.ai-webui | 133 | — | ~907 | Automated safety check: Notes | LGPL-3.0 | |
| Replica TestJakeschincariol/replica-skill | 734 | — | ~819 | Automated safety check: Pass | MIT | |
| Playwright Testingaehrc/pathling | 137 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Dev Webtest Plan
classmethod/tsumiki
This skill should be used when the user asks to "dev-webtest-plan", "Webテスト計画を生成", "テスト計画を作成", "webtest plan", "E2Eテスト計画", "画面テスト計画", "generate webtest plan", "create test plan from requirements"…
Record E2E Gif
lablup/backend.ai-webui
Record Playwright e2e tests as one GIF per test case (video → ffmpeg palette GIF) and return a markdown table for a PR description.
Replica Test
Jakeschincariol/replica-skill
Clicks through every flow of an app clone and tests it for bugs: a test plan generated from the recon flows with happy paths and edge cases, Playwright end-to-end tests where possible, a browser…
Playwright Testing
aehrc/pathling
Expert guidance for writing end-to-end tests with Playwright Test framework.
Uat Testing
ooiyeefei/ccc
End-to-end User Acceptance Testing for web applications. An agent skill from ooiyeefei/ccc.
More from alirezarezvani/claude-skills
All 342 skills in this repoAgile Product Owner
alirezarezvani/claude-skills
Writes INVEST-checked user stories with acceptance criteria, splits epics, plans sprints from velocity and ranks the backlog with a weighted score.
Product Strategist
alirezarezvani/claude-skills
OKR cascade toolkit for product leaders: generates aligned company-to-team OKRs from five strategy types and scores how well they line up.
App Store Optimization
alirezarezvani/claude-skills
App Store Optimization (ASO) toolkit for researching keywords, analyzing competitor rankings, generating metadata suggestions, and improving app visibility on Apple App Store and Google Play Store.
AWS Solution Architect
alirezarezvani/claude-skills
Design AWS architectures for startups using serverless patterns and IaC templates.
Campaign Analytics
alirezarezvani/claude-skills
Calculates attribution, funnel and ROI figures for marketing campaigns with three Python scripts that need only the standard library.
Code to PRD
alirezarezvani/claude-skills
Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.
Related
Works with
Categories
Questions about Generate
What does Generate do?
Generate Playwright tests. An agent skill from alirezarezvani/claude-skills. Generate is an agent skill from alirezarezvani/claude-skills. Generate Playwright tests.
When should I use Generate?
Generate fits situations like: user says write tests; test this component; create test for; test this feature.
How do I install Generate in Claude Code?
Run `npx skills add alirezarezvani/claude-skills --skill generate -a claude-code`. Or copy the skill folder (engineering-team/playwright-pro/skills/generate in alirezarezvani/claude-skills) into .claude/skills/generate in your project. Claude Code loads it when a task matches its description.
How do I install Generate in Codex?
Run `npx skills add alirezarezvani/claude-skills --skill generate -a codex`. Or copy the skill folder (engineering-team/playwright-pro/skills/generate in alirezarezvani/claude-skills) into .agents/skills/generate in your project. Codex loads it when a task matches its description.
Can I use Generate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add alirezarezvani/claude-skills --skill generate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/generate, .gemini/skills/generate, .github/skills/generate and .opencode/skills/generate in your project.
What does Generate need to run?
Going by SKILL.md and its folder, Generate needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Generate access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Generate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Generate use?
Generate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Generate use?
About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Generate?
Skills that share tags, products or a category with Generate: Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars), Dev Webtest Plan (classmethod/tsumiki, 974 stars), Record E2E Gif (lablup/backend.ai-webui, 133 stars) and Replica Test (Jakeschincariol/replica-skill, 734 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Generate?
alirezarezvani (a GitHub user) maintains it in alirezarezvani/claude-skills, which has 27,788 GitHub stars. The repository holds 342 skills in this directory. The repository was last updated on August 30, 2026.
Source: alirezarezvani/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.