张翔
212 lines
3.9 KiB
Markdown
212 lines
3.9 KiB
Markdown
# 开发环境测试脚本
|
||
|
||
本目录包含用于在开发环境中测试和验证网站的可复用脚本。
|
||
|
||
## 📋 可用脚本
|
||
|
||
### 性能测试
|
||
|
||
#### `performance-audit.js`
|
||
使用Lighthouse进行性能审计，生成详细的性能报告。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run audit:performance
|
||
# 或
|
||
node scripts/performance-audit.js
|
||
```
|
||
|
||
**输出:**
|
||
- `test-results/performance-summary.json` - 性能数据摘要
|
||
- `test-results/performance/*.html` - 每个页面的详细报告
|
||
|
||
**评估标准:**
|
||
- 性能分数 >= 80: ✅ 通过
|
||
- 可访问性分数 >= 80: ✅ 通过
|
||
- SEO分数 >= 80: ✅ 通过
|
||
|
||
### SEO检查
|
||
|
||
#### `seo-check.js`
|
||
检查所有页面的SEO配置，包括Meta标签、Open Graph标签、结构化数据等。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run audit:seo
|
||
# 或
|
||
node scripts/seo-check.js
|
||
```
|
||
|
||
**输出:**
|
||
- `test-results/seo-summary.json` - SEO检查结果
|
||
|
||
**检查项:**
|
||
- Meta标签完整性
|
||
- Open Graph标签
|
||
- H1标签
|
||
- 图片alt属性
|
||
- 链接有效性
|
||
- 语言属性
|
||
|
||
### 可访问性测试
|
||
|
||
#### `accessibility-test.js`
|
||
使用axe-core进行可访问性测试，符合WCAG 2.1 AA标准。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run audit:accessibility
|
||
# 或
|
||
node scripts/accessibility-test.js
|
||
```
|
||
|
||
**输出:**
|
||
- `test-results/accessibility-summary.json` - 可访问性测试结果
|
||
|
||
**标准:**
|
||
- WCAG 2.1 AA
|
||
- 最低分数: 80
|
||
|
||
### 表单验证
|
||
|
||
#### `form-validation.js`
|
||
测试表单的UI验证、字段可见性和提交功能。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run audit:forms
|
||
# 或
|
||
node scripts/form-validation.js
|
||
```
|
||
|
||
**输出:**
|
||
- `test-results/form-validation-summary.json` - 表单验证结果
|
||
|
||
**测试项:**
|
||
- 表单字段可见性
|
||
- 必填字段验证
|
||
- 邮箱/电话格式验证
|
||
- 表单提交功能
|
||
|
||
### 综合报告
|
||
|
||
#### `generate-test-report.js`
|
||
生成包含所有测试结果的综合HTML报告。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run report:generate
|
||
# 或
|
||
node scripts/generate-test-report.js
|
||
```
|
||
|
||
**输出:**
|
||
- `test-results/test-report.html` - 综合测试报告
|
||
|
||
### 一键运行
|
||
|
||
#### `run-all-tests.sh`
|
||
运行所有测试并生成综合报告。
|
||
|
||
**运行方式:**
|
||
```bash
|
||
npm run audit:all
|
||
# 或
|
||
./scripts/run-all-tests.sh
|
||
```
|
||
|
||
**前置条件:**
|
||
- 开发服务器运行在 http://localhost:3000
|
||
- 已安装所有依赖
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 安装依赖
|
||
```bash
|
||
npm install -D @axe-core/playwright lighthouse chrome-launcher
|
||
```
|
||
|
||
### 2. 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 3. 运行所有测试
|
||
```bash
|
||
# 在另一个终端
|
||
npm run audit:all
|
||
```
|
||
|
||
### 4. 查看报告
|
||
```bash
|
||
open test-results/test-report.html
|
||
```
|
||
|
||
## 📊 测试覆盖
|
||
|
||
### 测试页面
|
||
- 首页 (/)
|
||
- 关于我们 (/about)
|
||
- 联系我们 (/contact)
|
||
- 服务 (/services)
|
||
- 产品 (/products)
|
||
- 案例 (/cases)
|
||
- 新闻 (/news)
|
||
|
||
### 测试维度
|
||
- ⚡ 性能（Lighthouse）
|
||
- 🔍 SEO（Meta标签、Open Graph等）
|
||
- ♿ 可访问性（WCAG 2.1 AA）
|
||
- 📝 表单功能（UI验证、提交测试）
|
||
|
||
## 📝 自定义配置
|
||
|
||
### 修改测试页面
|
||
编辑各个脚本中的 `PAGES` 数组：
|
||
|
||
```javascript
|
||
const PAGES = [
|
||
{ name: '页面名称', url: 'http://localhost:3000/path' },
|
||
// 添加更多页面...
|
||
];
|
||
```
|
||
|
||
### 修改评分标准
|
||
编辑各个脚本中的 `THRESHOLDS` 或 `MIN_SCORE` 常量：
|
||
|
||
```javascript
|
||
const THRESHOLDS = {
|
||
performance: 90, // 提高标准
|
||
accessibility: 90,
|
||
seo: 90
|
||
};
|
||
```
|
||
|
||
## 🔧 故障排除
|
||
|
||
### 开发服务器未运行
|
||
```
|
||
❌ 开发服务器未运行
|
||
```
|
||
**解决:** 先运行 `npm run dev`
|
||
|
||
### 端口冲突
|
||
如果3000端口被占用，修改脚本中的URL：
|
||
|
||
```javascript
|
||
const BASE_URL = 'http://localhost:3001'; // 使用其他端口
|
||
```
|
||
|
||
### 测试超时
|
||
增加等待时间：
|
||
|
||
```javascript
|
||
await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
|
||
```
|
||
|
||
## 📚 参考资料
|
||
|
||
- [Lighthouse文档](https://github.com/GoogleChrome/lighthouse)
|
||
- [axe-core文档](https://www.deque.com/axe/)
|
||
- [Playwright文档](https://playwright.dev/)
|
||
- [WCAG 2.1指南](https://www.w3.org/WAI/WCAG21/quickref/) |