菜单
E2E测试构建器 - 使用Playwright或Cypress为关键用户流程构建端到端浏览器测试。包括选择器策略、测试数据管理、页面对象和视觉回归测试。适用于"E2E测试"、"浏览器测试"、"Playwright"或"Cypress测试"。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/lza6/Claude-code-cli-config --skill e2e-test-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | e2e-test-builder |
| description | E2E测试构建器 - 使用Playwright或Cypress为关键用户流程构建端到端浏览器测试。包括选择器策略、测试数据管理、页面对象和视觉回归测试。适用于"E2E测试"、"浏览器测试"、"Playwright"或"Cypress测试"。 |
为关键用户流程构建可靠的端到端测试。
// playwright.config.ts
import { defineConfig } from "@playwright/test";
export default defineConfig({
testDir: "./e2e",
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: "html",
use: {
baseURL: "http://localhost:3000",
trace: "on-first-retry",
screenshot: "only-on-failure",
},
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
{
name: "firefox",
use: { ...devices["Desktop Firefox"] },
},
{
name: "webkit",
use: { ...devices["Desktop Safari"] },
},
{
name: "Mobile Chrome",
use: { ...devices["Pixel 5"] },
},
],
webServer: {
command: "npm run dev",
url: "http://localhost:3000",
reuseExistingServer: !process.env.CI,
},
});
// e2e/checkout-flow.spec.ts
import { test, expect } from "@playwright/test";
test.describe("结账流程", () => {
test.beforeEach(async ({ page }) => {
// 导航到首页
await page.goto("/");
// 登录
await page.getByRole("button", { name: "Login" }).click();
await page.getByLabel("Email").fill("test@example.com");
await page.getByLabel("Password").fill("password123");
await page.getByRole("button", { name: "Sign In" }).click();
// 等待仪表板
await expect(page).toHaveURL("/dashboard");
});
test("应成功完成结账", async ({ page }) => {
// 1. 浏览商品
await page.getByRole("link", { name: "Products" }).click();
(page).();
page.(, { : }).().();
(page.()).();
page.(, { : }).();
(page).();
(
page.(, { : })
).();
page.(, { : }).();
(page).();
page.().();
page.().();
page.().();
page.().();
page.().();
page.().();
page.().();
page.(, { : }).();
(page).();
(page.()).();
(page.()).();
});
(, ({ page }) => {
page.();
page.(, { : }).();
(page.()).();
(page.()).();
(page.()).();
});
(, ({ page }) => {
page.();
page.(, { : }).().();
page.();
page.().();
page.().();
page.().();
page.(, { : }).();
(page.()).();
(page.()).();
});
});
// e2e/pages/LoginPage.ts
export class LoginPage {
constructor(private page: Page) {}
async goto() {
await this.page.goto("/login");
}
async login(email: string, password: string) {
await this.page.getByLabel("Email").fill(email);
await this.page.getByLabel("Password").fill(password);
await this.page.getByRole("button", { name: "Sign In" }).click();
}
async expectLoginSuccess() {
await expect(this.page).toHaveURL("/dashboard");
}
async () {
(..(message)).();
}
}
{
() {}
() {
..();
}
() {
product = ..();
product.(, { : }).();
}
() {
(
..(, { : productName })
).();
}
}
(, ({ page }) => {
loginPage = (page);
productPage = (page);
loginPage.();
loginPage.(, );
loginPage.();
productPage.();
productPage.();
});
// 首选选择器优先级：
// 1. 基于角色（最有弹性）
await page.getByRole("button", { name: "Submit" });
await page.getByRole("link", { name: "Products" });
await page.getByRole("textbox", { name: "Email" });
// 2. 基于标签（语义化）
await page.getByLabel("Email address");
await page.getByLabel("Password");
// 3. 测试 ID（用于复杂情况）
await page.getByTestId("user-menu");
await page.getByTestId("product-card-123");
// 4. 文本内容（用于唯一文本）
await page.getByText("Welcome back!");
await page.getByText(/Order #\d+/);
// ❌ 避免：CSS 选择器（脆弱）
// await page.locator('.btn.btn-primary');
// await page.locator('#submit-button');
// e2e/fixtures/test-data.ts
export const testData = {
users: {
admin: {
email: "admin@example.com",
password: "admin123",
},
customer: {
email: "customer@example.com",
password: "customer123",
},
},
products: {
laptop: {
name: "MacBook Pro",
price: 2499.99,
},
phone: {
name: "iPhone 15",
price: 999.99,
},
},
cards: {
valid: "4242424242424242",
declined: "4000000000000002",
insufficientFunds: "4000000000009995",
},
};
// e2e/setup/seed-test-data.ts
export async function seedTestData() {
const prisma = new PrismaClient();
// 创建测试用户
await prisma.user.upsert({
where: { email: testData.users.customer.email },
create: {
email: testData...,
: (testData...),
},
: {},
});
prisma..({
: { : testData... },
: testData..,
: {},
});
prisma.$disconnect();
}
// e2e/visual/homepage.spec.ts
test("首页应与截图匹配", async ({ page }) => {
await page.goto("/");
// 截取全页面截图
await expect(page).toHaveScreenshot("homepage.png", {
fullPage: true,
maxDiffPixels: 100, // 允许微小差异
});
});
test("商品卡片应与截图匹配", async ({ page }) => {
await page.goto("/products");
const productCard = page.locator('[data-testid="product-card"]').first();
// 截取元素截图
await expect(productCard).toHaveScreenshot("product-card.png");
});
// e2e/mobile/checkout-mobile.spec.ts
test.use({ viewport: { width: 375, height: 667 } }); // iPhone SE
test("应完成移动端结账", async ({ page }) => {
await page.goto("/");
// 打开移动菜单
await page.getByRole("button", { name: "Menu" }).click();
await page.getByRole("link", { name: "Products" }).click();
// 添加到购物车
await page.getByRole("button", { name: "Add to Cart" }).first().click();
// 继续结账
// ...
});
// e2e/mocked/payment-api.spec.ts
test("应处理支付 API 超时", async ({ page }) => {
// 模拟慢速支付 API
await page.route("**/api/payment", async (route) => {
await new Promise((resolve) => setTimeout(resolve, 5000));
await route.fulfill({
status: 200,
body: JSON.stringify({ success: true }),
});
});
// 继续结账
await page.goto("/checkout");
// ... 填写表单 ...
await page.getByRole("button", { name: "Place Order" }).click();
// 应显示加载状态
await expect(page.getByText("Processing payment...")).toBeVisible();
});