Merge pull request #1 from estruyf/dev

Author: estruyf

.github/workflows/release-dev.yml

@@ -4,9 +4,16 @@ on:
     branches:
       - dev
 
+# Cancel the previous runs (if any are still waiting)
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
+    environment:
+      name: npm
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.github/workflows/testing.yml

@@ -3,7 +3,9 @@ name: E2E Testing
 on:
   workflow_dispatch:
   push:
-    branches: main
+    branches:
+      - main
+      - dev
 
 jobs:
   testing:

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0]
+
+- Update test suite logic
+- Added OS name
+- Added browser/project name
+- Added retries count
+- Added `showError` option
+
 ## [1.0.0]
 
 - Initial release

README.md

@@ -35,6 +35,7 @@ The reporter supports the following configuration options:
 | --- | --- | --- |
 | title | Title of the report | `Test results` |
 | useDetails | Use details in summary which creates expandable content | `false` |
+| showError | Show error message in summary | `false` |
 
 To use these option, you can update the reporter configuration:
 
@@ -45,7 +46,8 @@ export default defineConfig({
   reporter: [
     ['@estruyf/github-actions-reporter', {
       title: 'My custom title',
-      useDetails: true
+      useDetails: true,
+      showError: true
     }]
   ],
 });

assets/example-with-details.png

