senior-qa by alirezarezvani/claude-skills
npx skills add https://github.com/alirezarezvani/claude-skills --skill senior-qa适用于 React 和 Next.js 应用程序的测试自动化、覆盖率分析和质量保证模式。
# 为 React 组件生成 Jest 测试桩
python scripts/test_suite_generator.py src/components/ --output __tests__/
# 分析 Jest/Istanbul 报告的测试覆盖率
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
# 为 Next.js 路由搭建 Playwright E2E 测试
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
扫描 React/TypeScript 组件,并使用适当的结构生成 Jest + React Testing Library 测试桩。
输入: 包含 React 组件的源代码目录 输出: 包含 describe 块、渲染测试、交互测试的测试文件
用法:
# 基本用法 - 扫描组件并生成测试
python scripts/test_suite_generator.py src/components/ --output __tests__/
# 输出:
# 正在扫描:src/components/
# 找到 24 个 React 组件
#
# 生成的测试:
# __tests__/Button.test.tsx (渲染、点击处理器、禁用状态)
# __tests__/Modal.test.tsx (渲染、打开/关闭、键盘事件)
# __tests__/Form.test.tsx (渲染、验证、提交)
# ...
#
# 摘要:24 个测试文件,87 个测试用例
# 包含无障碍测试
python scripts/test_suite_generator.py src/ --output __tests__/ --include-a11y
# 使用自定义模板生成
python scripts/test_suite_generator.py src/ --template custom-template.tsx
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
支持的模式:
解析 Jest/Istanbul 覆盖率报告,识别缺口、未覆盖的分支,并提供可操作的建议。
输入: 覆盖率报告 (JSON 或 LCOV 格式) 输出: 包含建议的覆盖率分析
用法:
# 分析覆盖率报告
python scripts/coverage_analyzer.py coverage/coverage-final.json
# 输出:
# === 覆盖率分析报告 ===
# 总体:72.4% (目标:80%)
#
# 按类型:
# 语句:74.2%
# 分支:68.1%
# 函数:71.8%
# 行:73.5%
#
# 关键缺口 (未覆盖的业务逻辑):
# src/services/payment.ts:45-67 - 支付处理
# src/hooks/useAuth.ts:23-41 - 认证流程
#
# 建议:
# 1. 为支付服务错误处理添加测试
# 2. 覆盖认证边缘情况
# 3. 测试表单验证分支
#
# 低于阈值 (80%) 的文件:
# src/components/Checkout.tsx: 45%
# src/services/api.ts: 62%
# 强制执行阈值 (如果低于阈值则退出码为 1)
python scripts/coverage_analyzer.py coverage/ --threshold 80 --strict
# 生成 HTML 报告
python scripts/coverage_analyzer.py coverage/ --format html --output report.html
扫描 Next.js 页面/应用目录,并使用常见交互生成 Playwright 测试文件。
输入: Next.js 页面或应用目录 输出: 按路由组织的 Playwright 测试文件
用法:
# 为 Next.js 应用路由器搭建 E2E 测试
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
# 输出:
# 正在扫描:src/app/
# 找到 12 个路由
#
# 生成的 E2E 测试:
# e2e/home.spec.ts (导航、主图部分)
# e2e/auth/login.spec.ts (表单提交、验证)
# e2e/auth/register.spec.ts (注册流程)
# e2e/dashboard.spec.ts (认证路由)
# e2e/products/[id].spec.ts (动态路由)
# ...
#
# 已生成:playwright.config.ts
# 已生成:e2e/fixtures/auth.ts
# 包含页面对象模型类
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/ --include-pom
# 为特定路由生成
python scripts/e2e_test_scaffolder.py src/app/ --routes "/login,/dashboard,/checkout"
在为新的或现有的 React 组件设置测试时使用。
步骤 1:扫描项目以查找未测试的组件
python scripts/test_suite_generator.py src/components/ --scan-only
步骤 2:生成测试桩
python scripts/test_suite_generator.py src/components/ --output __tests__/
步骤 3:审查并自定义生成的测试
// __tests__/Button.test.tsx (已生成)
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '../src/components/Button';
describe('Button', () => {
it('renders with label', () => {
render(<Button>Click me</Button>);
expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
});
it('calls onClick when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
// TODO: 添加你的特定测试用例
});
步骤 4:运行测试并检查覆盖率
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json
在改进测试覆盖率或准备发布时使用。
步骤 1:生成覆盖率报告
npm test -- --coverage --coverageReporters=json
步骤 2:分析覆盖率缺口
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
步骤 3:识别关键路径
python scripts/coverage_analyzer.py coverage/ --critical-paths
步骤 4:生成缺失的测试桩
python scripts/test_suite_generator.py src/ --uncovered-only --output __tests__/
步骤 5:验证改进
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json
在为 Next.js 项目设置 Playwright 时使用。
步骤 1:初始化 Playwright (如果未安装)
npm init playwright@latest
步骤 2:从路由搭建 E2E 测试
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
步骤 3:配置认证夹具
// 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 测试
npx playwright test
npx playwright show-report
步骤 5:添加到 CI 流水线
# .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/
| 文件 | 包含内容 | 使用场景 |
|---|---|---|
references/testing_strategies.md | 测试金字塔、测试类型、覆盖率目标、CI/CD 集成 | 设计测试策略 |
references/test_automation_patterns.md | 页面对象模型、模拟 (MSW)、夹具、异步模式 | 编写测试代码 |
references/qa_best_practices.md | 可测试的代码、不稳定的测试、调试、质量指标 | 提高测试质量 |
// 首选 (可访问)
screen.getByRole('button', { name: /submit/i })
screen.getByLabelText(/email/i)
screen.getByPlaceholderText(/search/i)
// 备选
screen.getByTestId('custom-element')
// 等待元素出现
await screen.findByText(/loaded/i);
// 等待元素移除
await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));
// 等待条件满足
await waitFor(() => {
expect(mockFn).toHaveBeenCalled();
});
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: 'John' }]));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
// 首选
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByText('Welcome')
// 链式调用
page.getByRole('listitem').filter({ hasText: 'Product' })
module.exports = {
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
# 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 --coverageReporters=lcov,json
python scripts/coverage_analyzer.py coverage/coverage-final.json
每周安装次数
223
仓库
GitHub 星标数
3.6K
首次出现
Jan 20, 2026
安全审计
安装于
claude-code183
opencode167
gemini-cli166
codex154
cursor140
github-copilot136
Test automation, coverage analysis, and quality assurance patterns for React and Next.js applications.
# Generate Jest test stubs for React components
python scripts/test_suite_generator.py src/components/ --output __tests__/
# Analyze test coverage from Jest/Istanbul reports
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
# Scaffold Playwright E2E tests for Next.js routes
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
Scans React/TypeScript components and generates Jest + React Testing Library test stubs with proper structure.
Input: Source directory containing React components Output: Test files with describe blocks, render tests, interaction tests
Usage:
# Basic usage - scan components and generate tests
python scripts/test_suite_generator.py src/components/ --output __tests__/
# Output:
# Scanning: src/components/
# Found 24 React components
#
# Generated tests:
# __tests__/Button.test.tsx (render, click handler, disabled state)
# __tests__/Modal.test.tsx (render, open/close, keyboard events)
# __tests__/Form.test.tsx (render, validation, submission)
# ...
#
# Summary: 24 test files, 87 test cases
# Include accessibility tests
python scripts/test_suite_generator.py src/ --output __tests__/ --include-a11y
# Generate with custom template
python scripts/test_suite_generator.py src/ --template custom-template.tsx
Supported Patterns:
Parses Jest/Istanbul coverage reports and identifies gaps, uncovered branches, and provides actionable recommendations.
Input: Coverage report (JSON or LCOV format) Output: Coverage analysis with recommendations
Usage:
# Analyze coverage report
python scripts/coverage_analyzer.py coverage/coverage-final.json
# Output:
# === Coverage Analysis Report ===
# Overall: 72.4% (target: 80%)
#
# BY TYPE:
# Statements: 74.2%
# Branches: 68.1%
# Functions: 71.8%
# Lines: 73.5%
#
# CRITICAL GAPS (uncovered business logic):
# src/services/payment.ts:45-67 - Payment processing
# src/hooks/useAuth.ts:23-41 - Authentication flow
#
# RECOMMENDATIONS:
# 1. Add tests for payment service error handling
# 2. Cover authentication edge cases
# 3. Test form validation branches
#
# Files below threshold (80%):
# src/components/Checkout.tsx: 45%
# src/services/api.ts: 62%
# 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
Scans Next.js pages/app directory and generates Playwright test files with common interactions.
Input: Next.js pages or app directory Output: Playwright test files organized by route
Usage:
# Scaffold E2E tests for Next.js App Router
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
# Output:
# Scanning: src/app/
# Found 12 routes
#
# Generated E2E tests:
# e2e/home.spec.ts (navigation, hero section)
# e2e/auth/login.spec.ts (form submission, validation)
# e2e/auth/register.spec.ts (registration flow)
# e2e/dashboard.spec.ts (authenticated routes)
# e2e/products/[id].spec.ts (dynamic routes)
# ...
#
# Generated: playwright.config.ts
# Generated: e2e/fixtures/auth.ts
# 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"
Use when setting up tests for new or existing React components.
Step 1: Scan project for untested components
python scripts/test_suite_generator.py src/components/ --scan-only
Step 2: Generate test stubs
python scripts/test_suite_generator.py src/components/ --output __tests__/
Step 3: Review and customize generated tests
// __tests__/Button.test.tsx (generated)
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from '../src/components/Button';
describe('Button', () => {
it('renders with label', () => {
render(<Button>Click me</Button>);
expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
});
it('calls onClick when clicked', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
// TODO: Add your specific test cases
});
Step 4: Run tests and check coverage
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/coverage-final.json
Use when improving test coverage or preparing for release.
Step 1: Generate coverage report
npm test -- --coverage --coverageReporters=json
Step 2: Analyze coverage gaps
python scripts/coverage_analyzer.py coverage/coverage-final.json --threshold 80
Step 3: Identify critical paths
python scripts/coverage_analyzer.py coverage/ --critical-paths
Step 4: Generate missing test stubs
python scripts/test_suite_generator.py src/ --uncovered-only --output __tests__/
Step 5: Verify improvement
npm test -- --coverage
python scripts/coverage_analyzer.py coverage/ --compare previous-coverage.json
Use when setting up Playwright for a Next.js project.
Step 1: Initialize Playwright (if not installed)
npm init playwright@latest
Step 2: Scaffold E2E tests from routes
python scripts/e2e_test_scaffolder.py src/app/ --output e2e/
Step 3: Configure authentication fixtures
// e2e/fixtures/auth.ts (generated)
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);
},
});
Step 4: Run E2E tests
npx playwright test
npx playwright show-report
Step 5: Add to CI pipeline
# .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/
| File | Contains | Use When |
|---|---|---|
references/testing_strategies.md | Test pyramid, testing types, coverage targets, CI/CD integration | Designing test strategy |
references/test_automation_patterns.md | Page Object Model, mocking (MSW), fixtures, async patterns | Writing test code |
references/qa_best_practices.md | Testable code, flaky tests, debugging, quality metrics | Improving test quality |
// Preferred (accessible)
screen.getByRole('button', { name: /submit/i })
screen.getByLabelText(/email/i)
screen.getByPlaceholderText(/search/i)
// Fallback
screen.getByTestId('custom-element')
// Wait for element
await screen.findByText(/loaded/i);
// Wait for removal
await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));
// Wait for condition
await waitFor(() => {
expect(mockFn).toHaveBeenCalled();
});
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: 'John' }]));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
// Preferred
page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByText('Welcome')
// Chaining
page.getByRole('listitem').filter({ hasText: 'Product' })
module.exports = {
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
# Jest
npm test # Run all tests
npm test -- --watch # Watch mode
npm test -- --coverage # With coverage
npm test -- Button.test.tsx # Single file
# Playwright
npx playwright test # Run all E2E tests
npx playwright test --ui # UI mode
npx playwright test --debug # Debug mode
npx playwright codegen # Generate tests
# Coverage
npm test -- --coverage --coverageReporters=lcov,json
python scripts/coverage_analyzer.py coverage/coverage-final.json
Weekly Installs
223
Repository
GitHub Stars
3.6K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
claude-code183
opencode167
gemini-cli166
codex154
cursor140
github-copilot136
Skills CLI 使用指南:AI Agent 技能包管理器安装与管理教程
27,400 周安装