吾辈当筑之。真实端到端（E2E）测试流程若团队于生产中用之编剧（推荐）及 GitHub Actions。
吾将示汝：
- E2E testing者何？
- ⚙️ 演员之设（React应用例）
- 飞升之 GitHub 动作 CI 管道
- 影牒檢驗並附圖
- 產製之至善之道
🧠 0. 端到端測驗者何？
E2E（端到端）測驗者謂：
“若真用者用之，以測汝之應。”
非測其能，乃測：
- 按其鍵
- 填其表
- 導其行
- API与UI相融
⚔️ 演员与Cypress（速决）
| 特徵 | 戏剧家 | 赛普勒斯(Seepuolese) |
|---|---|---|
| 迅疾 | 迅疾 | 中庸 |
| 多浏览器 | ✅ 肯定 | 有制限 |
| 友 CI | ⭐ 甚善 | 善 |
| 今之应用 | ⭐ 上选 | 善 |
👉 吾将用Playwright (2025年业界标准)
🧱 1. 安装Playwright (React项目)
```bash id="pw1"
npm init playwright@latest
When prompted choose:
* JavaScript or TypeScript (TS recommended)
* Tests folder: `tests`
* GitHub Actions: YES
---
# 📁 2. Project structure
```plaintext id="pw2"
my-app/
├── tests/
│ ├── example.spec.ts
├── playwright.config.ts
├── package.json
🧪 初试端到端（真用户流程）
例：登录流程之试
```ts id="test1"
import { test, expect } from '@playwright/test';
test('用户得成功登录', async ({ page }) => {
await page.goto('http://localhost:3000/login');
俟页填'input[name="email"]'以'test@example.com'；
俟页填'input[name="password"]'以'password123'；
俟页按'button[type="submit"]'；
俟期页有URL(/dashboard/)；
});
---
# 🚀 4. Run tests locally
```bash id="run1"
npx playwright test
开启界面模式（甚为有益）：
```bash id="ui1"
npx playwright test --ui
---
# 📸 5. Auto screenshots on failure
Playwright automatically captures:
* screenshots
* videos
* traces
Enable in config:
```ts id="cfg1"
use: {
screenshot: 'only-on-failure',
video: 'retain-on-failure',
trace: 'on-first-retry'
}
⚙️ 6. GitHub Actions CI流水线（端到端自动化）
📁 .github/workflows/e2e.yml
```yaml id="ci1"
name: 端到端测试（Playwright)
on:
push:
支系：主支
拉取请求：
支系：主支
任：
运行于：最新版乌班图
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 20
- name: Install dependencies
run: npm install
- name: Install Playwright browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
---
# 🧠 7. What happens in CI
```plaintext id="flow1"
Push code
↓
GitHub Actions starts
↓
Install dependencies
↓
Install browsers (Chromium, Firefox, WebKit)
↓
Run E2E tests
↓
Pass → allow merge
Fail → block PR + show report
📊 8.增HTML测试报告
啟報：
```ts id="rep1"
報者：[['html'], ['列']]
Then in CI:
```yaml id="rep2"
- name: Upload Playwright report
uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report
🌐 9. 測試實際部署應用（PRO設置）
非localhost：
```ts id="prod1"
待頁面至/https://your-app.vercel.app/login'；
👉 This turns it into **true production E2E testing**
---
# 🧪 10. Advanced real-world test examples
---
## 🟢 UI navigation test
```ts id="nav1"
test('navigate to dashboard', async ({ page }) => {
await page.goto('/');
await page.click('text=Dashboard');
await expect(page).toHaveURL(/dashboard/);
});
🟡 表单验证测试
```ts id="form1"
测试('邮箱为空时显示错误', async ({ 页面 }) =>> {
期待(页面.goto('/login'));
期待(页面.click('button[type="submit"]'));
俟期，冀页之索「.error」者，含「Email is required」之文；
});
---
## 🔵 API + UI combined test
```ts id="api1"
test('data loads after API call', async ({ page }) => {
await page.goto('/dashboard');
await expect(page.locator('.loading')).toBeHidden();
await expect(page.locator('.chart')).toBeVisible();
});
🔐 11. CI至善之道（要义）
✔ 构建毕，行E2E
```yaml id="bp1"
- 行：npm run build
- 行：npm start &```
✔ 使用测试环境
- staging.example.com
- production.example.com
✔ 重试不稳之测试
```ts id="zh1"```
重试：二
---
# ⚠️ 12. Common mistakes
### ❌ Testing implementation instead of behavior
Bad:
```ts id="bad1"
expect(component.state).toBe(true)
善哉
```ts id="善一"
冀页有文曰《迎迓》
---
### ❌ No stable selectors
Use:
```html id="sel1"
data-testid="login-button"
则：
```ts id="sel2"
页得测试ID「登录按钮」
---
### ❌ Running E2E without CI
Always run in GitHub Actions
---
# 🧠 Final architecture
```plaintext id="final1"
Push / PR
↓
CI (unit tests)
↓
E2E tests (Playwright)
↓
Build app
↓
Deploy to staging/production
↓
Report + screenshots stored in GitHub
🚀 君所成之器
今君有：
- 🧪 仿真真人测试
- 🚀 集成CI/CD端到端流水线
- 📸 失败截图与视频
- 🌍 生产就绪测试系统
- 🔒 安全部署门禁系统