test: Add Lighthouse performance tests using Playwright #15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Lighthouse CI | |
| on: | |
| pull_request: | |
| branches: | |
| - main | |
| types: | |
| - opened | |
| - synchronize | |
| paths: | |
| - "client/**" | |
| - "core/**" | |
| - ".github/workflows/lighthouse-*.yml" | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: true | |
| jobs: | |
| lighthouse-ci: | |
| runs-on: ubuntu-latest | |
| permissions: | |
| contents: read | |
| pull-requests: write | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Setup pnpm | |
| uses: pnpm/action-setup@v3 | |
| with: | |
| version: 9 | |
| run_install: false | |
| - name: Setup Node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 20 | |
| cache: "pnpm" | |
| cache-dependency-path: "**/pnpm-lock.yaml" | |
| - name: Install all dependencies | |
| run: pnpm install --frozen-lockfile | |
| - name: Build core package | |
| run: | | |
| echo "Building core package..." | |
| pnpm --filter @troublepainter/core build | |
| echo "Core build output:" | |
| ls -la core/dist/ | |
| - name: Verify core build | |
| run: | | |
| if [ ! -f "core/dist/index.mjs" ]; then | |
| echo "Core build failed - index.mjs not found" | |
| exit 1 | |
| fi | |
| - name: Install Playwright browsers | |
| working-directory: ./client | |
| run: npx playwright install | |
| - name: Run Lighthouse audit | |
| working-directory: ./client | |
| id: lighthouse | |
| env: | |
| VITE_API_URL: ${{ secrets.VITE_API_URL }} | |
| VITE_SOCKET_URL: ${{ secrets.VITE_SOCKET_URL }} | |
| run: | | |
| pnpm build | |
| pnpm lighthouse | |
| - uses: actions/upload-artifact@v4 | |
| if: ${{ !cancelled() }} | |
| with: | |
| name: lighthouse-report | |
| path: | | |
| client/.lighthouse/MainPage.html | |
| client/.lighthouse/LobbyPage.html | |
| retention-days: 30 | |
| - name: Create PR Comment | |
| uses: actions/github-script@v6 | |
| with: | |
| script: | | |
| const fs = require('fs') | |
| const results = JSON.parse(fs.readFileSync('client/.lighthouse/results.json', 'utf8')) | |
| const getEmoji = (score) => { | |
| if (score >= 90) return '🟢' | |
| else if (score >= 50) return '🟡'; | |
| else return '🔴' | |
| } | |
| let comment = '### 🚦 Lighthouse Audit Results\n\n'; | |
| results.forEach(result => { | |
| comment += `<details>\n<summary>${result.pageName}</summary>\n\n` | |
| //Categories | |
| comment += '#### Category Scores\n\n'; | |
| comment += '| Category | Score |\n|----------|-------|\n'; | |
| Object.entries(result.categories).forEach(([key, value]) => { | |
| const emoji = getEmoji(value.score); | |
| comment += `| ${key} | ${emoji} ${value.score} |\n` | |
| }) | |
| // Metrics | |
| comment += '\n#### Core Web Vitals & Metrics\n\n'; | |
| comment += '| Metric | Value | Score |\n|---------|--------|-------|\n'; | |
| Object.entries(result.metrics).forEach(([key, value]) => { | |
| const emoji = getEmoji(value.score); | |
| comment += `| ${key} | ${value.displayValue} | ${emoji} ${value.score} |\n`; | |
| }) | |
| comment += '</details>\n\n\n'; | |
| }) | |
| github.rest.issues.createComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.issue.number, | |
| body: comment | |
| }) |