ortoni-report 1.1.6 → 1.1.8

package/changelog.md

@@ -1,4 +1,22 @@
 # Change Log:
+## Version 1.1.8
+
+### Fixed
+- CSS issue
+
+## Version 1.1.7
+
+### Fixed
+- Layout issue where the test column extends off-screen
+- Screenshot layout of tests executed on mobile viewport 
+
+### New
+- Add custom project/organization logo
+- Exception handling in `ortoni-report.ts`
+- Added docs to the `OrtoniReportConfig`
+
+### Improved
+- Margin on Test List for better spacing
 
 ## Version 1.1.6
 - Implemented debounce function to reduce search event handling frequency.

package/dist/css/main.css

@@ -22442,4 +22442,4 @@ has-background-danger.is-hoverable:active {
   pointer-events: all !important;
 }
 
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */

package/dist/ortoni-report.d.ts

@@ -1,13 +1,45 @@
-import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@playwright/test/reporter';
-
+import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@playwright/test/reporter';
+
+/**
+ * Configuration options for OrtoniReport.
+ */
 interface OrtoniReportConfig {
+    /**
+     * The name of the project.
+     * @example "Ortoni Project"
+     */
     projectName?: string;
+    /**
+     * The name of the author.
+     * @example "John Doe"
+     */
     authorName?: string;
+    /**
+     * The type of tests being run.
+     * @example "Regression"
+     */
     testType?: string;
+    /**
+     * The preferred theme for the report.
+     * Can be either "light" or "dark".
+     * @default "System theme"
+     * @example "dark"
+     */
     preferredTheme?: 'light' | 'dark';
+    /**
+     * If true, images will be encoded in base64.
+     * @default false
+     * @example true
+     */
     base64Image?: boolean;
-}
-
+    /**
+     * The local relative or absolute path to the logo image.
+     * @example "./assets/logo.png"
+     * @example "/absolute/path/to/logo.png"
+     */
+    logo?: string;
+}
+
 interface Steps {
     snippet: string | undefined;
     title: string;
@@ -34,8 +66,8 @@ interface TestResultData {
     tracePath?: string;
     videoPath?: string;
     base64Image: boolean | undefined;
-}
-
+}
+
 declare class OrtoniReport implements Reporter {
     private projectRoot;
     private results;
@@ -50,6 +82,6 @@ declare class OrtoniReport implements Reporter {
     onTestEnd(test: TestCase, result: TestResult): void;
     onEnd(result: FullResult): void;
     generateHTML(filteredResults: TestResultData[], totalDuration: string): string;
-}
-
-export { OrtoniReportConfig, OrtoniReport as default };
+}
+
+export { OrtoniReportConfig, OrtoniReport as default };

package/dist/ortoni-report.js

