generate by alirezarezvani/claude-skills
npx skills add https://github.com/alirezarezvani/claude-skills --skill generate根据用户故事、URL、组件名称或功能描述,生成可用于生产环境的 Playwright 测试。
$ARGUMENTS 包含要测试的内容。示例:
"用户可以使用邮箱和密码登录""结账流程""src/components/UserProfile.tsx""带筛选器的搜索页面"解析 $ARGUMENTS 以确定:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
使用 Explore 子代理收集上下文信息:
playwright.config.ts 以获取 testDir、baseURL、projectstestDir 中的现有测试,了解模式、夹具和约定pages/ 中是否已存在页面对象fixtures/ 中是否已存在夹具auth.setup.ts 或 storageState 配置)检查此插件中的 templates/ 目录以寻找匹配的模式:
| 如果测试... | 从...加载模板 |
|---|---|
| 登录/身份验证流程 | templates/auth/login.md |
| CRUD 操作 | templates/crud/ |
| 结账/支付 | templates/checkout/ |
| 搜索/筛选 UI | templates/search/ |
| 表单提交 | templates/forms/ |
| 仪表板/数据 | templates/dashboard/ |
| 设置页面 | templates/settings/ |
| 新用户引导流程 | templates/onboarding/ |
| API 端点 | templates/api/ |
| 可访问性 | templates/accessibility/ |
将模板适配到具体的应用——用实际的选择器、URL 和数据替换 {{placeholders}}。
遵循以下规则:
结构:
import { test, expect } from '@playwright/test';
// 如果项目使用了自定义夹具,则导入它们
test.describe('功能名称', () => {
// 分组相关的行为
test('应该 <预期行为>', async ({ page }) => {
// 准备:导航、设置状态
// 执行:执行用户操作
// 断言:验证结果
});
});
定位器优先级(使用第一个可用的):
getByRole() — 按钮、链接、标题、表单元素getByLabel() — 带有标签的表单字段getByText() — 非交互式文本内容getByPlaceholder() — 带有占位符文本的输入框getByTestId() — 当语义选项不可用时断言 — 始终优先使用 Web 优先的断言:
// 良好 — 自动重试
await expect(page.getByRole('heading')).toBeVisible();
await expect(page.getByRole('alert')).toHaveText('Success');
// 不佳 — 无重试
const text = await page.textContent('.msg');
expect(text).toBe('Success');
切勿使用:
page.waitForTimeout()page.$(selector) 或 page.$$(selector)page.evaluate()始终包含:
awaitbaseURL 的导航(使用 page.goto('/') 而非 page.goto('http://...')).spec.ts.spec.js 并使用 require() 导入test-data/ 中创建一个 JSON 文件运行生成的测试:
npx playwright test <生成的文件> --reporter=list
如果测试失败:
每周安装量
88
代码仓库
GitHub 星标数
4.1K
首次出现
7 天前
安全审计
已安装于
codex83
cursor82
github-copilot82
amp82
cline82
kimi-cli82
Generate production-ready Playwright tests from a user story, URL, component name, or feature description.
$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"Parse $ARGUMENTS to determine:
Use the Explore subagent to gather context:
playwright.config.ts for testDir, baseURL, projectstestDir for patterns, fixtures, and conventionspages/fixtures/auth.setup.ts or storageState config)Check templates/ in this plugin for matching patterns:
| If testing... | Load template from |
|---|---|
| Login/auth flow | 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/ |
Adapt the template to the specific app — replace {{placeholders}} with actual selectors, URLs, and data.
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 availableAssertions — 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) or page.$$(selector)page.evaluate() for things locators can doAlways include:
await on every Playwright callbaseURL-relative navigation (page.goto('/') not page.goto('http://...')).spec.ts.spec.js with require() importstest-data/Run the generated test:
npx playwright test <generated-file> --reporter=list
If it fails:
Weekly Installs
88
Repository
GitHub Stars
4.1K
First Seen
7 days ago
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
codex83
cursor82
github-copilot82
amp82
cline82
kimi-cli82
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
27,400 周安装
| Settings page | templates/settings/ |
| Onboarding flow | templates/onboarding/ |
| API endpoints | templates/api/ |
| Accessibility | templates/accessibility/ |