如何实现每个Pull Request的Playwright报告同步发布到GitHub Pages

核心思路 #

原配置每次部署都会覆盖GitHub Pages根目录，导致PR的测试报告被后续部署覆盖。我们需要给每个PR生成专属的报告目录，并维护一个索引页来统一管理所有报告的访问入口。

具体实现步骤 #

1. 动态生成PR专属报告目录 #

根据当前触发事件类型（PR/主分支推送），创建对应命名的目录存放测试报告，比如PR编号命名的pr-123目录，主分支用main目录。

2. 可选：保留历史报告 #

如果需要留存所有PR的历史报告，需先拉取已部署的GitHub Pages内容，将新报告目录合并进去后再重新部署。

3. 自动生成索引页面 #

创建一个index.html，自动遍历所有报告目录生成链接列表，方便快速定位目标PR的报告。

修改后的GitHub Action配置 #

name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]

jobs:
  Playwright-tests:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
      cancel-in-progress: true

    permissions:
      contents: write
      pages: write
      pull-requests: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: Run Playwright tests
        run: npx playwright test

      - name: Prepare report directory
        id: prepare-report
        run: |
          # 根据事件类型确定报告目录名
          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
            REPORT_DIR="pr-${{ github.event.pull_request.number }}"
          else
            REPORT_DIR="main"
          fi
          # 创建目录并复制测试报告
          mkdir -p ./pages/$REPORT_DIR
          cp -r playwright-report/* ./pages/$REPORT_DIR/
          # 输出目录名供后续步骤调用
          echo "report_dir=$REPORT_DIR" >> $GITHUB_OUTPUT

      - name: Pull existing Pages content (可选)
        if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository
        run: |
          # 拉取已部署的gh-pages分支内容，保留历史报告
          git clone --depth 1 --branch gh-pages https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git temp-pages
          if [ -d temp-pages ]; then
            cp -r temp-pages/* ./pages/
            rm -rf temp-pages
          fi

      - name: Generate index page
        run: |
          cat > ./pages/index.html << EOF
          <!DOCTYPE html>
          <html>
          <head>
            <title>Playwright Test Reports</title>
            <style>
              body { font-family: Arial, sans-serif; margin: 20px; }
              .report-item { margin: 10px 0; padding: 8px; border: 1px solid #eee; border-radius: 4px; }
              .report-item a { text-decoration: none; color: #0366d6; }
              .report-item a:hover { text-decoration: underline; }
            </style>
          </head>
          <body>
            <h1>Playwright Test Reports</h1>
            <h2>所有报告</h2>
          EOF
          # 遍历报告目录生成链接
          for dir in ./pages/*/; do
            dir_name=$(basename "$dir")
            echo "<div class='report-item'><a href='./$dir_name/'>$dir_name 测试报告</a></div>" >> ./pages/index.html
          done
          echo "</body></html>" >> ./pages/index.html

      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report-${{ steps.prepare-report.outputs.report_dir }}
          path: ./pages/${{ steps.prepare-report.outputs.report_dir }}/
          retention-days: 30

      - name: Setup Pages
        uses: actions/configure-pages@v2

      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v1.0.7
        with:
          path: ./pages/

      - name: Deploy to Github Pages
        id: deployment
        uses: actions/deploy-pages@v1.2.4

      - name: Comment PR with report link
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v6
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `Playwright测试报告已生成：[查看报告](${{ steps.deployment.outputs.page_url }}/${{ steps.prepare-report.outputs.report_dir }}/)`
            })

关键配置说明 #

• 动态目录生成：通过github.event_name和PR编号区分不同场景，确保每个PR的报告存放在独立目录，避免覆盖。
• 历史报告留存：通过拉取gh-pages分支的现有内容，合并新报告目录，实现所有历史报告的持久化。
• 索引页自动生成：遍历报告目录自动生成链接列表，无需手动维护访问入口。
• PR评论通知：在PR中自动插入报告链接，让开发者直接在PR页面查看测试结果。

注意事项 #

1. 确保仓库已启用GitHub Pages，且部署来源设置为GitHub Actions。
2. 权限配置仅保留必要项（contents: write、pages: write、pull-requests: write），避免过度授权。
3. 对于fork的PR，由于权限限制可能无法拉取原仓库的gh-pages分支，可跳过拉取步骤，仅部署当前PR的报告。
4. 若不需要留存历史报告，可直接删除Pull existing Pages content步骤，每次部署仅保留当前报告。

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