# 开发环境测试脚本

本目录包含用于在开发环境中测试和验证网站的可复用脚本。

## 📋 可用脚本

### 性能测试

#### `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/)