QA Engineering • DevOps

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

Faruk Hasan By Faruk Hasan
10 min read

Overview

As a developer or QA engineer, how much time do you lose switching between your IDE and your CI/CD dashboard? The Playwright Test Results Badge is a lightweight Chrome extension designed to eliminate that friction. Instead of digging through 100MB logs, you get an instant visual summary of your test status directly in your browser toolbar.

Who is this for?
Perfect for DEVs, QA engineers, and students learning automated testing or CI/CD pipelines.
Privacy First
No accounts, no tracking, and no external servers. Your data stays between your browser and your source.
Auto Refresh
The extension polls your summary file every 1 minute in the background, keeping you always up to date.

What the Extension Does

Live Toolbar Badge

The badge stays visible at all times, providing a quick health check of your project:

Green 42 / 0 (All Passed)
Red 41 / 1 (Failure Detected)
Gray ? (No Data / Syncing)

Detailed Popup View

Click the extension to see a comprehensive breakdown:

Quick Setup Guide (4 Steps)

Follow these steps to integrate the badge with your Playwright project today.

Step 1: Create the Summary Reporter

Create summary-reporter.js in your project root. This converts heavy reports into a lightweight 1KB JSON.

summary-reporter.js
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
    };

    if (this.rootSuite) {
      for (const test of this.rootSuite.allTests()) {
        const status = test.outcome();
        if (status === 'expected') summary.passed++;
        if (status === 'unexpected') summary.failed++;
        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('✅ Test summary created: test-summary.json');
  }
}

module.exports = SummaryReporter;

Step 2: Configure Playwright

Update your playwright.config.ts to include your new custom reporter.

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

Step 3: Create GitHub Actions Workflow

Automate the test run and summary update. Ensure contents: write permission is enabled.

.github/workflows/playwright.yml
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

Step 4: Connect & Test

Push your changes, find the test-summary.json file in your repo, click "Raw", and paste that URL into the extension settings.

Pro Tip: GitHub UI links are supported too! The extension automatically converts them to raw links for you.

Workflow & Best Practices

The extension is designed to work with any CI tool including GitHub Actions, GitLab CI, Jenkins, and CircleCI.

Important: Set the workflow to run if: always(). This ensures the summary file is updated even when tests fail, which is exactly when you need the badge most!

Permissions Explained

Troubleshooting common issues

Badge shows gray ?

Check if test-summary.json exists and contains "isSummary": true. Verify the URL is public or reachable.

Tests not updating?

Confirm your GitHub Workflow has contents: write permissions and that [skip ci] is used to avoid infinite loops.

Boost Your Testing Productivity

Get the extension for free and keep your test health visible at all times.

Add to Chrome View Demo Repo