@@ -1,6 +1,6 @@
 {
   "name": "@estruyf/github-actions-reporter",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "GitHub Actions reporter for Playwright",
   "main": "dist/index.js",
   "scripts": {
@@ -34,7 +34,8 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@actions/core": "^1.10.0"
+    "@actions/core": "^1.10.0",
+    "ansi-to-html": "^0.7.2"
   },
   "peerDependencies": {
     "@playwright/test": "^1.37.0"

assets/example-without-details.png

@@ -11,7 +11,7 @@ const config: PlaywrightTestConfig<{}, {}> = {
   retries: process.env.CI ? 2 : 1,
   workers: process.env.CI ? 1 : undefined,
   reporter: [
-    ["./src/index.ts", { title: "Reporter testing" }],
+    ["./src/index.ts", { title: "Reporter testing", showError: true }],
     [
       "./src/index.ts",
       { title: "Reporter testing with details", useDetails: true },

package-lock.json

@@ -3,102 +3,100 @@ import type {
   FullConfig,
   Suite,
   TestCase,
-  TestResult,
   FullResult,
-  TestStatus,
 } from "@playwright/test/reporter";
 import * as core from "@actions/core";
 import { basename } from "path";
 import { getHtmlTable } from "./utils/getHtmlTable";
 import { getTableRows } from "./utils/getTableRows";
+import { checkForFailedTests } from "./utils/checkForFailedTests";
+import Convert from "ansi-to-html";
 
 interface GitHubActionOptions {
   title?: string;
   useDetails?: boolean;
-}
-
-interface TestDetails {
-  total: number | undefined;
-
-  tests: {
-    [fileName: string]: TestResults;
-  };
-}
-
-export interface TestResults {
-  [testTitle: string]: {
-    status: TestStatus | "pending";
-    duration: number;
-  };
+  showError?: boolean;
 }
 
 class GitHubAction implements Reporter {
-  private testDetails: TestDetails = {
-    total: undefined,
-    tests: {},
-  };
+  private suite: Suite | undefined;
 
   constructor(private options: GitHubActionOptions = {}) {
     console.log(`Using GitHub Actions reporter`);
   }
 
-  onBegin(config: FullConfig, suite: Suite) {
-    this.testDetails.total = suite.allTests().length;
-  }
-
-  onTestBegin(test: TestCase, result: TestResult) {
-    const fileName = basename(test.location.file);
-
-    if (!this.testDetails.tests[fileName]) {
-      this.testDetails.tests[fileName] = {};
-    }
-
-    if (!this.testDetails.tests[fileName][test.title]) {
-      this.testDetails.tests[fileName][test.title] = {
-        status: "pending",
-        duration: 0,
-      };
-    }
-  }
-
-  onTestEnd(test: TestCase, result: TestResult) {
-    const fileName = basename(test.location.file);
-
-    this.testDetails.tests[fileName][test.title] = {
-      status: result.status,
-      duration: result.duration,
-    };
+  onBegin(_: FullConfig, suite: Suite) {
+    this.suite = suite;
   }
 
   async onEnd(result: FullResult) {
-    if (process.env.GITHUB_ACTIONS) {
+    if (process.env.GITHUB_ACTIONS && this.suite) {
+      const os = process.platform;
       const summary = core.summary;
       summary.addHeading(this.options.title || `Test results`, 1);
 
-      summary.addRaw(`Total tests: ${this.testDetails.total}`);
+      summary.addRaw(`Total tests: ${this.suite.allTests().length}`);
 
       if (this.options.useDetails) {
         summary.addSeparator();
       }
 
-      for (const fileName of Object.keys(this.testDetails.tests)) {
-        if (this.options.useDetails) {
-          const content = getHtmlTable(this.testDetails.tests[fileName]);
-
-          // Check if there are any failed tests
-          const failedTests = Object.values(
-            this.testDetails.tests[fileName]
-          ).filter((test) => test.status !== "passed");
-
-          summary.addDetails(
-            `${failedTests.length === 0 ? "✅" : "❌"} ${fileName}`,
-            content
-          );
-        } else {
-          summary.addHeading(fileName, 2);
-
-          const tableRows = getTableRows(this.testDetails.tests[fileName]);
-          summary.addTable(tableRows);
+      for (const suite of this.suite?.suites) {
+        const project = suite.project();
+
+        // Get all the test files
+        const files = suite
+          .allTests()
+          .map((test) => test.location.file)
+          .reduce((acc, curr) => {
+            if (!acc.includes(curr)) {
+              acc.push(curr);
+            }
+
+            return acc;
+          }, [] as string[]);
+
+        // Get all the tests per file
+        const tests = files.reduce((acc, curr) => {
+          acc[curr] = suite.allTests().filter((test) => {
+            return test.location.file === curr;
+          });
+
+          return acc;
+        }, {} as { [fileName: string]: TestCase[] });
+
+        for (const filePath of Object.keys(tests)) {
+          const fileName = basename(filePath);
+
+          if (this.options.useDetails) {
+            const content = getHtmlTable(
+              tests[filePath],
+              !!this.options.showError
+            );
+
+            // Check if there are any failed tests
+            const hasFailedTests = checkForFailedTests(tests[filePath]);
+
+            summary.addDetails(
+              `${hasFailedTests ? "❌" : "✅"} ${fileName} (${os}${
+                project!.name ? ` / ${project!.name}` : ""
+              })`,
+              content
+            );
+          } else {
+            summary.addHeading(
+              `${fileName} (${os}${
+                project!.name ? ` / ${project!.name}` : ""
+              })`,
+              2
+            );
+
+            const tableRows = getTableRows(
+              tests[filePath],
+              !!this.options.showError
+            );
+            summary.addTable(tableRows);
+          }
         }
       }
 

package.json

@@ -0,0 +1,9 @@
+import { TestCase } from "@playwright/test/reporter";
+
+export const checkForFailedTests = (tests: TestCase[]) => {
+  const failedTests = tests.filter((test) => {
+    return test.results[test.results.length - 1].status !== "passed";
+  });
+
+  return failedTests.length > 0;
+};

playwright.config.ts

@@ -1,6 +1,9 @@
-import { TestResults } from "..";
+import { TestCase } from "@playwright/test/reporter";
+import Convert from "ansi-to-html";
+
+export const getHtmlTable = (tests: TestCase[], showError: boolean): string => {
+  const convert = new Convert();
 
-export const getHtmlTable = (tests: TestResults): string => {
   const content: string[] = [];
 
   content.push(`<br>`);
@@ -10,19 +13,34 @@ export const getHtmlTable = (tests: TestResults): string => {
   content.push(`<th>Test</th>`);
   content.push(`<th>Status</th>`);
   content.push(`<th>Duration</th>`);
+  content.push(`<th>Retries</th>`);
+  if (showError) {
+    content.push(`<th>Error</th>`);
+  }
   content.push(`</tr>`);
   content.push(`</thead>`);
   content.push(`<tbody>`);
 
-  for (const testName of Object.keys(tests)) {
-    const test = tests[testName];
+  for (const test of tests) {
+    // Get the last result
+    const result = test.results[test.results.length - 1];
 
     content.push(`<tr>`);
-    content.push(`<td>${testName}</td>`);
+    content.push(`<td>${test.title}</td>`);
     content.push(
-      `<td>${test.status === "passed" ? "✅ Pass" : "❌ Fail"}</td>`
+      `<td>${result.status === "passed" ? "✅ Pass" : "❌ Fail"}</td>`
     );
-    content.push(`<td>${test.duration / 1000}s</td>`);
+    content.push(`<td>${result.duration / 1000}s</td>`);
+    content.push(`<td>${result.retry}</td>`);
+    if (showError) {
+      content.push(
+        `<td>${
+          result.error && result.error.message
+            ? convert.toHtml(result.error.message!)
+            : ""
+        }</td>`
+      );
+    }
     content.push(`</tr>`);
   }