Playwright Kiss Terminal Report

reporter.ts

import type {
  Reporter,
  TestCase,
  TestResult,
  TestStatus,
} from '@playwright/test/reporter';
import * as path from 'path';
import { groupBy } from 'lodash';
import { AsciiTable3, AlignmentEnum } from 'ascii-table3';
// @ts-ignore
import chalk from 'chalk';
// @ts-ignore
import logSymbols from 'log-symbols';

const symbols: Record<TestStatus, string> = {
  passed: logSymbols.success,
  failed: logSymbols.error,
  skipped: '~',
  interrupted: logSymbols.warning,
  timedOut: logSymbols.warning,
};

const colors: Record<TestStatus, string> = {
  passed: chalk.greenBright,
  failed: chalk.red,
  skipped: chalk.blueBright,
  interrupted: chalk.yellowBright,
  timedOut: chalk.yellowBright,
};

type Reports = {
  spec: string;
  title: string;
  status: TestStatus;
  duration: number;
};

function splitStringIntoChunks(text: string, chunkSize: number = 70): string[] {
  const words = text.split(' ');
  const result: string[] = [];

  let currentChunk = '';
  let index = 0;

  for (const word of words) {
    if (currentChunk.length + word.length + 1 <= chunkSize) {
      // Adding the word to the current chunk if it doesn't exceed the chunk size
      currentChunk += (currentChunk.length > 0 ? ' ' : '') + word;
    } else {
      // Push the current chunk to the result array and start a new chunk with the current word
      result.push(currentChunk);
      index++;
      currentChunk = word;
    }
  }

  // Push the remaining chunk to the result array
  if (currentChunk.length > 0) {
    result.push(currentChunk);
  }

  const padded = result.map((line, index) =>
    index === 0 ? line : `    ${line}`,
  );

  return padded;
}

export default class MyReporter implements Reporter {
  reports: Reports[] = [];

  onTestEnd(test: TestCase, result: TestResult) {
    this.reports.push({
      spec: path.basename(test.location.file),
      title: test.title,
      status: result.status,
      duration: result.duration,
    });
  }

  onEnd() {
    const specs = groupBy(this.reports, 'spec');
    const table = new AsciiTable3()
      .setHeading('Tests', 'Status', 'Duration (ms)')
      .setHeadingAlign(AlignmentEnum.LEFT)
      .setAlign(2, AlignmentEnum.CENTER)
      .setStyle('compact')
      .addRowMatrix(
        Object.keys(specs).flatMap((spec) => {
          const specRows = [];
          specRows.push([spec, '', '']);
          specs[spec].forEach((test, index, tests) => {
            const statusBrush = colors[test.status] || chalk.yellow;
            const symbol = symbols[test.status] || ' ';
            const prefix = tests.length - 1 == index ? '└──' : '├──';
            // const prefix = tests.length - 1 == index ? '' : '';
            //`${prefix} ${statusBrush(test.title)}`
            const title = `${prefix} ${test.title}`;
            const lines = splitStringIntoChunks(title);
            lines.forEach((line, index) => {
              if (index === 0) {
                specRows.push([
                  lines.length > 1 ? line.replace('├──', '└──') : line,
                  statusBrush(symbol),
                  test.duration,
                ]);
              } else {
                specRows.push([line, '', '']);
              }
            });
          });
          specRows.push(['', '', '']);
          return specRows;
        }),
      );
    console.log(table.toString());
  }
}