diff --git a/scripts/README.md b/scripts/README.md new file mode 100644 index 0000000..138c15a --- /dev/null +++ b/scripts/README.md @@ -0,0 +1,212 @@ +# 开发环境测试脚本 + +本目录包含用于在开发环境中测试和验证网站的可复用脚本。 + +## 📋 可用脚本 + +### 性能测试 + +#### `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/) \ No newline at end of file