@@ -1,242 +1,247 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ortoni-report.ts
-var ortoni_report_exports = {};
-__export(ortoni_report_exports, {
-  default: () => OrtoniReport
-});
-module.exports = __toCommonJS(ortoni_report_exports);
-var import_fs = __toESM(require("fs"));
-var import_path2 = __toESM(require("path"));
-var import_handlebars = __toESM(require("handlebars"));
-var import_safe = __toESM(require("colors/safe"));
-
-// src/utils/utils.ts
-var import_path = __toESM(require("path"));
-function msToTime(duration) {
-  const milliseconds = Math.floor(duration % 1e3);
-  const seconds = Math.floor(duration / 1e3 % 60);
-  const minutes = Math.floor(duration / (1e3 * 60) % 60);
-  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
-  let result = "";
-  if (hours > 0) {
-    result += `${hours}h:`;
-  }
-  if (minutes > 0 || hours > 0) {
-    result += `${minutes < 10 ? "0" + minutes : minutes}m:`;
-  }
-  if (seconds > 0 || minutes > 0 || hours > 0) {
-    result += `${seconds < 10 ? "0" + seconds : seconds}s`;
-  }
-  if (milliseconds > 0 && !(seconds > 0 || minutes > 0 || hours > 0)) {
-    result += `${milliseconds}ms`;
-  } else if (milliseconds > 0) {
-    result += `:${milliseconds < 100 ? "0" + milliseconds : milliseconds}ms`;
-  }
-  return result;
-}
-function normalizeFilePath(filePath) {
-  const normalizedPath = import_path.default.normalize(filePath);
-  return import_path.default.basename(normalizedPath);
-}
-function formatDate(date) {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = date.toLocaleString("default", { month: "short" });
-  const year = date.getFullYear();
-  const time = date.toLocaleTimeString();
-  return `${day}-${month}-${year} ${time}`;
-}
-
-// src/ortoni-report.ts
-var OrtoniReport = class {
-  constructor(config = {}) {
-    this.projectRoot = "";
-    this.results = [];
-    this.projectSet = /* @__PURE__ */ new Set();
-    // TODO: add tags to the filter dropdown
-    this.tagsSet = /* @__PURE__ */ new Set();
-    this.config = config;
-  }
-  onBegin(config, suite) {
-    this.results = [];
-    this.projectRoot = config.rootDir;
-  }
-  onTestBegin(test, result) {
-  }
-  onTestEnd(test, result) {
-    let status = result.status;
-    if (test.outcome() === "flaky") {
-      status = "flaky";
-    }
-    const projectName = test.titlePath()[1];
-    this.projectSet.add(projectName);
-    const location = test.location;
-    const filePath = normalizeFilePath(test.titlePath()[2]);
-    const tagPattern = /@[\w]+/g;
-    const testTags = test.title.match(tagPattern) || [];
-    const title = test.title.replace(tagPattern, "").trim();
-    const suiteTags = test.titlePath()[3].match(tagPattern) || [];
-    const suite = test.titlePath()[3].replace(tagPattern, "").trim();
-    const testResult = {
-      suiteTags,
-      testTags,
-      location: `${filePath}:${location.line}:${location.column}`,
-      retry: result.retry > 0 ? "retry" : "",
-      isRetry: result.retry,
-      projectName,
-      suite,
-      title,
-      status,
-      flaky: test.outcome(),
-      duration: msToTime(result.duration),
-      errors: result.errors.map((e) => import_safe.default.strip(e.message || e.toString())),
-      steps: result.steps.map((step) => {
-        const location2 = step.location ? `${import_path2.default.relative(this.projectRoot, step.location.file)}:${step.location.line}:${step.location.column}` : "";
-        return {
-          snippet: import_safe.default.strip(step.error?.snippet || ""),
-          title: step.title,
-          location: step.error ? location2 : ""
-        };
-      }),
-      logs: import_safe.default.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
-      filePath,
-      projects: this.projectSet,
-      base64Image: this.config.base64Image
-    };
-    if (result.attachments) {
-      const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
-      if (this.config.base64Image) {
-        if (screenshot && screenshot.path) {
-          const screenshotContent = import_fs.default.readFileSync(screenshot.path, "base64");
-          testResult.screenshotPath = `data:image/png;base64,${screenshotContent}`;
-        }
-      } else {
-        if (screenshot && screenshot.path) {
-          testResult.screenshotPath = import_path2.default.resolve(screenshot.path);
-        }
-      }
-      const tracePath = result.attachments.find((attachment) => attachment.name === "trace");
-      if (tracePath?.path) {
-        testResult.tracePath = import_path2.default.resolve(__dirname, tracePath.path);
-      }
-      const videoPath = result.attachments.find((attachment) => attachment.name === "video");
-      if (videoPath?.path) {
-        testResult.videoPath = import_path2.default.resolve(__dirname, videoPath.path);
-      }
-    }
-    this.results.push(testResult);
-  }
-  onEnd(result) {
-    const filteredResults = this.results.filter((r) => r.status !== "skipped" && !r.isRetry);
-    const totalDuration = msToTime(result.duration);
-    this.groupedResults = this.results.reduce((acc, result2, index) => {
-      const filePath = result2.filePath;
-      const suiteName = result2.suite;
-      const projectName = result2.projectName;
-      if (!acc[filePath]) {
-        acc[filePath] = {};
-      }
-      if (!acc[filePath][suiteName]) {
-        acc[filePath][suiteName] = {};
-      }
-      if (!acc[filePath][suiteName][projectName]) {
-        acc[filePath][suiteName][projectName] = [];
-      }
-      acc[filePath][suiteName][projectName].push({ ...result2, index });
-      return acc;
-    }, {});
-    import_handlebars.default.registerHelper("json", function(context) {
-      return safeStringify(context);
-    });
-    import_handlebars.default.registerHelper("eq", function(actualStatus, expectedStatus) {
-      return actualStatus === expectedStatus;
-    });
-    import_handlebars.default.registerHelper("or", () => {
-      var args = Array.prototype.slice.call(arguments);
-      var options = args.pop();
-      for (var i = 0; i < args.length; i++) {
-        if (args[i]) {
-          return options.fn(this);
-        }
-      }
-      return options.inverse(this);
-    });
-    import_handlebars.default.registerHelper("gt", function(a, b) {
-      return a > b;
-    });
-    const html = this.generateHTML(filteredResults, totalDuration);
-    const outputPath = import_path2.default.resolve(process.cwd(), "ortoni-report.html");
-    import_fs.default.writeFileSync(outputPath, html);
-    console.log(`Ortoni HTML report generated at ${outputPath}`);
-  }
-  generateHTML(filteredResults, totalDuration) {
-    const totalTests = filteredResults.length;
-    const passedTests = this.results.filter((r) => r.status === "passed").length;
-    const flakyTests = this.results.filter((r) => r.flaky === "flaky").length;
-    const failed = filteredResults.filter((r) => r.status === "failed" || r.status === "timedOut").length;
-    const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
-    const templateSource = import_fs.default.readFileSync(import_path2.default.resolve(__dirname, "report-template.hbs"), "utf-8");
-    const template = import_handlebars.default.compile(templateSource);
-    const data = {
-      totalDuration,
-      suiteName: this.suiteName,
-      results: this.results,
-      retryCount: this.results.filter((r) => r.isRetry).length,
-      passCount: passedTests,
-      failCount: failed,
-      skipCount: this.results.filter((r) => r.status === "skipped").length,
-      flakyCount: flakyTests,
-      totalCount: filteredResults.length,
-      groupedResults: this.groupedResults,
-      projectName: this.config.projectName,
-      authorName: this.config.authorName,
-      testType: this.config.testType,
-      preferredTheme: this.config.preferredTheme,
-      successRate,
-      lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-      projects: this.projectSet
-    };
-    return template(data);
-  }
-};
-function safeStringify(obj, indent = 2) {
-  const cache = /* @__PURE__ */ new Set();
-  const json = JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (cache.has(value)) {
-        return;
-      }
-      cache.add(value);
-    }
-    return value;
-  }, indent);
-  cache.clear();
-  return json;
-}
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ortoni-report.ts
+var ortoni_report_exports = {};
+__export(ortoni_report_exports, {
+  default: () => OrtoniReport
+});
+module.exports = __toCommonJS(ortoni_report_exports);
+var import_fs = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+var import_handlebars = __toESM(require("handlebars"));
+var import_safe = __toESM(require("colors/safe"));
+
+// src/utils/utils.ts
+var import_path = __toESM(require("path"));
+function msToTime(duration) {
+  const milliseconds = Math.floor(duration % 1e3);
+  const seconds = Math.floor(duration / 1e3 % 60);
+  const minutes = Math.floor(duration / (1e3 * 60) % 60);
+  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
+  let result = "";
+  if (hours > 0) {
+    result += `${hours}h:`;
+  }
+  if (minutes > 0 || hours > 0) {
+    result += `${minutes < 10 ? "0" + minutes : minutes}m:`;
+  }
+  if (seconds > 0 || minutes > 0 || hours > 0) {
+    result += `${seconds < 10 ? "0" + seconds : seconds}s`;
+  }
+  if (milliseconds > 0 && !(seconds > 0 || minutes > 0 || hours > 0)) {
+    result += `${milliseconds}ms`;
+  } else if (milliseconds > 0) {
+    result += `:${milliseconds < 100 ? "0" + milliseconds : milliseconds}ms`;
+  }
+  return result;
+}
+function normalizeFilePath(filePath) {
+  const normalizedPath = import_path.default.normalize(filePath);
+  return import_path.default.basename(normalizedPath);
+}
+function formatDate(date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = date.toLocaleString("default", { month: "short" });
+  const year = date.getFullYear();
+  const time = date.toLocaleTimeString();
+  return `${day}-${month}-${year} ${time}`;
+}
+function safeStringify(obj, indent = 2) {
+  const cache = /* @__PURE__ */ new Set();
+  const json = JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (cache.has(value)) {
+        return;
+      }
+      cache.add(value);
+    }
+    return value;
+  }, indent);
+  cache.clear();
+  return json;
+}
+
+// src/ortoni-report.ts
+var OrtoniReport = class {
+  constructor(config = {}) {
+    this.projectRoot = "";
+    this.results = [];
+    this.projectSet = /* @__PURE__ */ new Set();
+    this.tagsSet = /* @__PURE__ */ new Set();
+    this.config = config;
+  }
+  onBegin(config, suite) {
+    this.results = [];
+    this.projectRoot = config.rootDir;
+  }
+  onTestBegin(test, result) {
+  }
+  onTestEnd(test, result) {
+    try {
+      let status = result.status;
+      if (test.outcome() === "flaky") {
+        status = "flaky";
+      }
+      const projectName = test.titlePath()[1];
+      this.projectSet.add(projectName);
+      const location = test.location;
+      const filePath = normalizeFilePath(test.titlePath()[2]);
+      const tagPattern = /@[\w]+/g;
+      const testTags = test.title.match(tagPattern) || [];
+      const title = test.title.replace(tagPattern, "").trim();
+      const suiteTags = test.titlePath()[3].match(tagPattern) || [];
+      const suite = test.titlePath()[3].replace(tagPattern, "").trim();
+      const testResult = {
+        suiteTags,
+        testTags,
+        location: `${filePath}:${location.line}:${location.column}`,
+        retry: result.retry > 0 ? "retry" : "",
+        isRetry: result.retry,
+        projectName,
+        suite,
+        title,
+        status,
+        flaky: test.outcome(),
+        duration: msToTime(result.duration),
+        errors: result.errors.map((e) => import_safe.default.strip(e.message || e.toString())),
+        steps: result.steps.map((step) => {
+          const location2 = step.location ? `${import_path2.default.relative(this.projectRoot, step.location.file)}:${step.location.line}:${step.location.column}` : "";
+          return {
+            snippet: import_safe.default.strip(step.error?.snippet || ""),
+            title: step.title,
+            location: step.error ? location2 : ""
+          };
+        }),
+        logs: import_safe.default.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
+        filePath,
+        projects: this.projectSet,
+        base64Image: this.config.base64Image
+      };
+      if (result.attachments) {
+        const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
+        if (this.config.base64Image) {
+          if (screenshot && screenshot.path) {
+            try {
+              const screenshotContent = import_fs.default.readFileSync(screenshot.path, "base64");
+              testResult.screenshotPath = `data:image/png;base64,${screenshotContent}`;
+            } catch (error) {
+              console.error(`OrtoniReport: Failed to read screenshot file: ${screenshot.path}`, error);
+            }
+          }
+        } else {
+          if (screenshot && screenshot.path) {
+            testResult.screenshotPath = import_path2.default.resolve(screenshot.path);
+          }
+        }
+        const tracePath = result.attachments.find((attachment) => attachment.name === "trace");
+        if (tracePath?.path) {
+          testResult.tracePath = import_path2.default.resolve(__dirname, tracePath.path);
+        }
+        const videoPath = result.attachments.find((attachment) => attachment.name === "video");
+        if (videoPath?.path) {
+          testResult.videoPath = import_path2.default.resolve(__dirname, videoPath.path);
+        }
+      }
+      this.results.push(testResult);
+    } catch (error) {
+      console.error("OrtoniReport: Error processing test end:", error);
+    }
+  }
+  onEnd(result) {
+    try {
+      const filteredResults = this.results.filter((r) => r.status !== "skipped" && !r.isRetry);
+      const totalDuration = msToTime(result.duration);
+      this.groupedResults = this.results.reduce((acc, result2, index) => {
+        const filePath = result2.filePath;
+        const suiteName = result2.suite;
+        const projectName = result2.projectName;
+        if (!acc[filePath]) {
+          acc[filePath] = {};
+        }
+        if (!acc[filePath][suiteName]) {
+          acc[filePath][suiteName] = {};
+        }
+        if (!acc[filePath][suiteName][projectName]) {
+          acc[filePath][suiteName][projectName] = [];
+        }
+        acc[filePath][suiteName][projectName].push({ ...result2, index });
+        return acc;
+      }, {});
+      import_handlebars.default.registerHelper("json", function(context) {
+        return safeStringify(context);
+      });
+      import_handlebars.default.registerHelper("eq", function(actualStatus, expectedStatus) {
+        return actualStatus === expectedStatus;
+      });
+      const html = this.generateHTML(filteredResults, totalDuration);
+      const outputPath = import_path2.default.resolve(process.cwd(), "ortoni-report.html");
+      import_fs.default.writeFileSync(outputPath, html);
+      console.log(`Ortoni HTML report generated at ${outputPath}`);
+    } catch (error) {
+      console.error("OrtoniReport: Error generating report:", error);
+    }
+  }
+  generateHTML(filteredResults, totalDuration) {
+    try {
+      const totalTests = filteredResults.length;
+      const passedTests = this.results.filter((r) => r.status === "passed").length;
+      const flakyTests = this.results.filter((r) => r.flaky === "flaky").length;
+      const failed = filteredResults.filter((r) => r.status === "failed" || r.status === "timedOut").length;
+      const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
+      const templateSource = import_fs.default.readFileSync(import_path2.default.resolve(__dirname, "report-template.hbs"), "utf-8");
+      const template = import_handlebars.default.compile(templateSource);
+      const logo = this.config.logo;
+      const data = {
+        logo: logo ? import_path2.default.resolve(logo) : void 0,
+        totalDuration,
+        suiteName: this.suiteName,
+        results: this.results,
+        retryCount: this.results.filter((r) => r.isRetry).length,
+        passCount: passedTests,
+        failCount: failed,
+        skipCount: this.results.filter((r) => r.status === "skipped").length,
+        flakyCount: flakyTests,
+        totalCount: filteredResults.length,
+        groupedResults: this.groupedResults,
+        projectName: this.config.projectName,
+        authorName: this.config.authorName,
+        testType: this.config.testType,
+        preferredTheme: this.config.preferredTheme,
+        successRate,
+        lastRunDate: formatDate(/* @__PURE__ */ new Date()),
+        projects: this.projectSet
+      };
+      return template(data);
+    } catch (error) {
+      console.error("OrtoniReport:  Error generating HTML:", error);
+      return `<html><body><h1>Report generation failed</h1><pre>${error.stack}</pre></body></html>`;
+    }
+  }
+};

