Build a Test Reporting Dashboard: Playwright Metrics, Grafana, and Team Visibility

Test reports that sit in CI artifacts unseen add zero value. Build a live dashboard that teams check daily — test health, flakiness trends, coverage gaps, deployment impact.

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

The 4-Panel Dashboard

Panel	Metrics	Audience
Test Health	Pass rate, flakiness rate, suite duration	QA team
Coverage	Critical path coverage, untested areas	QA + Dev leads
Deployment Impact	Error rate before/after, latency change	Engineering managers
Quality Score	Escaped defects, MTTR, release confidence	Leadership

Playwright Custom Reporter for Metrics

// reporters/MetricsReporter.ts
import type { Reporter, TestCase, TestResult, FullResult } from '@playwright/test/reporter';

class MetricsReporter implements Reporter {
  private results: { name: string; status: string; duration: number; retries: number }[] = [];

  onTestEnd(test: TestCase, result: TestResult) {
    this.results.push({
      name: test.title,
      status: result.status,
      duration: result.duration,
      retries: result.retry,
    });
  }

  async onEnd(result: FullResult) {
    const total = this.results.length;
    const passed = this.results.filter(r => r.status === 'passed').length;
    const failed = this.results.filter(r => r.status === 'failed').length;
    const flaky = this.results.filter(r => r.retries > 0 && r.status === 'passed').length;
    const avgDuration = this.results.reduce((sum, r) => sum + r.duration, 0) / total;

    const metrics = {
      timestamp: new Date().toISOString(),
      total, passed, failed, flaky,
      pass_rate: passed / total,
      flaky_rate: flaky / total,
      avg_duration_ms: Math.round(avgDuration),
      suite_duration_ms: result.duration,
    };

    // Send to InfluxDB/Prometheus/file
    console.log('METRICS:', JSON.stringify(metrics));
    // await sendToInfluxDB(metrics);
  }
}

export default MetricsReporter;

Allure Report Integration

# Install
npm install -D allure-playwright allure-commandline

# Config
reporter: [['allure-playwright'], ['./reporters/MetricsReporter.ts']]

# Generate
npx allure generate allure-results -o allure-report --clean
npx allure open allure-report

Grafana Dashboard Setup

# docker-compose.yml for metrics stack
version: '3.8'
services:
  influxdb:
    image: influxdb:2.7
    ports: ['8086:8086']
    environment:
      DOCKER_INFLUXDB_INIT_MODE: setup
      DOCKER_INFLUXDB_INIT_USERNAME: admin
      DOCKER_INFLUXDB_INIT_PASSWORD: adminpass
      DOCKER_INFLUXDB_INIT_BUCKET: test-metrics

  grafana:
    image: grafana/grafana:10.0.0
    ports: ['3000:3000']
    depends_on: [influxdb]
    environment:
      GF_SECURITY_ADMIN_PASSWORD: admin

Metrics to Track Over Time

• Pass rate trend: Should be >98%. Dropping trend = quality regression
• Flakiness rate: Should be <2%. Rising trend = infrastructure or test debt
• Suite duration: Should be stable. Growing = add parallelization or prune tests
• Test count vs code lines: Ratio should stay constant. Dropping = coverage debt
• Escaped defects/month: Should trend down. Rising = test gaps

GitHub Actions: Publish Metrics After Each Run

- name: Run tests
  run: npx playwright test
- name: Publish metrics
  if: always()
  run: node scripts/publish-metrics.js
  env:
    INFLUXDB_URL: ${{ secrets.INFLUXDB_URL }}
    INFLUXDB_TOKEN: ${{ secrets.INFLUXDB_TOKEN }}