生成

generate

分类通用

作者Alireza Rezvani

许可MIT

评分4.70/5

使用9.0K

生成 Playwright 测试

根据用户故事、URL、组件名称或功能描述，生成生产就绪的 Playwright 测试。

输入

$ARGUMENTS 包含需要测试的内容。示例：

"user can log in with email and password"

"the checkout flow"

"src/components/UserProfile.tsx"

"the search page with filters"

步骤

1. 理解目标

解析 $ARGUMENTS 以确定：

用户故事：提取需要验证的行为

组件路径：读取组件源代码

页面/URL：识别路由及其元素

功能名称：映射到应用的相关区域

2. 探索代码库

使用 Explore 子代理收集上下文：

读取 playwright.config.ts 以获取 testDir、baseURL、projects

检查 testDir 中的现有测试，了解模式、fixtures 和约定

如果提供了组件路径，读取该组件以理解其 props、状态和交互

检查 pages/ 中是否存在 Page Objects

检查 fixtures/ 中是否存在现有 fixtures

检查身份验证设置（auth.setup.ts 或 storageState 配置）

3. 选择模板

检查本插件的 templates/ 目录以寻找匹配模式：

| 测试对象... | 加载模板路径 |
|---|---|
| 登录/认证流程 | ../pw/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/ |

根据具体应用调整模板 —— 将 {{placeholders}} 替换为实际的选择器、URL 和数据。

4. 生成测试

遵循以下规则：

结构：

typescript

import { test, expect } from '@playwright/test';
// 如果项目使用了自定义 fixtures，请在此导入
test.describe('功能名称', () => {
  // 将相关行为分组
test('应该 <预期行为>', async ({ page }) => {
    // Arrange: 导航，设置状态
    // Act: 执行用户操作
    // Assert: 验证结果
  });
});

定位器优先级（按顺序尝试）：
1. getByRole() — 按钮、链接、标题、表单元素
2. getByLabel() — 带有标签的表单字段
3. getByText() — 非交互式文本内容
4. getByPlaceholder() — 带有占位符文本的输入框
5. getByTestId() — 当语义化选项不可用时使用

断言 — 始终使用 Web-first 断言：

typescript

// 正确 — 自动重试
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)

除非绝对必要，否则不要使用纯 CSS 选择器

对于定位器能完成的操作，不要使用 page.evaluate()

必须包含：

能够解释行为的描述性测试名称

在正向路径之外，包含错误/边缘情况测试

每个 Playwright 调用必须正确使用 await

使用相对于 baseURL 的导航（使用 page.goto('/') 而非 page.goto('http://...')）

5. 匹配项目约定

如果项目...

若项目使用 TypeScript $\rightarrow$ 生成 .spec.ts

若项目使用 JavaScript $\rightarrow$ 生成使用 require() 导入的 .spec.js

若项目包含 Page Object $\rightarrow$ 使用 Page Object 而非内联定位器

若项目包含自定义 Fixture $\rightarrow$ 导入并使用这些 Fixture

若项目包含测试数据目录 $\rightarrow$ 在该目录下创建测试数据文件

6. 生成支持文件（如果需要）

Page Object：若单个页面的测试涉及 5 个以上唯一定位器，则创建 Page Object

Fixture：若测试需要共享设置（如认证、数据），则创建或扩展 Fixture

测试数据：若测试使用结构化数据，则在 test-data/ 中创建 JSON 文件

7. 验证

运行生成的测试：

bash

npx playwright test <generated-file> --reporter=list

若运行失败：
1. 阅读错误信息
2. 修复测试（而非修复应用）
3. 重新运行
4. 若确定为应用问题，则向用户报告

输出

生成的测试文件及其路径

创建的所有支持文件（Page Object、Fixture、数据文件）

测试运行结果

覆盖范围说明：目前已测试的行为

生成