ortoni-report 2.0.0 → 2.0.2

package/changelog.md

@@ -1,5 +1,46 @@
 # Change Log:
 
+## Version 2.0.2
+
+#### 🚀 New Features
+
+- **Show or Hide Projects in Test List**
+  - You can now show or hide specific projects in the test list.
+  - ```showProject: true``` from config
+  
+- **Document Title from Config**
+  - The document title is now configurable via the configuration file, allowing you to customize it to your preference.
+
+- **Display Tags in Test Section**
+  - Tags associated with tests are now displayed within the test section, giving you a clearer overview of test categories.
+
+- **Project and Tags Added to Filter**
+  - We've added the ability to filter tests by both project and tags, enhancing the granularity of your test views.
+  
+- **Display Selected Status on UI**
+  - The selected status filter is now visible on the UI, making it easier to track the current filter settings.
+
+#### 🛠 Fixes
+
+- **Project Drop-down Z-Index on Screenshot**
+  - Resolved an issue where the project drop-down menu was being overlapped by screenshots. The z-index has been adjusted for proper layering.
+
+- **Project Filter Hide Test Steps**
+  - Fixed a bug where applying the project filter would inadvertently hide test steps. Test steps are now correctly displayed based on the filter.
+
+#### ✨ Improvements
+
+- **Hide Skipped Tests on All Tests Filter**
+  - Skipped tests are now hidden by default when using the "All Tests" filter, providing a cleaner and more focused view of relevant tests.
+
+- **Colorful Dashboard**
+  - We've enhanced the visual appeal of the dashboard with more vibrant and intuitive colors, making it easier to navigate and interpret results.
+
+
+## Version 2.0.1
+- Fixed local and root path issue of Parcel bundler.
+- Local config issue
+
 ## Version 2.0.0
 - Fixed local and root path issue of Parcel bundler.
 

package/dist/cli/cli.js

@@ -9,6 +9,11 @@ const path_1 = __importDefault(require("path"));
 const commander_1 = require("commander");
 const child_process_1 = require("child_process");
 const utils_1 = require("../utils/utils");
+const findParcelBinary = () => {
+    const localParcel = path_1.default.resolve(__dirname, '../../node_modules/.bin/parcel');
+    const projectParcel = path_1.default.resolve(process.cwd(), 'node_modules/.bin/parcel');
+    return fs_1.default.existsSync(localParcel) ? localParcel : projectParcel;
+};
 commander_1.program
     .name('ortoni-report')
     .description('Ortoni Report by LetCode with Koushik')
@@ -25,7 +30,7 @@ commander_1.program
         process.exit(1);
     }
     // Resolve the path to the local parcel binary
