adding-e2e-tests

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add E2E Tests (Playwright)

添加端到端测试（Playwright）

Use this skill when the user asks to add end-to-end tests, browser tests, integration tests, or set up Playwright.

当用户要求添加端到端测试、浏览器测试、集成测试或搭建Playwright时，可使用此技能。

Steps

步骤

Install Playwright
bash
```
npm init playwright@latest
```
This creates
```
playwright.config.ts
```
, a
```
tests/
```
directory, and installs browsers. If the project already has a test runner, install manually:
bash
```
npm install -D @playwright/test
npx playwright install
```

Configure
playwright.config.ts

Set
```
baseURL
```
to the local dev server URL (e.g.
```
http://localhost:3000
```
).

Configure

webServer

to start the dev server automatically:

webServer: {
  command: "npm run dev",
  url: "http://localhost:3000",
  reuseExistingServer: !process.env.CI,
},

Enable only chromium for local dev speed; enable all browsers in CI.

Create a smoke test — write a basic test that verifies the app loads:

import { test, expect } from "@playwright/test";

test("homepage loads", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/.+/);
});

Add page object pattern (optional) — for larger apps, create a
```
tests/pages/
```
directory with page objects that encapsulate selectors and actions.

Add npm scripts

json

{
  "test:e2e": "playwright test",
  "test:e2e:ui": "playwright test --ui"
}

Add to
.gitignore

test-results/
playwright-report/
blob-report/

CI integration — add a GitHub Actions step that runs
```
npx playwright install --with-deps
```
then
```
npm run test:e2e
```
. Use the official
```
actions/upload-artifact
```
to save the HTML report on failure.

安装Playwright
bash
```
npm init playwright@latest
```
这会创建
```
playwright.config.ts
```
文件、
```
tests/
```
目录并安装浏览器。如果项目已有测试运行器，请手动安装：
bash
```
npm install -D @playwright/test
npx playwright install
```
配置
playwright.config.ts
- 将
```
baseURL
```
  设置为本地开发服务器地址（例如
```
http://localhost:3000
```
  ）。
- 配置
```
webServer
```
  以自动启动开发服务器：
  ts
```
webServer: {
  command: "npm run dev",
  url: "http://localhost:3000",
  reuseExistingServer: !process.env.CI,
},
```
- 本地开发时仅启用Chromium以提升速度；在CI环境中启用所有浏览器。

创建冒烟测试 — 编写一个验证应用能否加载的基础测试：

import { test, expect } from "@playwright/test";

test("homepage loads", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/.+/);
});

添加页面对象模式（可选） — 对于大型应用，创建
```
tests/pages/
```
目录，其中的页面对象封装了选择器和操作。

添加npm脚本

json

{
  "test:e2e": "playwright test",
  "test:e2e:ui": "playwright test --ui"
}

添加到
.gitignore

test-results/
playwright-report/
blob-report/

CI集成 — 添加GitHub Actions步骤，先运行
```
npx playwright install --with-deps
```
，再执行
```
npm run test:e2e
```
。使用官方
```
actions/upload-artifact
```
在测试失败时保存HTML报告。

Notes

注意事项

Use
```
data-testid
```
attributes for selectors instead of CSS classes.
Use
```
test.describe
```
to group related tests.
Run
```
npx playwright codegen
```
to record tests interactively.

使用
```
data-testid
```
属性作为选择器，而非CSS类。
使用
```
test.describe
```
对相关测试进行分组。
运行
```
npx playwright codegen
```
以交互式方式录制测试。