Lighthouse 自动化测试与 CI/CD 集成实战指南

Lighthouse，这个由 Google Chrome 团队开发的开源工具，想必你已经不陌生了。它就像一位严格的网站体检医生，能从性能、可访问性、最佳实践、SEO 以及 Progressive Web App (PWA) 等多个维度对你的网站进行全面“诊断”，并给出详细的“体检报告”和“治疗建议”。

但 Lighthouse 的强大之处远不止于此。手动运行测试虽然方便，但效率不高，也难以持续跟踪网站质量。今天，咱们就来聊聊 Lighthouse 的自动化测试功能，以及如何将它与 CI/CD 流程无缝集成，让你的网站质量监控更上一层楼。

为什么需要 Lighthouse 自动化测试？

想象一下，每次代码提交后，你都需要手动打开 Chrome DevTools，运行 Lighthouse，然后逐条查看报告……这得多麻烦！更重要的是，你很难保证每次测试的环境和配置都完全一致，导致测试结果出现偏差。

自动化测试的优势就体现出来了：

• 提高效率： 自动运行 Lighthouse，无需人工干预，节省大量时间。
• 保持一致性： 确保每次测试都在相同的环境下运行，结果更可靠。
• 持续监控： 定期自动运行测试，及时发现网站质量问题。
• 及早发现问题： 在代码提交阶段就能发现问题，避免问题流入生产环境。
• 促进团队协作： 测试结果可共享，方便团队成员了解网站质量状况。

Lighthouse 命令行工具 (CLI)

Lighthouse CLI 是实现自动化测试的核心。它提供了丰富的命令行选项，让你能够灵活地控制测试过程。

安装

首先，确保你已经安装了 Node.js (建议版本 10 或更高)。然后，通过 npm 或 yarn 全局安装 Lighthouse：

npm install -g lighthouse
# 或者
yarn global add lighthouse

基本用法

最简单的用法是直接在命令行中输入 lighthouse 命令，后面跟上你要测试的网址：

lighthouse https://www.example.com

Lighthouse 会自动打开一个 Chrome 浏览器实例，运行测试，并在完成后生成一个 HTML 报告。

常用选项

Lighthouse CLI 提供了很多选项，可以自定义测试行为。这里列举一些常用的：

• --view：在浏览器中打开生成的 HTML 报告。
• --output：指定报告输出格式，可以是 html、json 或 csv。默认是 html。
• --output-path：指定报告输出路径。默认是当前目录下的一个随机文件名。
• --only-categories：指定要运行的测试类别，可以是 performance、accessibility、best-practices、seo 或 pwa。
• --chrome-flags：传递给 Chrome 浏览器的启动参数。例如，--chrome-flags="--headless" 可以让 Chrome 在无头模式下运行，适合在服务器上进行自动化测试。
• --config-path:指定使用的.js配置文件，可以进行更细粒度的测试。
• --preset: 预设配置，可选desktop，会覆盖config中的设备模拟相关配置。

例如，要测试一个网站的性能，并将结果保存为 JSON 格式，可以使用以下命令：

lighthouse https://www.example.com --only-categories=performance --output=json --output-path=./performance-report.json --chrome-flags="--headless"

通过配置文件进行测试

可以将配置写入js文件中，通过--config-path指定配置文件。

module.exports = {
 extends: 'lighthouse:default',
 settings: {
 onlyCategories: ['performance'],
 },
};

与持续集成 (CI) 集成

将 Lighthouse 集成到 CI 流程中，是实现自动化测试的关键一步。这样，每次代码提交或合并请求时，都能自动运行 Lighthouse 测试，确保代码质量。

目前主流的 CI/CD 平台有很多，例如 GitHub Actions、GitLab CI、Jenkins、Travis CI、CircleCI 等。它们都支持自定义构建流程，可以很方便地集成 Lighthouse。

下面以 GitHub Actions 为例，演示如何集成 Lighthouse。

GitHub Actions

GitHub Actions 是 GitHub 提供的 CI/CD 服务，可以直接在 GitHub 仓库中配置和运行。