package/dist/ortoni-report.mjs

@@ -1,211 +1,216 @@
-// src/ortoni-report.ts
-import fs from "fs";
-import path2 from "path";
-import Handlebars from "handlebars";
-import colors from "colors/safe";
-
-// src/utils/utils.ts
-import path from "path";
-function msToTime(duration) {
-  const milliseconds = Math.floor(duration % 1e3);
-  const seconds = Math.floor(duration / 1e3 % 60);
-  const minutes = Math.floor(duration / (1e3 * 60) % 60);
-  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
-  let result = "";
-  if (hours > 0) {
-    result += `${hours}h:`;
-  }
-  if (minutes > 0 || hours > 0) {
-    result += `${minutes < 10 ? "0" + minutes : minutes}m:`;
-  }
-  if (seconds > 0 || minutes > 0 || hours > 0) {
-    result += `${seconds < 10 ? "0" + seconds : seconds}s`;
-  }
-  if (milliseconds > 0 && !(seconds > 0 || minutes > 0 || hours > 0)) {
-    result += `${milliseconds}ms`;
-  } else if (milliseconds > 0) {
-    result += `:${milliseconds < 100 ? "0" + milliseconds : milliseconds}ms`;
-  }
-  return result;
-}
-function normalizeFilePath(filePath) {
-  const normalizedPath = path.normalize(filePath);
-  return path.basename(normalizedPath);
-}
-function formatDate(date) {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = date.toLocaleString("default", { month: "short" });
-  const year = date.getFullYear();
-  const time = date.toLocaleTimeString();
-  return `${day}-${month}-${year} ${time}`;
-}
-
-// src/ortoni-report.ts
-var OrtoniReport = class {
-  constructor(config = {}) {
-    this.projectRoot = "";
-    this.results = [];
-    this.projectSet = /* @__PURE__ */ new Set();
-    // TODO: add tags to the filter dropdown
-    this.tagsSet = /* @__PURE__ */ new Set();
-    this.config = config;
-  }
-  onBegin(config, suite) {
-    this.results = [];
-    this.projectRoot = config.rootDir;
-  }
-  onTestBegin(test, result) {
-  }
-  onTestEnd(test, result) {
-    let status = result.status;
-    if (test.outcome() === "flaky") {
-      status = "flaky";
-    }
-    const projectName = test.titlePath()[1];
-    this.projectSet.add(projectName);
-    const location = test.location;
-    const filePath = normalizeFilePath(test.titlePath()[2]);
-    const tagPattern = /@[\w]+/g;
-    const testTags = test.title.match(tagPattern) || [];
-    const title = test.title.replace(tagPattern, "").trim();
-    const suiteTags = test.titlePath()[3].match(tagPattern) || [];
-    const suite = test.titlePath()[3].replace(tagPattern, "").trim();
-    const testResult = {
-      suiteTags,
-      testTags,
-      location: `${filePath}:${location.line}:${location.column}`,
-      retry: result.retry > 0 ? "retry" : "",
-      isRetry: result.retry,
-      projectName,
-      suite,
-      title,
-      status,
-      flaky: test.outcome(),
-      duration: msToTime(result.duration),
-      errors: result.errors.map((e) => colors.strip(e.message || e.toString())),
-      steps: result.steps.map((step) => {
-        const location2 = step.location ? `${path2.relative(this.projectRoot, step.location.file)}:${step.location.line}:${step.location.column}` : "";
-        return {
-          snippet: colors.strip(step.error?.snippet || ""),
-          title: step.title,
-          location: step.error ? location2 : ""
-        };
-      }),
-      logs: colors.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
-      filePath,
-      projects: this.projectSet,
-      base64Image: this.config.base64Image
-    };
-    if (result.attachments) {
-      const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
-      if (this.config.base64Image) {
-        if (screenshot && screenshot.path) {
-          const screenshotContent = fs.readFileSync(screenshot.path, "base64");
-          testResult.screenshotPath = `data:image/png;base64,${screenshotContent}`;
-        }
-      } else {
-        if (screenshot && screenshot.path) {
-          testResult.screenshotPath = path2.resolve(screenshot.path);
-        }
-      }
-      const tracePath = result.attachments.find((attachment) => attachment.name === "trace");
-      if (tracePath?.path) {
-        testResult.tracePath = path2.resolve(__dirname, tracePath.path);
-      }
-      const videoPath = result.attachments.find((attachment) => attachment.name === "video");
-      if (videoPath?.path) {
-        testResult.videoPath = path2.resolve(__dirname, videoPath.path);
-      }
-    }
-    this.results.push(testResult);
-  }
-  onEnd(result) {
-    const filteredResults = this.results.filter((r) => r.status !== "skipped" && !r.isRetry);
-    const totalDuration = msToTime(result.duration);
-    this.groupedResults = this.results.reduce((acc, result2, index) => {
-      const filePath = result2.filePath;
-      const suiteName = result2.suite;
-      const projectName = result2.projectName;
-      if (!acc[filePath]) {
-        acc[filePath] = {};
-      }
-      if (!acc[filePath][suiteName]) {
-        acc[filePath][suiteName] = {};
-      }
-      if (!acc[filePath][suiteName][projectName]) {
-        acc[filePath][suiteName][projectName] = [];
-      }
-      acc[filePath][suiteName][projectName].push({ ...result2, index });
-      return acc;
-    }, {});
-    Handlebars.registerHelper("json", function(context) {
-      return safeStringify(context);
-    });
-    Handlebars.registerHelper("eq", function(actualStatus, expectedStatus) {
-      return actualStatus === expectedStatus;
-    });
-    Handlebars.registerHelper("or", () => {
-      var args = Array.prototype.slice.call(arguments);
-      var options = args.pop();
-      for (var i = 0; i < args.length; i++) {
-        if (args[i]) {
-          return options.fn(this);
-        }
-      }
-      return options.inverse(this);
-    });
-    Handlebars.registerHelper("gt", function(a, b) {
-      return a > b;
-    });
-    const html = this.generateHTML(filteredResults, totalDuration);
-    const outputPath = path2.resolve(process.cwd(), "ortoni-report.html");
-    fs.writeFileSync(outputPath, html);
-    console.log(`Ortoni HTML report generated at ${outputPath}`);
-  }
-  generateHTML(filteredResults, totalDuration) {
-    const totalTests = filteredResults.length;
-    const passedTests = this.results.filter((r) => r.status === "passed").length;
-    const flakyTests = this.results.filter((r) => r.flaky === "flaky").length;
-    const failed = filteredResults.filter((r) => r.status === "failed" || r.status === "timedOut").length;
-    const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
-    const templateSource = fs.readFileSync(path2.resolve(__dirname, "report-template.hbs"), "utf-8");
-    const template = Handlebars.compile(templateSource);
-    const data = {
-      totalDuration,
-      suiteName: this.suiteName,
-      results: this.results,
-      retryCount: this.results.filter((r) => r.isRetry).length,
-      passCount: passedTests,
-      failCount: failed,
-      skipCount: this.results.filter((r) => r.status === "skipped").length,
-      flakyCount: flakyTests,
-      totalCount: filteredResults.length,
-      groupedResults: this.groupedResults,
-      projectName: this.config.projectName,
-      authorName: this.config.authorName,
-      testType: this.config.testType,
-      preferredTheme: this.config.preferredTheme,
-      successRate,
-      lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-      projects: this.projectSet
-    };
-    return template(data);
-  }
-};
-function safeStringify(obj, indent = 2) {
-  const cache = /* @__PURE__ */ new Set();
-  const json = JSON.stringify(obj, (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (cache.has(value)) {
-        return;
-      }
-      cache.add(value);
-    }
-    return value;
-  }, indent);
-  cache.clear();
-  return json;
-}
-export {
-  OrtoniReport as default
-};
+// src/ortoni-report.ts
+import fs from "fs";
+import path2 from "path";
+import Handlebars from "handlebars";
+import colors from "colors/safe";
+
+// src/utils/utils.ts
+import path from "path";
+function msToTime(duration) {
+  const milliseconds = Math.floor(duration % 1e3);
+  const seconds = Math.floor(duration / 1e3 % 60);
+  const minutes = Math.floor(duration / (1e3 * 60) % 60);
+  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
+  let result = "";
+  if (hours > 0) {
+    result += `${hours}h:`;
+  }
+  if (minutes > 0 || hours > 0) {
+    result += `${minutes < 10 ? "0" + minutes : minutes}m:`;
+  }
+  if (seconds > 0 || minutes > 0 || hours > 0) {
+    result += `${seconds < 10 ? "0" + seconds : seconds}s`;
+  }
+  if (milliseconds > 0 && !(seconds > 0 || minutes > 0 || hours > 0)) {
+    result += `${milliseconds}ms`;
+  } else if (milliseconds > 0) {
+    result += `:${milliseconds < 100 ? "0" + milliseconds : milliseconds}ms`;
+  }
+  return result;
+}
+function normalizeFilePath(filePath) {
+  const normalizedPath = path.normalize(filePath);
+  return path.basename(normalizedPath);
+}
+function formatDate(date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = date.toLocaleString("default", { month: "short" });
+  const year = date.getFullYear();
+  const time = date.toLocaleTimeString();
+  return `${day}-${month}-${year} ${time}`;
+}
+function safeStringify(obj, indent = 2) {
+  const cache = /* @__PURE__ */ new Set();
+  const json = JSON.stringify(obj, (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (cache.has(value)) {
+        return;
+      }
+      cache.add(value);
+    }
+    return value;
+  }, indent);
+  cache.clear();
+  return json;
+}
+
+// src/ortoni-report.ts
+var OrtoniReport = class {
+  constructor(config = {}) {
+    this.projectRoot = "";
+    this.results = [];
+    this.projectSet = /* @__PURE__ */ new Set();
+    this.tagsSet = /* @__PURE__ */ new Set();
+    this.config = config;
+  }
+  onBegin(config, suite) {
+    this.results = [];
+    this.projectRoot = config.rootDir;
+  }
+  onTestBegin(test, result) {
+  }
+  onTestEnd(test, result) {
+    try {
+      let status = result.status;
+      if (test.outcome() === "flaky") {
+        status = "flaky";
+      }
+      const projectName = test.titlePath()[1];
+      this.projectSet.add(projectName);
+      const location = test.location;
+      const filePath = normalizeFilePath(test.titlePath()[2]);
+      const tagPattern = /@[\w]+/g;
+      const testTags = test.title.match(tagPattern) || [];
+      const title = test.title.replace(tagPattern, "").trim();
+      const suiteTags = test.titlePath()[3].match(tagPattern) || [];
+      const suite = test.titlePath()[3].replace(tagPattern, "").trim();
+      const testResult = {
+        suiteTags,
+        testTags,
+        location: `${filePath}:${location.line}:${location.column}`,
+        retry: result.retry > 0 ? "retry" : "",
+        isRetry: result.retry,
+        projectName,
+        suite,
+        title,
+        status,
+        flaky: test.outcome(),
+        duration: msToTime(result.duration),
+        errors: result.errors.map((e) => colors.strip(e.message || e.toString())),
+        steps: result.steps.map((step) => {
+          const location2 = step.location ? `${path2.relative(this.projectRoot, step.location.file)}:${step.location.line}:${step.location.column}` : "";
+          return {
+            snippet: colors.strip(step.error?.snippet || ""),
+            title: step.title,
+            location: step.error ? location2 : ""
+          };
+        }),
+        logs: colors.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
+        filePath,
+        projects: this.projectSet,
+        base64Image: this.config.base64Image
+      };
+      if (result.attachments) {
+        const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
+        if (this.config.base64Image) {
+          if (screenshot && screenshot.path) {
+            try {
+              const screenshotContent = fs.readFileSync(screenshot.path, "base64");
+              testResult.screenshotPath = `data:image/png;base64,${screenshotContent}`;
+            } catch (error) {
+              console.error(`OrtoniReport: Failed to read screenshot file: ${screenshot.path}`, error);
+            }
+          }
+        } else {
+          if (screenshot && screenshot.path) {
+            testResult.screenshotPath = path2.resolve(screenshot.path);
+          }
+        }
+        const tracePath = result.attachments.find((attachment) => attachment.name === "trace");
+        if (tracePath?.path) {
+          testResult.tracePath = path2.resolve(__dirname, tracePath.path);
+        }
+        const videoPath = result.attachments.find((attachment) => attachment.name === "video");
+        if (videoPath?.path) {
+          testResult.videoPath = path2.resolve(__dirname, videoPath.path);
+        }
+      }
+      this.results.push(testResult);
+    } catch (error) {
+      console.error("OrtoniReport: Error processing test end:", error);
+    }
+  }
+  onEnd(result) {
+    try {
+      const filteredResults = this.results.filter((r) => r.status !== "skipped" && !r.isRetry);
+      const totalDuration = msToTime(result.duration);
+      this.groupedResults = this.results.reduce((acc, result2, index) => {
+        const filePath = result2.filePath;
+        const suiteName = result2.suite;
+        const projectName = result2.projectName;
+        if (!acc[filePath]) {
+          acc[filePath] = {};
+        }
+        if (!acc[filePath][suiteName]) {
+          acc[filePath][suiteName] = {};
+        }
+        if (!acc[filePath][suiteName][projectName]) {
+          acc[filePath][suiteName][projectName] = [];
+        }
+        acc[filePath][suiteName][projectName].push({ ...result2, index });
+        return acc;
+      }, {});
+      Handlebars.registerHelper("json", function(context) {
+        return safeStringify(context);
+      });
+      Handlebars.registerHelper("eq", function(actualStatus, expectedStatus) {
+        return actualStatus === expectedStatus;
+      });
+      const html = this.generateHTML(filteredResults, totalDuration);
+      const outputPath = path2.resolve(process.cwd(), "ortoni-report.html");
+      fs.writeFileSync(outputPath, html);
+      console.log(`Ortoni HTML report generated at ${outputPath}`);
+    } catch (error) {
+      console.error("OrtoniReport: Error generating report:", error);
+    }
+  }
+  generateHTML(filteredResults, totalDuration) {
+    try {
+      const totalTests = filteredResults.length;
+      const passedTests = this.results.filter((r) => r.status === "passed").length;
+      const flakyTests = this.results.filter((r) => r.flaky === "flaky").length;
+      const failed = filteredResults.filter((r) => r.status === "failed" || r.status === "timedOut").length;
+      const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
+      const templateSource = fs.readFileSync(path2.resolve(__dirname, "report-template.hbs"), "utf-8");
+      const template = Handlebars.compile(templateSource);
+      const logo = this.config.logo;
+      const data = {
+        logo: logo ? path2.resolve(logo) : void 0,
+        totalDuration,
+        suiteName: this.suiteName,
+        results: this.results,
+        retryCount: this.results.filter((r) => r.isRetry).length,
+        passCount: passedTests,
+        failCount: failed,
+        skipCount: this.results.filter((r) => r.status === "skipped").length,
+        flakyCount: flakyTests,
+        totalCount: filteredResults.length,
+        groupedResults: this.groupedResults,
+        projectName: this.config.projectName,
+        authorName: this.config.authorName,
+        testType: this.config.testType,
+        preferredTheme: this.config.preferredTheme,
+        successRate,
+        lastRunDate: formatDate(/* @__PURE__ */ new Date()),
+        projects: this.projectSet
+      };
+      return template(data);
+    } catch (error) {
+      console.error("OrtoniReport:  Error generating HTML:", error);
+      return `<html><body><h1>Report generation failed</h1><pre>${error.stack}</pre></body></html>`;
+    }
+  }
+};
+export {
+  OrtoniReport as default
+};