-    const parcelPath = path_1.default.resolve(__dirname, '../../node_modules/.bin/parcel');
+    const parcelPath = findParcelBinary();
     const parcelCommand = `${parcelPath} build ${reportPath} --dist-dir ortoni-report --public-url ./`;
     console.log('Bundling Ortoni Report...');
     (0, child_process_1.exec)(parcelCommand, (error, stdout, stderr) => {

package/dist/css/main.css

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 /* Bulma Utilities */
-@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
 :root {
   --bulma-control-radius: var(--bulma-radius);
   --bulma-control-radius-small: var(--bulma-radius-small);
@@ -5710,7 +5709,7 @@ button.tag:active,
 }
 .select:not(.is-multiple):not(.is-loading)::after {
   inset-inline-end: 1.125em;
-  z-index: 4;
+  z-index: 0;
 }
 .select.is-rounded select {
   border-radius: var(--bulma-radius-rounded);

package/dist/ortoni-report.d.ts

@@ -4,6 +4,16 @@ import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@
  * Configuration options for OrtoniReport.
  */
 interface OrtoniReportConfig {
+    /**
+     * The title of the HTML report.
+     * @example "Ortoni Playwright Test Report"
+     */
+    title?: string;
+    /**
+    * Add project on the list of the tests? (Filtering projects still works if hidden)
+    * @example true to display, false to hide.
+    */
+    showProject?: boolean;
     /**
      * The name of the project.
      * @example "Ortoni Project"
@@ -67,7 +77,7 @@ interface TestResultData {
     logs: string;
     screenshotPath?: string | null | undefined;
     filePath: string;
-    projects: Set<string>;
+    filters: Set<string>;
     tracePath?: string;
     videoPath?: string;
     base64Image: boolean | undefined;

package/dist/ortoni-report.js

@@ -6671,7 +6671,7 @@ var OrtoniReport = class {
           result.stdout.concat(result.stderr).map((log) => log).join("\n")
         ),
         filePath,
-        projects: this.projectSet,
+        filters: this.projectSet,
         base64Image: this.config.base64Image
       };
       this.attachFiles(result, testResult);
@@ -6721,12 +6721,15 @@ var OrtoniReport = class {
       );
       const totalDuration = msToTime(result.duration);
       this.groupResults();
+      import_handlebars.default.registerHelper("joinWithSpace", (array) => array.join(" "));
       import_handlebars.default.registerHelper("json", (context) => safeStringify(context));
       import_handlebars.default.registerHelper(
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
-      const outputFilename = ensureHtmlExtension(this.config.filename || "ortoni-report.html");
+      const outputFilename = ensureHtmlExtension(
+        this.config.filename || "ortoni-report.html"
+      );
       const html = this.generateHTML(filteredResults, totalDuration);
       const outputPath = import_path2.default.resolve(process.cwd(), outputFilename);
       import_fs.default.writeFileSync(outputPath, html);
@@ -6736,14 +6739,24 @@ var OrtoniReport = class {
     }
   }
   groupResults() {
-    this.groupedResults = this.results.reduce((acc, result, index) => {
-      const { filePath, suite, projectName } = result;
-      acc[filePath] = acc[filePath] || {};
-      acc[filePath][suite] = acc[filePath][suite] || {};
-      acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
-      acc[filePath][suite][projectName].push({ ...result, index });
-      return acc;
-    }, {});
+    if (this.config.showProject) {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite, projectName } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || {};
+        acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
+        acc[filePath][suite][projectName].push({ ...result, index });
+        return acc;
+      }, {});
+    } else {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || [];
+        acc[filePath][suite].push({ ...result, index });
+        return acc;
+      }, {});
+    }
   }
   generateHTML(filteredResults, totalDuration) {
     try {
@@ -6762,6 +6775,11 @@ var OrtoniReport = class {
       );
       const template = import_handlebars.default.compile(templateSource);
       const logo = this.config.logo ? import_path2.default.resolve(this.config.logo) : void 0;
+      const allTags = /* @__PURE__ */ new Set();
+      this.results.forEach((result) => {
+        result.suiteTags.forEach((tag) => allTags.add(tag));
+        result.testTags.forEach((tag) => allTags.add(tag));
+      });
       const data = {
         logo,
         totalDuration,
@@ -6780,7 +6798,10 @@ var OrtoniReport = class {
         preferredTheme: this.config.preferredTheme,
         successRate,
         lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-        projects: this.projectSet
+        projects: this.projectSet,
+        allTags: Array.from(allTags),
+        showProject: this.config.showProject || false,
+        title: this.config.title || "Ortoni Playwright Test Report"
       };
       return template(data);
     } catch (error) {

package/dist/ortoni-report.mjs

@@ -6667,7 +6667,7 @@ var OrtoniReport = class {
           result.stdout.concat(result.stderr).map((log) => log).join("\n")
         ),
         filePath,
-        projects: this.projectSet,
+        filters: this.projectSet,
         base64Image: this.config.base64Image
       };
       this.attachFiles(result, testResult);
@@ -6717,12 +6717,15 @@ var OrtoniReport = class {
       );
       const totalDuration = msToTime(result.duration);
       this.groupResults();
+      import_handlebars.default.registerHelper("joinWithSpace", (array) => array.join(" "));
       import_handlebars.default.registerHelper("json", (context) => safeStringify(context));
       import_handlebars.default.registerHelper(
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
-      const outputFilename = ensureHtmlExtension(this.config.filename || "ortoni-report.html");
+      const outputFilename = ensureHtmlExtension(
+        this.config.filename || "ortoni-report.html"
+      );
       const html = this.generateHTML(filteredResults, totalDuration);
       const outputPath = path2.resolve(process.cwd(), outputFilename);
       fs.writeFileSync(outputPath, html);
@@ -6732,14 +6735,24 @@ var OrtoniReport = class {
     }
   }
   groupResults() {
-    this.groupedResults = this.results.reduce((acc, result, index) => {
-      const { filePath, suite, projectName } = result;
-      acc[filePath] = acc[filePath] || {};
-      acc[filePath][suite] = acc[filePath][suite] || {};
-      acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
-      acc[filePath][suite][projectName].push({ ...result, index });
-      return acc;
-    }, {});
+    if (this.config.showProject) {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite, projectName } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || {};
+        acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
+        acc[filePath][suite][projectName].push({ ...result, index });
+        return acc;
+      }, {});
+    } else {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || [];
+        acc[filePath][suite].push({ ...result, index });
+        return acc;
+      }, {});
+    }
   }
   generateHTML(filteredResults, totalDuration) {
     try {
@@ -6758,6 +6771,11 @@ var OrtoniReport = class {
       );
       const template = import_handlebars.default.compile(templateSource);
       const logo = this.config.logo ? path2.resolve(this.config.logo) : void 0;
+      const allTags = /* @__PURE__ */ new Set();
+      this.results.forEach((result) => {
+        result.suiteTags.forEach((tag) => allTags.add(tag));
+        result.testTags.forEach((tag) => allTags.add(tag));
+      });
       const data = {
         logo,
         totalDuration,
@@ -6776,7 +6794,10 @@ var OrtoniReport = class {
         preferredTheme: this.config.preferredTheme,
         successRate,
         lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-        projects: this.projectSet
+        projects: this.projectSet,
+        allTags: Array.from(allTags),
+        showProject: this.config.showProject || false,
+        title: this.config.title || "Ortoni Playwright Test Report"
       };
       return template(data);
     } catch (error) {

package/dist/report-template.hbs

@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="{{preferredTheme}}">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Playwright HTML report by LetCode Koushik - V1.1.7">
-    <title>Ortoni Playwright Test Report</title>
+    <meta name="description" content="Playwright HTML report by LetCode Koushik - V2.0.2">
+    <title>{{title}}</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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
 </head>
 <style>
         #summary, #testDetails, button#back-to-summary {
@@ -15,8 +18,10 @@
         }
 
         .filter.active {
-            background-color: var(--bulma-background-active);
+            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+            font-weight: bold;
         }
+
         ::-webkit-scrollbar {
             width: 8px;
             height: 8px;
@@ -27,7 +32,7 @@
         }
 
         ::-webkit-scrollbar-thumb {
-            background: #888;
+            background: var(--bulma-primary);
             border-radius: 4px;
         }
 
@@ -72,9 +77,18 @@
         .logoimage{
             max-width: 100px;
         }
+        .listselected {
+            border-image: linear-gradient(45deg, var(--bulma-primary),#FF6B6B) 1;
+            font-weight: bold;
+        }
+        .has-background-flaky {
+            background-color: #ffb70f !important;
+        }
+        .has-background-retry {
+            background-color: #69748c !important;
+        }
 
 </style>
-
 <body>
     <section class="section">
         <header class="container">
@@ -95,6 +109,9 @@
                     <div class="control">
                         <input class="input" name="search" type="search" placeholder="Search by test title" />
                     </div>
+                     <div class="control has-text-info">
+                        <span id="selected-filters"></span>
+                    </div>
                 </div>
                 <div class="column is-1">
                     <div class="control">
@@ -108,22 +125,44 @@
         <main class="container">
             <div class="columns">
                 <aside class="column is-two-fifths">
-                    <div class="columns is-mobile">
+                    <div class="columns is-mobile is-vcentered">
                         <div class="column">
                             <h2 class="title is-4">Tests</h2>
                         </div>
                         <div class="column">
-                            <div class="select is-pulled-right">
-                                <select id="project-filter">
-                                    <option value="all">All Projects</option>
+                            <div id="project-filter" class="dropdown is-right is-hoverable is-pulled-right">
+                                <div class="dropdown-trigger">
+                                    <button class="button" aria-haspopup="true" aria-controls="select-filter">
+                                    <span>Filters</span>
+                                    <span class="icon is-small">
+                                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                                    </span>
+                                    </button>
+                                </div>
+                                <div class="dropdown-menu" id="select-filter" role="menu">
+                                    <div class="dropdown-content">
                                     {{#each projects}}
-                                        <option value="{{this}}">{{this}}</option>
+                                        <div class="dropdown-item">
+                                            <label class="checkbox">
+                                                <input type="checkbox" data-filter-type="project" value="{{this}}">{{this}}
+                                            </label>
+                                        </div>
                                     {{/each}}
-                                </select>
-                            </div>
+                                        <hr class="dropdown-divider" />
+                                    {{#each allTags}}
+                                        <div class="dropdown-item">
+                                            <label class="checkbox">
+                                                <input type="checkbox" data-filter-type="test-tags" value="{{this}}">{{this}}
+                                            </label>
+                                        </div>
+                                    {{/each}}
+                                    </div>
+                                </div>
+                            </div>                                
                         </div>
                     </div>
                     <div class="content sidebar">
+                        {{#if showProject}}
                         {{#each groupedResults}}
                         <details class="box">
                             <summary class="is-size-5 has-icon-right">
@@ -134,9 +173,9 @@
                                     <span>{{@key}}</span>
                                 </div>
                             </summary>
-                            <ul>
+                            <ul class="mt-4 mb-4">
                                 {{#each this}}
-                                <details class="mt-1">
+                                <details class="mt-2 mb-2">
                                     <summary class="is-size-5 is-capitalized">
                                         <div class="icon-text">
                                             <span class="icon has-text-info">
@@ -145,14 +184,14 @@
                                             <span>{{@key}}</span>
                                         </div>
                                     </summary>
-                                    <ul>
+                                    <ul class="mt-4 mb-4">
                                         {{#each this}}
-                                        <details class="mb-1">
+                                        <details class="mt-2 mb-2">
                                             <summary class="is-capitalized is-size-6">{{@key}}</summary>
-                                            <ul>
+                                            <ul class="mt-4 mb-4">
                                                 {{#each this}}
-                                                <li class="media" data-suite-name="{{suite}}"
-                                                    data-test-duration="{{duration}}"
+                                                <li class="media {{#if (eq status 'skipped')}}is-hidden{{/if}}" data-suite-name="{{suite}}"
+                                                    data-test-duration="{{duration}}" data-test-tags="{{joinWithSpace testTags}}" 
                                                     data-project-name="{{projectName}}" data-test-id="{{index}}"
                                                     data-test-status="{{status}} {{retry}}">
                                                     <div class="icon-text">
@@ -200,6 +239,77 @@
                             </ul>
                         </details>
                         {{/each}}
+                        {{else}}
+                        {{#each groupedResults}}
+                        <details class="box">
+                            <summary class="is-size-5 has-icon-right">
+                                <div class="icon-text">
+                                    <span class="icon has-text-info">
+                                    <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/file.png" alt="file name">
+                                    </span>
+                                    <span>{{@key}}</span>
+                                </div>
+                            </summary>
+                            <ul class="mt-4 mb-4">
+                                {{#each this}}
+                                <details class="mt-2 mb-2">
+                                    <summary class="is-size-5 is-capitalized">
+                                        <div class="icon-text">
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/test.png" alt="test name">
+                                            </span>
+                                            <span>{{@key}}</span>
+                                        </div>
+                                    </summary>
+                                    <ul class="mt-4 mb-4">
+                                    {{#each this}}
+                                    <li class="media {{#if (eq status 'skipped')}}is-hidden{{/if}}" data-suite-name="{{suite}}"
+                                        data-test-duration="{{duration}}" data-test-tags="{{joinWithSpace testTags}}" 
+                                        data-project-name="{{projectName}}" data-test-id="{{index}}"
+                                        data-test-status="{{status}} {{retry}}">
+                                        <div class="icon-text">
+                                            {{#if isRetry}}
+                                            <span class="icon has-text-info">
+                                                <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/retry.png"
+                                                    alt="Retry"></span>
+                                            {{/if}}
+                                            {{#if (eq status "passed")}}
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/pass.png"
+                                                alt="Pass"></span>
+                                            {{/if}}
+                                            {{#if (eq status "failed")}}
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/fail.png"
+                                                alt="Fail"></span>
+                                            {{else}}
+                                            {{#if (eq status "skipped")}}
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/skip.png"
+                                                alt="Skip"></span>
+                                            {{/if}}
+                                            {{/if}}
+                                            {{#if (eq status "timedOut")}}
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/timeout.png"
+                                                alt="timedOut"></span>
+                                            {{/if}}
+                                            {{#if (eq status "flaky")}}
+                                            <span class="icon has-text-info">
+                                            <img class="image is-16x16" src="node_modules/ortoni-report/dist/icon/flaky.png"
+                                                alt="flaky"></span>
+                                            {{/if}}
+                                            <span>{{title}}</span>
+                                        </div>
+                                    </li>
+                                    {{/each}} 
+                                    </ul>   
+                                </details>
+                                {{/each}}
+                            </ul>
+                        </details>
+                        {{/each}}
+                        {{/if}}
                     </div>
                 </aside>
                 <section class="column is-three-fifths">
@@ -207,37 +317,52 @@
                     <div id="summary">
                         <div class="columns is-multiline">
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="all">
+                                <div class="card is-clickable has-background-primary filter" data-status="all">
                                     <header class="card-header has-text-centered">
-                                        <p class="card-header-title">All Tests</p>
+                                        <p class="card-header-title has-text-white">All Tests</p>
+                                        <button class="card-header-icon" aria-label="more options">
+                                            <span class="icon">
+                                                <img aria-hidden="true" class="image is-16x16" src="node_modules/ortoni-report/dist/icon/test.png" alt="test name">
+                                            </span>
+                                        </button>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-primary">{{totalCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{totalCount}}</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="passed">
+                                <div class="card is-clickable has-background-success filter" data-status="passed">
                                     <header class="card-header has-text-centered">
-                                        <p class="card-header-title">Passed</p>
+                                        <p class="card-header-title has-text-white">Passed</p>
+                                        <button class="card-header-icon" aria-label="more options">
+                                            <span class="icon">
+                                                <img aria-hidden="true" class="image is-16x16" src="node_modules/ortoni-report/dist/icon/pass.png" alt="test name">
+                                            </span>
+                                        </button>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-success">{{passCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{passCount}}</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="failed">
+                                <div class="card is-clickable has-background-danger filter" data-status="failed">
                                     <header class="card-header">
-                                        <p class="card-header-title has-text-centered">Failed</p>
+                                        <p class="card-header-title has-text-white has-text-centered">Failed</p>
+                                        <button class="card-header-icon" aria-label="more options">
+                                            <span class="icon">
+                                                <img aria-hidden="true" class="image is-16x16" src="node_modules/ortoni-report/dist/icon/fail.png" alt="test name">
+                                            </span>
+                                        </button>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-danger">{{failCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{failCount}}</p>
                                         </div>
                                     </div>
                                 </div>
@@ -245,37 +370,37 @@
                         </div>
                         <div class="columns is-multiline">
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="skipped">
+                                <div class="card is-clickable has-background-info filter" data-status="skipped">
                                     <header class="card-header has-text-centered">
-                                        <p class="card-header-title">Skipped</p>
+                                        <p class="card-header-title has-text-white">Skipped</p>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-info">{{skipCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{skipCount}}</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="flaky">
+                                <div class="card is-clickable has-background-warning filter" data-status="flaky">
                                     <header class="card-header has-text-centered">
-                                        <p class="card-header-title">Flaky</p>
+                                        <p class="card-header-title has-text-white">Flaky</p>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-warning">{{flakyCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{flakyCount}}</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <div class="column is-one-third">
-                                <div class="card is-clickable filter" data-status="retry">
+                                <div class="card is-clickable has-background-retry filter" data-status="retry">
                                     <header class="card-header has-text-centered">
-                                        <p class="card-header-title">Retry</p>
+                                        <p class="card-header-title has-text-white">Retry</p>
                                         </header>
                                         <div class="card-content">
                                             <div class="content">
-                                            <p class="has-text-centered has-text-info">{{retryCount}}</p>
+                                            <p class="has-text-centered has-text-white">{{retryCount}}</p>
                                         </div>
                                     </div>
                                 </div>
@@ -304,7 +429,6 @@
                     <div id="testDetails" style="display: none;">
                         <!-- Back button should be outside the dynamic content -->
                         <button class="button content" id="back-to-summary"onclick="showSummary()">Back to Summary</button>
-                        <div class="tags" id="attachTags"></div>
                         <!-- Test Details will be displayed here -->
                     </div>
                 </section>
@@ -313,8 +437,6 @@
     </section>
     <script src="node_modules/ortoni-report/dist/utils/chart.js"></script>
     <script>
-        
-
         function escapeHtml(unsafe) {
             return unsafe.replace(/[&<"']/g, function (match) {
                 const escapeMap = {
@@ -327,7 +449,6 @@
                 return escapeMap[match];
             });
         }
-
         document.addEventListener('DOMContentLoaded', () => {
             const testData = {{{ json results }}};
             const testDetails = document.getElementById('testDetails');
@@ -368,19 +489,7 @@
                 testDetails.style.display = 'none';
                 backButton.style.display = 'none';
             }
-
             window.showSummary = showSummary;
-
-            function attachTags(testTags){
-                const tags = document.querySelector("#attachTags");
-                    testTags.forEach(tag => {
-                        const tagElement = document.createElement('span');
-                        tagElement.className = 'tag is-info';
-                        tagElement.textContent = tag;
-                        tags.appendChild(tagElement);
-                    });
-            }
-
             function displayTestDetails(test) {
                 const summary = document.getElementById('summary');
                 const testDetails = document.getElementById('testDetails');
@@ -418,7 +527,20 @@
                             ${test.duration.length > 0 ? `
                             <h4 class="title is-4">Duration</h4>
                             <p class="${statusClass}">${test.duration}</p>` : ""}
-                            <div class="tags" id="attachTags"></div>
+                            ${test.projectName.length > 0 ? `
+                            <div class="control">
+                                <div class="tags has-addons">
+                                <span class="tag is-dark">Project</span>
+                                <span class="tag is-info is-capitalized">${test.projectName}</span>
+                                </div>
+                            </div>`: ""}
+                            ${test.testTags.length > 0 ? `
+                            <div class="control mt-4">
+                                <div class="tags has-addons">
+                                <span class="tag is-dark">Test Tags</span>
+                                <span class="tag is-info">${test.testTags.join(" ")}</span>
+                                </div>
+                            </div>`: ""}
                             ${test.videoPath ? `
                             <div id="testVideo" class="modal">
                                 <div class="modal-background"></div>
@@ -432,7 +554,7 @@
                                     </div>
                                 <button onclick="closeVideo()" class="modal-close is-large" aria-label="close"></button>
                             </div>
-                            <button class="button" onclick="openVideo()">Attachment: Video</button>
+                            <button class="button mt-4" onclick="openVideo()">Attachment: Video</button>
                             `:''}
                         </div>
                         <div class="column content">
@@ -484,7 +606,6 @@
                     }
                     stepDetailsDiv.appendChild(stepsList);
                 }
-                attachTags(test.testTags);
             }
 
             function attachSteps(test) {
@@ -534,15 +655,20 @@
             }});
 
             function attachEventListeners() {
+                const checkboxes = document.querySelectorAll('#select-filter input[type="checkbox"]');
+                checkboxes.forEach(checkbox => {
+                    checkbox.addEventListener('change', applyFilters);
+                });
                 const testItems = document.querySelectorAll('[data-test-id]');
                 testItems.forEach(item => {
                     item.addEventListener('click', () => {
+                        testItems.forEach(i => i.classList.remove('listselected'));
+                        item.classList.add('listselected');
                         const testId = item.getAttribute('data-test-id');
                         const test = testData[testId];
                         displayTestDetails(test);
                     });
                 });
-
                 const filters = document.querySelectorAll('.filter');
                 filters.forEach(filter => {
                     filter.addEventListener('click', () => {
@@ -556,34 +682,39 @@
                         applyFilters();
                     });
                 });
-
-                const projectFilter = document.getElementById('project-filter');
-                projectFilter.addEventListener('change', () => {
-                    applyFilters();
-                });
             }
 
             function applyFilters() {
-                const selectedProject = document.getElementById('project-filter').value;
+                const selectedCheckboxes = document.querySelectorAll('#select-filter input[type="checkbox"]:checked');
                 const activeFilter = document.querySelector('.filter.active');
                 const selectedStatus = activeFilter ? activeFilter.getAttribute('data-status') : 'all';
-
-                const testItems = document.querySelectorAll('li[data-test-id]');
-                const detailsElements = document.querySelectorAll('details');
-
+                const selectedProjects = [];
+                const selectedTags = [];
+                selectedCheckboxes.forEach(checkbox => {
+                    if (checkbox.getAttribute('data-filter-type') === 'project') {
+                        selectedProjects.push(checkbox.value.trim());
+                    } else {
+                        selectedTags.push(checkbox.value.trim());
+                    }
+                });
+                const detailsElements = document.querySelectorAll('.sidebar details');
                 detailsElements.forEach(details => {
                     let shouldShowDetails = false;
                     const items = details.querySelectorAll('li[data-test-id]');
                     items.forEach(item => {
+                        const testTags = item.getAttribute('data-test-tags').trim().split(' ').filter(Boolean);
                         const projectName = item.getAttribute('data-project-name').trim();
                         const testStatus = item.getAttribute('data-test-status').trim();
-                        const matchesProject = (selectedProject === 'all' || projectName === selectedProject);
-                        const matchesStatus = (selectedStatus === 'all' || testStatus.includes(selectedStatus) ||
-                            (selectedStatus === 'failed' && (testStatus === 'failed' || testStatus === 'timedOut')) ||
-                            (selectedStatus === 'retry' && testStatus.includes('retry')) ||
-                            (selectedStatus === 'flaky' && testStatus.includes('flaky')));
-
-                        if (matchesProject && matchesStatus) {
+                        const matchesProject = selectedProjects.length === 0 || selectedProjects.includes(projectName);
+                        const matchesTags = selectedTags.length === 0 || selectedTags.every(tag => testTags.includes(tag));
+                        const matchesStatus = (selectedStatus === 'all' && testStatus !== 'skipped') ||
+                            (selectedStatus !== 'all' && (
+                                testStatus.includes(selectedStatus) ||
+                                (selectedStatus === 'failed' && (testStatus === 'failed' || testStatus === 'timedOut')) ||
+                                (selectedStatus === 'retry' && testStatus.includes('retry')) ||
+                                (selectedStatus === 'flaky' && testStatus.includes('flaky'))
+                            ));
+                        if (matchesProject && matchesTags && matchesStatus) {
                             item.classList.remove('is-hidden');
                             shouldShowDetails = true;
                         } else {
@@ -593,8 +724,27 @@
                     details.open = shouldShowDetails;
                     details.classList.toggle('is-hidden', !shouldShowDetails);
                 });
+                updateSelectedFiltersDisplay(selectedProjects, selectedTags, selectedStatus);
             }
+            
+            function updateSelectedFiltersDisplay(projects, tags, status) {
+                const filtersDisplay = document.getElementById('selected-filters');
+                filtersDisplay.innerHTML = '';
 
+                if (projects.length > 0) {
+                    filtersDisplay.innerHTML += `<span> Projects: ${projects.join(', ')}</span>`;
+                }
+                if (tags.length > 0) {
+                    filtersDisplay.innerHTML += `<span> Tags: ${tags.join(', ')}</span>`;
+                }
+                if (status !== 'all') {
+                    filtersDisplay.innerHTML += `<span> Status: ${status}</span>`;
+                }
+
+                if (filtersDisplay.innerHTML === '') {
+                    filtersDisplay.innerHTML = '<span>All Tests</span>';
+                }
+            }
             const searchInput = document.querySelector('input[name="search"]');
             const detailsElements = document.querySelectorAll('details');
             function filterTests(search){
@@ -652,7 +802,7 @@
                     labels: ['Passed', 'Failed', 'Skipped','Flaky'],
                     datasets: [{
                         data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}, {{flakyCount}}],
-                        backgroundColor: ['#28a745', '#dc3545', '#d5d4a1', '#FFB704']
+                        backgroundColor: ['#28a745', '#ff6685', '#66d1ff', '#ffb70f']
                         }]
                     },
                 options: {
@@ -660,7 +810,7 @@
                     maintainAspectRatio: false,
                     plugins: {
                         legend: {
-                            position: 'right'
+                           display: false
                         }
                     }
                 }
@@ -668,7 +818,6 @@
 
             attachEventListeners();
         });
-
     </script>
 </body>
 </html>

package/dist/utils/utils.js

@@ -44,7 +44,6 @@ function formatDate(date) {
     return `${day}-${month}-${year} ${time}`;
 }
 exports.formatDate = formatDate;
-;
 function safeStringify(obj, indent = 2) {
     const cache = new Set();
     const json = JSON.stringify(obj, (key, value) => {
@@ -68,4 +67,3 @@ function ensureHtmlExtension(filename) {
     return `${filename}.html`;
 }
 exports.ensureHtmlExtension = ensureHtmlExtension;
-;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Playwright Report By LetCode with Koushik",
   "bin": {
     "ortoni-report": "./dist/cli/cli.js"
@@ -40,10 +40,10 @@
     "@playwright/test": "^1.44.1",
     "@types/node": "^22.0.2",
     "colors": "^1.4.0",
+    "commander": "^12.1.0",
     "handlebars": "^4.7.8",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
-    "commander": "^12.1.0"
+    "typescript": "^4.9.4"
   },
   "dependencies": {
     "parcel": "^2.12.0"
@@ -51,4 +51,4 @@
   "main": "dist/ortoni-report.js",
   "module": "dist/ortoni-report.mjs",
   "types": "dist/ortoni-report.d.ts"
-}
+}

package/readme.md

@@ -1,10 +1,14 @@
-# Playwright Report by Koushik
+Here's an improved version of the README file that incorporates the recent changes:
 
-Welcome to Ortoni Report (Playwright report - unofficial), a robust HTML report generator tailored for Playwright tests. Ortoni Report introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
+---
+
+# Ortoni Report (Unofficial Playwright Report) by Koushik
+
+Welcome to **Ortoni Report**, a robust HTML report generator tailored for Playwright tests. Ortoni Report introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
 
 Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 
-![alt text](Ortoni-Report.png)
+![Ortoni Report Preview](Ortoni-Report.png)
 
 ## Key Features
 
@@ -15,7 +19,7 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
    - Each suite includes categorized tests under respective projects, providing clear organization.
 
 3. **Comprehensive Test Details**
-   - Display test status (passed, failed, skipped), duration, errors, logs, and screenshots.
+   - Display test status (passed, failed, skipped), duration, tags, errors, logs, and screenshots.
    - Sort and filter tests by suite, project, and script for detailed insights.
 
 4. **Summary Statistics**
@@ -31,8 +35,8 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 
 7. **Customization and Themes**
    - Customize project details, author name, test types, and toggle between dark/light themes.
-   - Option to choose between Base64 images or file path for screenshots.
-   - User can set the report file name
+   - Option to choose between Base64 images or file paths for screenshots.
+   - Users can set the report file name.
 
 8. **Responsive Design**
    - Optimized layout that adapts seamlessly to different screen sizes for accessibility.
@@ -40,17 +44,28 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 9. **Integration and Configuration**
    - 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.
 
-11. **Share report**
-      - Generat the report and zip the folder and share.   
+10. **Add Logo to the Report**
+    - Add a relative or absolute path of the image to the config.
+
+11. **Share Report**
+    - Generate the report, zip the folder, and share it.
+
+12. **Advanced Filtering**
+    - Filter tests by project, tags, and status simultaneously, with the ability to display only those tests matching the selected criteria.
+
+13. **Colorful Dashboard**
+    - Enhanced the visual appeal of the dashboard with vibrant and intuitive colors.
 
+14. **Display Selected Status on UI**
+    - The selected status filter is now visible on the UI, making it easier to track the current filter settings.
 
-### How to Use ortoni-report
+15. **Hide Skipped Tests by Default**
+    - Skipped tests are now hidden by default when using the "All Tests" filter, providing a cleaner and more focused view of relevant tests.
 
-### Installation
+### How to Use Ortoni Report
+
+#### Installation
 
 1. **Install the ortoni-report package**:
 
@@ -58,9 +73,9 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
     npm install -g ortoni-report
     ```
 
-### Generate and Bundle HTML Report
+#### Generate and Bundle HTML Report
 
-2. **Generate and bundle the report** (Optional):
+2. **Generate and bundle the report**:
 
     ```sh
     npx ortoni-report gr -f ortoni-report.html
@@ -69,7 +84,7 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 ### Command Overview
 
 - `npx ortoni-report gr -f <filename>`: Bundle the specified report file.
-  - `-f, --filename <filename>`: Specify the filename for the generated report (default: `ortoni-report.html`).   
+  - `-f, --filename <filename>`: Specify the filename for the generated report (default: `ortoni-report.html`).
 
 ### Configurable Report Generation
 
@@ -80,13 +95,15 @@ import { defineConfig } from '@playwright/test';
 import { OrtoniReportConfig } from 'ortoni-report';
 
 const reportConfig: OrtoniReportConfig = {
-  filename:"myawesomereport.html",
-  logo: "path/logo.png",
+  base64Image: true,
+  logo: "logo.png",
+  title: "Playwight Sample Project",
+  showProject: true,
+  filename: "result",
   authorName: "LetCode Koushik",
-  base64Image: false,
-  preferredTheme: "dark",
-  projectName: "Ortoni Demo Report",
-  testType: "Smoke"
+  preferredTheme: "light",
+  projectName: "Ortoni Report Demo",
+  testType: "V2.0.2 - Build"
 }
 
 export default defineConfig({
@@ -96,30 +113,25 @@ export default defineConfig({
 ```
 
 ### Common Issue
+
 ```
 Error: Command failed:
 @parcel/namer-default: Target "main" declares an     
 output file path of "index.js" which does not match  
 the compiled bundle type "html".
 ```
-Solution:
-Remove "main" in the ```package.json``` file
 
-### Comprehensive Test Details
+**Solution**: Remove `"main"` in the `package.json` file.
 
-- **Rich Test Information:** Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot.
-- **Color-coded Status:** Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
-
-### Handlebars Template Integration
+### Comprehensive Test Details
 
-- **Customizable Reports:** HTML reports are generated using Handlebars templates, offering flexibility in customization and styling.
-- **JSON Helper:** Includes a custom Handlebars helper for managing complex data structures.
+- **Rich Test Information**: Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot.
+- **Color-coded Status**: Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
 
 ### Future Plans
 
-- **Enhanced Customization:** Additional options for customizing report appearance and structure.
-- **CI/CD Integration:** Improved support for CI/CD environments.
-- **Advanced Filtering:** Expanded filtering capabilities to focus on specific test subsets.
+- **Enhanced Customization**: Additional options for customizing report appearance and structure.
+- **CI/CD Integration**: Improved support for CI/CD environments.
 
 ### Change Logs
 
@@ -133,10 +145,10 @@ View the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.m
 
 We value your feedback and contributions! For issues, suggestions, or contributions, visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
 
-Thank you for choosing OrtoniReport. We're committed to enhancing your Playwright testing experience.
+Thank you for choosing Ortoni Report. We're committed to enhancing your Playwright testing experience.
 
 ---
 
 **LetCode with Koushik**
 
----
+---