1. 创建工作流文件：

   在你的 GitHub 仓库的 .github/workflows 目录下创建一个 YAML 文件，例如 lighthouse-ci.yml。

2. 编写工作流配置：

name: Lighthouse CI
 
on:
 push:
 branches:
 - main # 仅在 main 分支推送时触发
 pull_request:
 branches:
 - main # 仅在 main 分支的合并请求时触发
 
jobs:
 lighthouse:
 runs-on: ubuntu-latest
 
 steps:
 - name: Checkout code
 uses: actions/checkout@v3
 
 - name: Install Node.js
 uses: actions/setup-node@v3
 with:
 node-version: '16' # 使用 Node.js 16
 
 - name: Install Lighthouse
 run: npm install -g lighthouse
 
 - name: Run Lighthouse
 run: |
 lighthouse https://www.example.com \
 --output=json \
 --output-path=./lighthouse-report.json \
 --chrome-flags="--headless" \
 --only-categories=performance
 
 - name: Upload artifact # 可选：上传报告
 uses: actions/upload-artifact@v3
 with:
 name: lighthouse-report
 path: ./lighthouse-report.json

这个配置文件的含义是：

• name：工作流的名称。
• on：触发工作流的事件。这里配置了 push 和 pull_request，表示在 main 分支发生推送或合并请求时触发。
• jobs：定义要执行的任务。这里定义了一个名为 lighthouse 的任务。
• runs-on：指定任务运行的操作系统环境。这里使用了 ubuntu-latest，表示最新的 Ubuntu 系统。
• steps：定义任务的具体步骤。
  • Checkout code：检出代码。
  • Install Node.js：安装 Node.js 环境。
  • Install Lighthouse：安装 Lighthouse CLI。
  • Run Lighthouse：运行 Lighthouse 测试。
  • Upload artifact：上传生成的报告文件（可选）。

3. 提交并推送代码：

   将工作流文件提交并推送到 GitHub 仓库。之后，每次向 main 分支推送代码或发起合并请求时，GitHub Actions 都会自动运行 Lighthouse 测试。

4. 查看测试结果：

   在 GitHub 仓库的 Actions 页面，你可以查看每次工作流的运行状态和结果。如果测试失败，你可以查看详细的日志和报告，找出问题所在。

其他 CI/CD 平台

其他 CI/CD 平台的集成方法类似，只是配置文件的语法略有不同。你需要参考相应平台的文档，编写相应的配置文件。

高级用法和技巧

使用 Lighthouse Node API

除了 CLI，Lighthouse 还提供了 Node API，可以更灵活地控制测试过程。例如，你可以在 Node.js 脚本中调用 Lighthouse，获取测试结果，并进行自定义处理。

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://www.example.com', options);
 
 // `runnerResult.lhr` 是 Lighthouse 报告的 JSON 对象
 console.log('Report is done for', runnerResult.lhr.finalUrl);
 console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
 
 await chrome.kill();
})();

自定义审计

Lighthouse 允许你创建自定义审计，以检查你的网站是否符合特定的要求。例如，你可以创建一个审计来检查你的网站是否使用了特定的 HTTP 头，或者是否包含特定的 JavaScript 库。

使用预算

Lighthouse 支持设置性能预算，可以帮助你控制网站的资源大小和加载时间。如果你的网站超出了预算，Lighthouse 会给出警告。

模拟不同设备和网络环境

Lighthouse 可以模拟不同的设备和网络环境，例如移动设备、桌面设备、慢速 3G 网络等。这可以帮助你了解你的网站在不同条件下的性能表现。

总结

Lighthouse 自动化测试和 CI/CD 集成是现代 Web 开发的最佳实践之一。它可以帮助你持续监控网站质量，及早发现问题，并确保你的网站始终保持最佳状态。希望通过本文的介绍，你对如何让网站跑得更快、更稳有了更清晰的认识。现在，就动手实践一下吧，让 Lighthouse 成为你 Web 开发的得力助手！