package/dist/report-template.hbs

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Plawright HTML report by LetCode Koushik - V1.1.6">
-    <title>Playwright Test Report</title>
+    <meta name="description" content="Playwright HTML report by LetCode Koushik - V1.1.7">
+    <title>Ortoni Playwright Test Report</title>
     <link rel="icon" href="node_modules/ortoni-report/dist/icon/32.png" type="image/x-icon">
     <link rel="stylesheet" href="node_modules/ortoni-report/dist/css/main.css">
 </head>
@@ -13,33 +13,28 @@
         #summary, #testDetails, button#back-to-summary {
             transition: opacity 0.2s ease-in-out;
         }
-       .filter.active {
+
+        .filter.active {
             background-color: var(--bulma-background-active);
         }
-
         ::-webkit-scrollbar {
-            width: 0px;
-            background-color: transparent;
+            width: 8px;
+            height: 8px;
         }
 
-        ::-webkit-scrollbar-thumb {
-            background-color: var(--pico-secondary-background);
-            ;
-            border-radius: 0px;
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
         }
 
-        ::-webkit-scrollbar-thumb:hover {
-            background-color: var(--pico-secondary-background);
-            ;
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
         }
 
-        ::-webkit-scrollbar-track {
-            background-color: #f1f1f1;
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
         }
 
-        ::-webkit-scrollbar-corner {
-            background-color: #fff;
-        }
         div#testDetails {
             position: sticky;
             top: 0;
@@ -74,17 +69,27 @@
         details[open] > summary::after {
             transform: rotate(0deg);
         }
+        .logoimage{
+            max-width: 100px;
+        }
 
 </style>
 
 <body>
-    <!-- Header -->
     <section class="section">
         <header class="container">
             <div class="columns is-vcentered">
-                <div class="column is-one-third">
-                    {{!-- Custom Project Name --}}
-                    {{#if projectName}}<h1 class="title">{{projectName}}</h1>{{/if}}
+                <div class="column is-two-fifths">
+                    <div class="columns is-desktop is-vcentered is-multiline">
+                        {{#if logo}}
+                        <div class="column-1">
+                        <figure class="image logoimage">
+                            <img src="{{logo}}" />
+                        </figure>
+                        </div>
+                        {{/if}}
+                        {{#if projectName}}<div class="column"><span class="title">{{projectName}}</span></div>{{/if}}
+                    </div>
                 </div>
                 <div class="column">
                     <div class="control">
@@ -99,12 +104,10 @@
             </div>
         </header>
     </section>
-
-    <!-- Main Content -->
     <section class="section">
         <main class="container">
             <div class="columns">
-                <aside class="column is-one-third sidebar">
+                <aside class="column is-two-fifths">
                     <div class="columns is-mobile">
                         <div class="column">
                             <h2 class="title is-4">Tests</h2>
@@ -120,7 +123,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="content">
+                    <div class="content sidebar">
                         {{#each groupedResults}}
                         <details class="box">
                             <summary class="is-size-5 has-icon-right">
@@ -133,7 +136,7 @@
                             </summary>
                             <ul>
                                 {{#each this}}
-                                <details>
+                                <details class="mt-1">
                                     <summary class="is-size-5 is-capitalized">
                                         <div class="icon-text">
                                             <span class="icon has-text-info">
@@ -144,7 +147,7 @@
                                     </summary>
                                     <ul>
                                         {{#each this}}
-                                        <details>
+                                        <details class="mb-1">
                                             <summary class="is-capitalized is-size-6">{{@key}}</summary>
                                             <ul>
                                                 {{#each this}}
@@ -202,7 +205,7 @@
                         {{/each}}
                     </div>
                 </aside>
-                <section class="column">
+                <section class="column is-three-fifths">
                     {{!-- Overall summary --}}
                     <div id="summary">
                         <div class="columns is-multiline">
@@ -438,13 +441,13 @@
                             <div id="testImage" class="modal">
                                 <div class="modal-background"></div>
                                 <div class="modal-content">
-                                    <p class="image is-16by9">
+                                    <p class="image">
                                         <img src="${test.base64Image ? test.screenshotPath : `file://${test.screenshotPath}`}" alt="Screenshot">
                                     </p>
                                 </div>
                                 <button onclick="closeModal()" class="modal-close is-large" aria-label="close"></button>
                             </div>
-                            <figure class="image">
+                            <figure class="image box">
                                 <img onclick="openModal()" src="${test.base64Image ? test.screenshotPath : `file://${test.screenshotPath}`}" alt="Screenshot">
                             </figure>` : ''}
                         </div>
@@ -634,7 +637,7 @@
                     maintainAspectRatio: false,
                     plugins: {
                         legend: {
-                            position: 'bottom'
+                            position: 'right'
                         }
                     }
                 }
@@ -646,5 +649,4 @@
     </script>
 <script src="node_modules/ortoni-report/dist/utils/modal.js"></script>
 </body>
-
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "test": "npx playwright test",

package/readme.md

@@ -40,6 +40,9 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
    - Easily integrate with Playwright configurations using TypeScript/JavaScript.
    - Configure reporting preferences within your Playwright setup.
 
+10. **Add logo to the report**
+   - Add relative or absolute path of the image to the config
+
 ### Configurable Report Generation
 
 Configure OrtoniReport in your `playwright.config.ts`:
@@ -49,12 +52,13 @@ import { defineConfig } from '@playwright/test';
 import { OrtoniReportConfig } from 'ortoni-report';
 
 const reportConfig: OrtoniReportConfig = {
-    projectName: 'Ortoni',
-    testType: 'Regression',
-    authorName: 'Koushik',
-    preferredTheme: 'light',
-    base64Image: false, // Example configuration
-};
+  logo: "path/logo.png",
+  authorName: "LetCode Koushik",
+  base64Image: false,
+  preferredTheme: "dark",
+  projectName: "Ortoni Demo Report",
+  testType: "Smoke"
+}
 
 export default defineConfig({
     reporter: [['ortoni-report', reportConfig], ['dot']],