# Analyze coverage report
python scripts/coverage_analyzer.py coverage/coverage-final.json

# Enforce threshold (exit 1 if below)
python scripts/coverage_analyzer.py coverage/ --threshold 80 --strict

# Generate HTML report
python scripts/coverage_analyzer.py coverage/ --format html --output report.html

# Scaffold E2E tests for Next.js App Router
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/

# Include Page Object Model classes
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/ --include-pom

# Generate for specific routes
python scripts/e2e_test_scaffolder.py src/app/ --routes "/login,/dashboard,/checkout"

npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json

npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json

# .github/workflows/e2e.yml
- name: "run-e2e-tests"
  run: npx playwright test
- name: "upload-report"
  uses: actions/upload-artifact@v3
  with:
    name: "playwright-report"
    path: playwright-report/

高级QA工程师

针对React和Next.js应用程序的测试自动化、覆盖率分析和质量保证模式。

---

快速开始

bash

为React组件生成Jest测试桩

python scripts/testsuitegenerator.py src/components/ --output tests/

分析Jest/Istanbul覆盖率报告

python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80

为Next.js路由搭建Playwright E2E测试

python scripts/e2etestscaffolder.py src/app/ --output e2e/

---

工具概述

1. 测试套件生成器

扫描React/TypeScript组件，生成结构合理的Jest + React Testing Library测试桩。

输入： 包含React组件的源目录
输出： 包含describe块、渲染测试、交互测试的测试文件

用法：
bash

基本用法 - 扫描组件并生成测试

python scripts/testsuitegenerator.py src/components/ --output tests/

包含可访问性测试

python scripts/testsuitegenerator.py src/ --output tests/ --include-a11y

使用自定义模板生成

python scripts/testsuitegenerator.py src/ --template custom-template.tsx

支持的模式：

• - 带hooks的函数组件
• 带Context提供者的组件
• 带数据获取的组件
• 带验证的表单组件

---

2. 覆盖率分析器

解析Jest/Istanbul覆盖率报告，识别缺口、未覆盖分支，并提供可操作的建议。

输入： 覆盖率报告（JSON或LCOV格式）
输出： 带建议的覆盖率分析

用法：
bash

分析覆盖率报告

python scripts/coverage_analyzer.py coverage/coverage-final.json

强制执行阈值（低于则退出码为1）

python scripts/coverage_analyzer.py coverage/ --threshold 80 --strict

生成HTML报告

python scripts/coverage_analyzer.py coverage/ --format html --output report.html

---

3. E2E测试搭建器

扫描Next.js页面/应用目录，生成包含常见交互的Playwright测试文件。

输入： Next.js页面或应用目录
输出： 按路由组织的Playwright测试文件

用法：
bash

为Next.js App Router搭建E2E测试

python scripts/e2etestscaffolder.py src/app/ --output e2e/

包含页面对象模型类

python scripts/e2etestscaffolder.py src/app/ --output e2e/ --include-pom

为特定路由生成

python scripts/e2etestscaffolder.py src/app/ --routes /login,/dashboard,/checkout

---

QA工作流

单元测试生成工作流

在为新或现有React组件设置测试时使用。

步骤1：扫描项目中未测试的组件
bash
python scripts/testsuitegenerator.py src/components/ --scan-only

步骤2：生成测试桩
bash
python scripts/testsuitegenerator.py src/components/ --output tests/

步骤3：审查并自定义生成的测试
typescript
// tests/Button.test.tsx (已生成)
import { render, screen, fireEvent } from @testing-library/react;
import { Button } from ../src/components/Button;

describe(Button, () => {
it(使用标签渲染, () => {
render(点击我);
expect(screen.getByRole(button, { name: 点击我 })).toBeInTheDocument();
});

it(点击时调用onClick, () => {
const handleClick = jest.fn();
render(点击);
fireEvent.click(screen.getByRole(button));
expect(handleClick).toHaveBeenCalledTimes(1);
});

// TODO: 添加你的特定测试用例
});

步骤4：运行测试并检查覆盖率
bash
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json

---

覆盖率分析工作流

在改进测试覆盖率或准备发布时使用。

步骤1：生成覆盖率报告
bash
npm test -- --coverage --coverageReporters=json

步骤2：分析覆盖率缺口
bash
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80

步骤3：识别关键路径
bash
python scripts/coverage_analyzer.py coverage/ --critical-paths

步骤4：生成缺失的测试桩
bash
python scripts/testsuitegenerator.py src/ --uncovered-only --output tests/

步骤5：验证改进
bash
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json

---

E2E测试设置工作流

在为Next.js项目设置Playwright时使用。

步骤1：初始化Playwright（如果未安装）
bash
npm init playwright@latest

步骤2：从路由搭建E2E测试
bash
python scripts/e2etestscaffolder.py src/app/ --output e2e/

步骤3：配置认证fixture
typescript
// e2e/fixtures/auth.ts (已生成)
import { test as base } from @playwright/test;

export const test = base.extend({
authenticatedPage: async ({ page }, use) => {
await page.goto(/login);
await page.fill([name=email], test@example.com);
await page.fill([name=password], password);
await page.click(button[type=submit]);
await page.waitForURL(/dashboard);
await use(page);
},
});

步骤4：运行E2E测试
bash
npx playwright test
npx playwright show-report

步骤5：添加到CI流水线
yaml

.github/workflows/e2e.yml

• - name: 运行e2e测试

run: npx playwright test

• - name: 上传报告

uses: actions/upload-artifact@v3
with:
name: playwright报告
path: playwright-report/

---

参考文档

文件	内容	使用时机
references/testingstrategies.md	测试金字塔、测试类型、覆盖率目标、CI/CD集成	设计测试策略
references/testautomation_patterns.md

页面对象模型、模拟(MSW)、fixture、异步模式 | 编写测试代码 |
| references/qabestpractices.md | 可测试代码、不稳定测试、调试、质量指标 | 改进测试质量 |

---

常见模式快速参考

React Testing Library查询

typescript
// 首选（可访问）
screen.getByRole(button, { name: 提交 });
screen.getByLabelText(/邮箱/i);
screen.getByPlaceholderText(/搜索/i);

// 备选
screen.getByTestId(custom-element);

异步测试

typescript
// 等待元素
await screen.findByText(/已加载/i);

// 等待移除
await waitForElementToBeRemoved(() => screen.queryByText(/加载中/i));

// 等待条件
await waitFor(() => {
expect(mockFn).toHaveBeenCalled();
});

使用MSW进行模拟

typescript
import { rest } from msw;
import { setupServer } from msw/node;

const server = setupServer(
rest.get(/api/users, (req, res, ctx) => {
return res(ctx.json([{ id: 1, name: 张三 }]));
})
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Playwright定位器

typescript
// 首选
page.getByRole(button, { name: 提交 });
page.getByLabel(邮箱);
page.getByText(欢迎);

// 链式调用
page.getByRole(listitem).filter({ hasText: 产品 });

覆盖率阈值（jest.config.js）

javascript
module.exports = {
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};

---

常用命令

bash

Jest

npm test # 运行所有测试
npm test -- --watch # 监听模式
npm test -- --coverage # 带覆盖率
npm test -- Button.test.tsx # 单个文件

Playwright

npx playwright test # 运行所有E2E测试 npx playwright test --ui # UI模式 npx playwright test --debug # 调试模式 npx playwright codegen # 生成测试

覆盖率

npm test -- --coverage --co