GitHub Actions配置Lighthouse CI：如何提交结果为PR评论？

疑问1：如何查看steps.lighthouse.outputs的结构 #

• steps.lighthouse.outputs的内容完全由你在run: lighthouse步骤中显式写入$GITHUB_OUTPUT的键值对决定，默认是空对象，因为普通run步骤不会自动生成输出。
• 要查看它的结构，可在后续步骤中添加一行命令：

  echo ${{ toJSON(steps.lighthouse.outputs) }}
  

  运行后在GitHub Actions的日志中就能看到完整的JSON结构。
• 核心规则：GitHub Actions步骤的输出只有两种来源——要么是自定义Action在outputs字段中预定义的输出项，要么是在run步骤中用echo "key=value" >> $GITHUB_OUTPUT格式手动生成的键值对，每行对应一个输出项。

疑问2：如何将Lighthouse结果发布为PR评论 #

需要分两步实现：先解析Lighthouse的结构化输出，提取关键指标；再通过GitHub API将指标格式化为PR评论。

完整修正配置示例 #

name: Pull Request Checks

on:
  pull_request:

jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout Github Repository'
        uses: actions/checkout@v3

      - name: Use Node.js 16.x
        uses: actions/setup-node@v3
        with:
          node-version: 16.x

      - name: 'Install dependencies and build'
        run: |
          npm install
          npm run build

      - name: 'Install jq (JSON解析工具)'
        run: sudo apt-get install jq -y

      - name: 'Run Lighthouse CI and extract scores'
        id: lighthouse
        run: |
          npm install -g @lhci/cli@0.11.x
          # 运行Lighthouse并保存JSON格式结果
          lhci autorun --output=json > lh-results.json
          # 用jq提取各项分数（转换为百分制整数）
          PERFORMANCE=$(jq -r '.[] | .categories.performance.score * 100 | floor' lh-results.json)
          ACCESSIBILITY=$(jq -r '.[] | .categories.accessibility.score * 100 | floor' lh-results.json)
          BEST_PRACTICES=$(jq -r '.[] | .categories["best-practices"].score * 100 | floor' lh-results.json)
          SEO=$(jq -r '.[] | .categories.seo.score * 100 | floor' lh-results.json)
          # 将分数写入步骤输出
          echo "performance=$PERFORMANCE" >> $GITHUB_OUTPUT
          echo "accessibility=$ACCESSIBILITY" >> $GITHUB_OUTPUT
          echo "best_practices=$BEST_PRACTICES" >> $GITHUB_OUTPUT
          echo "seo=$SEO" >> $GITHUB_OUTPUT

      - name: 'Output Lighthouse results to step summary'
        run: |
          echo "### Lighthouse CI Results" >> $GITHUB_STEP_SUMMARY
          echo "| Category | Score |" >> $GITHUB_STEP_SUMMARY
          echo "|----------|-------|" >> $GITHUB_STEP_SUMMARY
          echo "| Performance | ${{ steps.lighthouse.outputs.performance }}/100 |" >> $GITHUB_STEP_SUMMARY
          echo "| Accessibility | ${{ steps.lighthouse.outputs.accessibility }}/100 |" >> $GITHUB_STEP_SUMMARY
          echo "| Best Practices | ${{ steps.lighthouse.outputs.best_practices }}/100 |" >> $GITHUB_STEP_SUMMARY
          echo "| SEO | ${{ steps.lighthouse.outputs.seo }}/100 |" >> $GITHUB_STEP_SUMMARY

      - name: 'Post Lighthouse results as PR comment'
        uses: actions/github-script@v6
        with:
          script: |
            const outputs = ${{ toJSON(steps.lighthouse.outputs) }};
            const commentBody = `
            ### Lighthouse CI Results
            | Category | Score |
            |----------|-------|
            | Performance | ${outputs.performance}/100 |
            | Accessibility | ${outputs.accessibility}/100 |
            | Best Practices | ${outputs.best_practices}/100 |
            | SEO | ${outputs.seo}/100 |
            `;
            await github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: commentBody.trim()
            });

关键说明 #

• 你之前直接将lhci autorun的输出写入$GITHUB_OUTPUT报错，是因为lhci autorun的默认输出是非结构化的多行内容，不符合GitHub Actions输出要求的key=value单行格式，必须先解析成结构化的键值对。
• 使用jq工具是为了从Lighthouse生成的JSON结果中提取指定指标，ubuntu-latest环境默认没有jq，所以需要手动安装。
• actions/github-script可以直接调用GitHub API，无需额外配置token（GitHub Actions会自动注入默认token），方便快速创建PR评论。

内容的提问来源于stack exchange，提问作者jsco