The Playwright Test Results Badge: Monitor Your CI/CD Directly from Chrome

const fs = require('fs');

class SummaryReporter {
  onBegin(config, suite) {
    this.rootSuite = suite;
  }

  onEnd(result) {
    const summary = {
      schemaVersion: 1,
      passed: 0,
      failed: 0,
      flaky: 0,
      total: 0,
      startTime: new Date().toISOString(),
      isSummary: true,
      failedTests: [] // 👈 NEW: Added array to hold names
    };

    if (this.rootSuite) {
      for (const test of this.rootSuite.allTests()) {
        const status = test.outcome();
        if (status === 'expected') summary.passed++;
        if (status === 'unexpected') {
          summary.failed++;
          summary.failedTests.push(test.title); // 👈 NEW: Push failing test name
        }
        if (status === 'flaky') summary.flaky++;
      }
    }

    summary.total = summary.passed + summary.failed + summary.flaky;
    fs.writeFileSync('test-summary.json', JSON.stringify(summary, null, 2));
    console.log('✅ Automatic summary created: test-summary.json');
  }
}

module.exports = SummaryReporter;

// ... other imports
reporters: [
  ['./summary-reporter.js'],  // Add this line
  ['html'],                   // Keep your existing reporters
  ['list']
],

name: Playwright Tests
on: [push, pull_request]

permissions:
  contents: write

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
    - name: Run tests
      run: npx playwright test
    - name: Update test results
      if: always()
      run: |
        git config user.name "Actions Bot"
        git config user.email "actions@github.com"
        git add test-summary.json
        git diff --staged --quiet || git commit -m "chore: update results [skip ci]"
        git push

on: push: branches: [main] workflow_dispatch: permissions: contents: write pages: write id-token: write jobs: deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - 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: Commit and push updated results if: always() run: | git config user.name "github-actions[bot]" git config user.email "github-actions[bot]@users.noreply.github.com" git add test-summary.json git commit -m "Update test summary [skip ci]" || echo "No changes" git push - name: Prepare Pages artifact (Summary and results) if: always() run: | mkdir -p public if [ -f test-summary.json ]; then cp test-summary.json public/test-summary.json else echo '{"schemaVersion":1,"passed":0,"failed":0,"flaky":0,"total":0,"startTime":"","isSummary":true,"failedTests":["Summary file not generated"]}' > public/test-summary.json fi node - <<'NODE' const fs = require('fs'); const path = 'public/test-summary.json'; const summary = JSON.parse(fs.readFileSync(path, 'utf8')); const passed = Number(summary.passed || 0); const failed = Number(summary.failed || 0); const flaky = Number(summary.flaky || 0); const total = Number(summary.total || 0); const failedTests = Array.isArray(summary.failedTests) ? summary.failedTests : []; const generatedAt = summary.startTime || new Date().toISOString(); const status = failed > 0 ? 'Failing' : 'Passing'; const escapeHtml = (value) => String(value) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/"/g, '&quot;') .replace(/'/g, '&#39;'); const failedList = failedTests.length ? failedTests.map((name) => `<li>${escapeHtml(name)}</li>`).join('') : '<li>No failed tests reported</li>'; const html = `<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Playwright Test Summary</title> <style> :root { color-scheme: light; } body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: #F5F7FB; color: #111827; } .container { max-width: 860px; margin: 40px auto; padding: 0 16px; } .card { background: #FFFFFF; border: 1px solid #DBE3EF; border-radius: 12px; padding: 20px; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06); } h1 { margin-top: 0; margin-bottom: 8px; } .meta { color: #475569; margin-bottom: 16px; } .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .metric { border: 1px solid #E5E7EB; border-radius: 10px; padding: 10px; background: #F8FAFC; } .metric b { display: block; font-size: 22px; margin-top: 4px; } ul { padding-left: 20px; } a { color: #0F766E; text-decoration: none; } a:hover { text-decoration: underline; } @media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } </style> </head> <body> <div class="container"> <div class="card"> <h1>Playwright Test Summary</h1> <div class="meta">Status: <b>${escapeHtml(status)}</b> | Generated: ${escapeHtml(generatedAt)}</div> <div class="grid"> <div class="metric">Total<b>${total}</b></div> <div class="metric">Passed<b>${passed}</b></div> <div class="metric">Failed<b>${failed}</b></div> <div class="metric">Flaky<b>${flaky}</b></div> </div> <h2>Failed Tests</h2> <ul>${failedList}</ul> </div> </div> </body> </html>`; fs.writeFileSync('public/index.html', html, 'utf8'); NODE touch public/.nojekyll - name: Configure Pages if: always() uses: actions/configure-pages@v4 - name: Upload artifact if: always() uses: actions/upload-pages-artifact@v3 with: path: public - name: Deploy id: deployment if: always() uses: actions/deploy-pages@v4

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

name: Deploy Test Results to AWS S3

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  test-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Install dependencies
        run: npm ci
      
      - name: Install Playwright
        run: npx playwright install --with-deps
      
      - name: Run Playwright tests
        run: npx playwright test
      
      - name: Upload results to AWS S3
        if: always()
        run: |
          
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_DEFAULT_REGION: ${{ secrets.AWS_DEFAULT_REGION }}