在自动化测试中集成 **Chrome Lighthouse** 可以帮助你在每次构建或部署时自动检查网页的性能、可访问性、SEO、最佳实践等维度的质量。以下是几种常见且有效的集成方式： --- ## 🛠️ 一、使用 Lighthouse CLI 集成到自动化脚本 Lighthouse 提供了一个命令行工具（CLI），可以非常方便地集成到自动化测试流程中。 ### 1. 安装 Lighthouse CLI ```bash npm install -g lighthouse ``` ### 2. 运行 Lighthouse 并生成报告 ```bash lighthouse https://example.com --output html --output-path=./report.html ``` > 支持多种输出格式：`html`、`json`、`csv` 等。 ### 3. 集成到自动化测试脚本（如 Bash 或 CI 脚本） ```bash # 示例：运行 Lighthouse 并检查性能评分是否达标 lighthouse https://example.com --output json --output-path=./report.json # 使用 jq 解析 JSON 报告中的 performance 分数 performance_score=$(cat ./report.json | jq '.categories.performance.score' | bc -l) # 判断是否达标（例如 >= 0.9） if (( $(echo "$performance_score >= 0.9" | bc -l) )); then echo "✅ Performance score is acceptable: $performance_score" else echo "❌ Performance score too low: $performance_score" exit 1 fi ``` --- ## 🧪 二、使用 Lighthouse Node.js 模块（适合 JS 项目） 如果你在项目中使用 Node.js，可以使用 `lighthouse` 模块进行更灵活的定制化审计。 ### 1. 安装依赖 ```bash npm install lighthouse ``` ### 2. 编写 Node.js 脚本 ```js const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); (async () => { const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] }); const options = { logLevel: 'info', output: 'json', onlyCategories: ['performance'], port: chrome.port }; const runnerResult = await lighthouse('https://example.com', options); // 输出结果 console.log('Performance score:', runnerResult.lhr.categories.performance.score); // 可选：写入报告文件 const fs = require('fs'); fs.writeFileSync('lighthouse-report.json', JSON.stringify(runnerResult.lhr, null, 2)); await chrome.kill(); })(); ``` ### 3. 在 CI 中运行 将上述脚本保存为 `lighthouse-check.js`，然后在 CI 中运行： ```bash node lighthouse-check.js ``` --- ## 🧩 三、结合 CI/CD 工具（如 GitHub Actions、GitLab CI、Jenkins） 你可以将 Lighthouse 集成到 CI/CD 管道中，每次提交代码后自动运行审计。 ### 示例：GitHub Actions 工作流（`.github/workflows/lighthouse.yml`） ```yaml name: Lighthouse Audit on: push: branches: [main] jobs: lighthouse: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install dependencies run: npm install -g lighthouse - name: Run Lighthouse run: | lighthouse https://example.com --output json --output-path=./report.json - name: Check performance score run: | performance_score=$(cat ./report.json | jq '.categories.performance.score') if (( $(echo "$performance_score >= 0.9" | bc -l) )); then echo "✅ Performance score is acceptable" else echo "❌ Performance score too low: $performance_score" exit 1 fi ``` --- ## 📊 四、生成可视化报告（HTML）并上传到 CI 你可以将 Lighthouse 生成的 HTML 报告作为 CI 的构建产物上传，方便查看详细结果。 ### GitHub Actions 示例（上传 HTML 报告） ```yaml - name: Upload Lighthouse Report uses: actions/upload-artifact@v3 with: name: lighthouse-report path: report.html ``` --- ## 🧱 五、与性能预算结合（Performance Budget） Lighthouse 支持通过 `performanceBudget.json` 设置性能预算，自动检测资源加载是否超标。 ### 示例：`performanceBudget.json` ```json { "resourceCounts": { "total": 50 }, "resourceSizes": { "total": 500 }, "timing": { "timeToFirstByte": 2000 } } ``` ### CLI 使用方式 ```bash lighthouse https://example.com --budget-path=./performanceBudget.json ``` --- ## 🧭 六、注意事项 - **环境一致性**：确保运行 Lighthouse 的环境（如 CPU、网络）稳定，避免影响评分波动。 - **Headless Chrome**：推荐使用 `--headless` 模式运行 Lighthouse。 - **性能阈值**：设置合理的评分阈值（如 performance >= 0.8），避免误报。 - **结果解析**：使用 `jq` 或 JSON 解析库提取关键指标，便于自动化判断。 --- ## ✅ 总结：自动化测试中集成 Lighthouse 的流程 | 步骤 | 说明 | |------|------| | 1. 安装 Lighthouse | 使用 CLI 或 Node.js 模块 | | 2. 编写自动化脚本 | 调用 Lighthouse 并生成报告 | | 3. 设置性能阈值 | 通过 JSON 解析判断是否达标 | | 4. 集成到 CI/CD | 在 GitHub Actions、GitLab CI 等工具中运行 | | 5. 上传报告 | 可视化 HTML 报告便于查看 | | 6. 设置性能预算 | 控制资源加载、首字节时间等关键指标 | --- 通过以上方法，你可以将 Lighthouse 无缝集成到自动化测试流程中，持续监控网页质量，提升用户体验和性能表现。