Cách xây dựng Playwright Reporter tùy chỉnh cho Next.js Dashboards

import type {
  Reporter,
  TestCase,
  TestResult,
  FullResult,
  Suite,
  FullConfig,
} from '@playwright/test/reporter';

interface TestPayload {
  testId: string;
  title: string;
  fullTitle: string;
  filePath: string;
  status: 'passed' | 'failed' | 'flaky' | 'skipped' | 'timedOut';
  retryCount: number;
  durationMs: number;
  workerIndex: number;
  errorMessage: string | null;
  errorStack: string | null;
  attachmentUrls: string[];
}

interface RunPayload {
  runId: string;
  branch: string;
  commitSha: string;
  status: FullResult['status'];
  startedAt: string;
  finishedAt: string;
  totalTests: number;
  passedTests: number;
  failedTests: number;
  flakyTests: number;
  skippedTests: number;
  tests: TestPayload[];
}

class NextjsDashboardReporter implements Reporter {
  private results: TestPayload[] = [];
  private startedAt: string = '';
  private runId: string;
  private dashboardUrl: string;

  constructor(options: { dashboardUrl?: string } = {}) {
    this.runId = process.env.CI_RUN_ID ?? crypto.randomUUID();
    this.dashboardUrl =
      options.dashboardUrl ??
      process.env.DASHBOARD_URL ??
      'http://localhost:3000';
  }

  onBegin(_config: FullConfig, _suite: Suite) {
    this.startedAt = new Date().toISOString();
    console.log(`[Reporter] Run ${this.runId} started at ${this.startedAt}`);
  }

  onTestEnd(test: TestCase, result: TestResult) {
    // A test that passed but only after retries is flaky
    const isFlaky = result.status === 'passed' && result.retry > 0;

    this.results.push({
      testId: test.id,
      title: test.title,
      fullTitle: test.titlePath().join(' > '),
      filePath: test.location.file,
      status: isFlaky ? 'flaky' : result.status,
      retryCount: result.retry,
      durationMs: result.duration,
      workerIndex: result.workerIndex ?? -1,
      errorMessage: result.errors[0]?.message?.slice(0, 2000) ?? null,
      errorStack: result.errors[0]?.stack?.slice(0, 4000) ?? null,
      // Attachments are uploaded to S3/R2 separately; we store only URLs
      attachmentUrls: result.attachments
        .filter((a) => a.path)
        .map((a) => `${this.dashboardUrl}/artifacts/${this.runId}/${a.name}`),
    });
  }

  async onEnd(result: FullResult) {
    const payload: RunPayload = {
      runId: this.runId,
      branch: process.env.GITHUB_REF_NAME ?? 'local',
      commitSha: process.env.GITHUB_SHA ?? 'unknown',
      status: result.status,
      startedAt: this.startedAt,
      finishedAt: new Date().toISOString(),
      totalTests: this.results.length,
      passedTests: this.results.filter((t) => t.status === 'passed').length,
      failedTests: this.results.filter((t) => t.status === 'failed').length,
      flakyTests: this.results.filter((t) => t.status === 'flaky').length,
      skippedTests: this.results.filter((t) => t.status === 'skipped').length,
      tests: this.results,
    };

    try {
      const response = await fetch(`${this.dashboardUrl}/api/reports`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-reporter-secret': process.env.REPORTER_SECRET ?? '',
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        console.error(`[Reporter] Upload failed: ${response.status} ${await response.text()}`);
      } else {
        console.log(`[Reporter] Run ${this.runId} uploaded successfully.`);
      }
    } catch (err) {
      // Never let reporter errors crash the CI process
      console.error('[Reporter] Network error during upload:', err);
    }
  }
}

export default NextjsDashboardReporter;

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],                                    // Console output during run
    ['./dashboard-reporter.ts', {               // Custom dashboard reporter
      dashboardUrl: process.env.DASHBOARD_URL,
    }],
  ],
});

import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';

const REPORTER_SECRET = process.env.REPORTER_SECRET;

export async function POST(request: Request) {
  // Validate the shared secret
  if (REPORTER_SECRET) {
    const secret = request.headers.get('x-reporter-secret');
    if (secret !== REPORTER_SECRET) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
  }

  const data = await request.json();

  // Upsert the run record (idempotent for CI sharding where multiple workers post)
  const run = await prisma.testRun.upsert({
    where: { runId: data.runId },
    create: {
      runId: data.runId,
      branch: data.branch,
      commitSha: data.commitSha,
      status: data.status,
      startedAt: new Date(data.startedAt),
      finishedAt: new Date(data.finishedAt),
      totalTests: data.totalTests,
      passedTests: data.passedTests,
      failedTests: data.failedTests,
      flakyTests: data.flakyTests,
      skippedTests: data.skippedTests,
    },
    update: {
      // Merge shard results: aggregate counts
      totalTests: { increment: data.totalTests },
      passedTests: { increment: data.passedTests },
      failedTests: { increment: data.failedTests },
      flakyTests: { increment: data.flakyTests },
      skippedTests: { increment: data.skippedTests },
      status: data.status === 'failed' ? 'failed' : undefined,
      finishedAt: new Date(data.finishedAt),
    },
  });

  // Batch-insert all individual test results
  await prisma.testResult.createMany({
    data: data.tests.map((t: any) => ({
      runId: run.id,
      testId: t.testId,
      title: t.title,
      fullTitle: t.fullTitle,
      filePath: t.filePath,
      status: t.status,
      retryCount: t.retryCount,
      durationMs: t.durationMs,
      workerIndex: t.workerIndex,
      errorMessage: t.errorMessage,
    })),
    skipDuplicates: true,
  });

  return NextResponse.json({ success: true, runId: run.runId });
}

model TestRun {
  id          Int          @id @default(autoincrement())
  runId       String       @unique
  branch      String
  commitSha   String
  status      String
  startedAt   DateTime
  finishedAt  DateTime
  totalTests  Int          @default(0)
  passedTests Int          @default(0)
  failedTests Int          @default(0)
  flakyTests  Int          @default(0)
  skippedTests Int         @default(0)
  results     TestResult[]
  createdAt   DateTime     @default(now())

  @@index([branch])
  @@index([commitSha])
}

model TestResult {
  id           Int     @id @default(autoincrement())
  run          TestRun @relation(fields: [runId], references: [id])
  runId        Int
  testId       String
  title        String
  fullTitle    String
  filePath     String
  status       String
  retryCount   Int     @default(0)
  durationMs   Int
  workerIndex  Int
  errorMessage String?

  @@index([testId])
  @@index([status])
  @@index([filePath])
}

// Top 10 flaky tests in the last 30 days
const flakyLeaderboard = await prisma.testResult.groupBy({
  by: ['testId', 'fullTitle', 'filePath'],
  where: {
    run: { startedAt: { gte: new Date(Date.now() - 30 * 86400_000) } },
  },
  _count: { testId: true },
  _sum: { retryCount: true },
  having: { retryCount: { _sum: { gt: 0 } } },
  orderBy: { _sum: { retryCount: 'desc' } },
  take: 10,
});

# .github/workflows/e2e.yml
strategy:
  matrix:
    shardIndex: [1, 2, 3, 4]
    shardTotal: [4]
env:
  CI_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}
  DASHBOARD_URL: ${{ secrets.DASHBOARD_URL }}
  REPORTER_SECRET: ${{ secrets.REPORTER_SECRET }}