ortoni-report 2.0.5 → 2.0.6

package/changelog.md

@@ -1,5 +1,19 @@
 # Change Log:
 
+
+## v2.0.6
+
+#### 🐛 Fixes
+- **Trace Path in Pipeline**: Resolved issue with incorrect trace file path in CI/CD pipeline, ensuring trace paths are properly resolved.
+
+#### 👌 Improvements
+- **Search Functionality**:
+  - **Removed from Navbar**: Search functionality has been removed from the navbar to enhance navigation simplicity.
+  - **Added to Test Panel**: Search functionality has been relocated to the test panel for more intuitive test filtering.
+
+- **UI Enhancements**:
+  - Updated the overall UI with gradient color status indicators, making test status visuals more vibrant and user-friendly.
+
 ## v2.0.5
 
 ### 🚀 New Features

package/dist/ortoni-report.js

@@ -29209,13 +29209,14 @@ var HTMLGenerator = class {
     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);
+    import_handlebars.default.registerHelper("includes", (actualStatus, expectedStatus) => actualStatus.includes(expectedStatus));
     import_handlebars.default.registerHelper("gr", (count) => count > 0);
     import_handlebars.default.registerHelper("or", function(a, b) {
       return a || b;
     });
   }
   registerPartials() {
-    ["navbar", "testStatus", "testPanel", "summaryCard", "userInfo", "project"].forEach((partialName) => {
+    ["navbar", "testPanel", "summaryCard", "userInfo", "project", "testStatus", "testIcons"].forEach((partialName) => {
       import_handlebars.default.registerPartial(partialName, import_fs2.default.readFileSync(
         import_path3.default.resolve(__dirname, "views", `${partialName}.hbs`),
         "utf-8"

package/dist/ortoni-report.mjs

@@ -29202,13 +29202,14 @@ var HTMLGenerator = class {
     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);
+    import_handlebars.default.registerHelper("includes", (actualStatus, expectedStatus) => actualStatus.includes(expectedStatus));
     import_handlebars.default.registerHelper("gr", (count) => count > 0);
     import_handlebars.default.registerHelper("or", function(a, b) {
       return a || b;
     });
   }
   registerPartials() {
-    ["navbar", "testStatus", "testPanel", "summaryCard", "userInfo", "project"].forEach((partialName) => {
+    ["navbar", "testPanel", "summaryCard", "userInfo", "project", "testStatus", "testIcons"].forEach((partialName) => {
       import_handlebars.default.registerPartial(partialName, fs2.readFileSync(
         path3.resolve(__dirname, "views", `${partialName}.hbs`),
         "utf-8"

package/dist/style/main.css

@@ -33,50 +33,11 @@
         background: #555;
     }
 
-    div#testDetails {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .sidebar {
-        overflow-y: auto;
-        max-height: calc(100vh - 100px);
-    }
-
-    aside li {
-        cursor: pointer;
-    }
-
-    details summary {
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    details summary::after {
-        content: '';
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-        transform: rotate(-90deg);
-        background-size: 1em;
-        background-repeat: no-repeat;
-        background-position: right-center;
-        width: 1em;
-        height: 1em;
-        transition: transform 0.2s ease-in-out;
-    }
-
-    details[open]>summary::after {
-        transform: rotate(0deg);
-    }
-
     .logoimage {
         max-width: 100px;
     }
 
     .listselected {
-        border-image: linear-gradient(45deg, var(--bulma-primary), #FF6B6B) 1;
         font-weight: bold;
     }
 
@@ -97,7 +58,7 @@
     .sticky-header {
         position: sticky;
         top: 0;
-        z-index: 100;
+        z-index: 10;
     }
 
     .video-preview {
@@ -125,4 +86,9 @@
     .status-icon {
         font-size: 1.5rem;
         margin-right: 0.5rem;
+    }
+    .content-wrapper {
+        max-height: 60vh; /* Adjust height as needed */
+        overflow-y: auto;
+        padding: 0.5rem;
     }

package/dist/views/main.hbs

@@ -3,7 +3,7 @@
 <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 - V2.0.5">
+    <meta name="description" content="Playwright HTML report by LetCode Koushik - V2.0.6">
     <title>{{title}}</title>
     <link rel="icon" href="https://raw.githubusercontent.com/ortoniKC/ortoni-report/refs/heads/main/favicon.png"
         type="image/x-icon">
@@ -16,7 +16,7 @@
 </style>
 <body>
     {{> navbar }}
-    <section class="section">
+    <section class="section mt-6">
         <main class="container">
             <div class="columns">
                 <aside class="column is-two-fifths">
@@ -143,7 +143,7 @@
                 testDetails.innerHTML = `
                     <div class="sticky-header">
                         <div class="card mb-3">
-                         <button class="button is-info is-light mb-3" id="back-to-summary" onclick="showSummary()">
+                         <button class="button is-primary mb-3" id="back-to-summary" onclick="showSummary()">
                             <span class="icon"><i class="fa fa-chevron-left" style="color: #63E6BE;"></i></span>
                             <span>Back to Summary</span>
                         </button>
@@ -237,12 +237,15 @@
                             </div>
                             ${test.tracePath ? `
                             <div class="columns is-centered">
-                                <div class="column is-3">
-                                    <a href="trace/index.html?trace=http://localhost:${test.port}/${test.tracePath}" target="_blank" class="button is-link is-fullwidth mt-3">
-                                    <span class="icon"><i class="fa-solid fa-tv" style="color: #FFD43B;"></i></span>
-                                    <span class="has-text-white pl-2">View Trace</span>
-                                    </a>
-                                </div>
+                               <div class="column is-3">
+                                    <button
+                                        data-trace="${test.tracePath}"
+                                        onclick="openTraceViewer(this)"
+                                        class="button is-link is-fullwidth mt-3">
+                                        <span class="icon"><i class="fa-solid fa-tv" style="color: #FFD43B;"></i></span>
+                                        <span class="has-text-white pl-2">View Trace</span>
+                                    </button>
+                                    </div>
                             </div>
                             ` : ''}
                         </div>
@@ -379,12 +382,23 @@
             window.openVideo = openVideo;
             window.closeVideo = closeVideo;
             window.closeModal = closeModal;
+            window.openTraceViewer = openTraceViewer;
 
             document.addEventListener('keydown', (event) => {
                 if (event.key === "Escape") {
                     closeModal();
                 }
             });
+            function openTraceViewer(button) {
+                const tracePath = button.getAttribute("data-trace");
+                try {
+                    if (tracePath) {
+                    const baseUrl = window.location.origin;
+                    const traceViewerUrl = `${baseUrl}/trace/index.html?trace=${baseUrl}/${tracePath}`;
+                    window.open(traceViewerUrl, "_blank");
+                    } 
+                } catch (error) { }
+            }
 
             function attachEventListeners() {
                 const checkboxes = document.querySelectorAll('#select-filter input[type="checkbox"]');
@@ -432,7 +446,7 @@
                 const detailsElements = document.querySelectorAll('.sidebar details');
                 detailsElements.forEach(details => {
                     let shouldShowDetails = false;
-                    const items = details.querySelectorAll('li[data-test-id]');
+                    const items = details.querySelectorAll('div[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();
@@ -491,7 +505,7 @@
                     testItems.forEach(item => {
                         const testTitle = item.textContent.toLowerCase();
                         if (testTitle.includes(searchTerm)) {
-                            item.style.display = 'block'; // Show matching test item
+                            item.style.display = 'flex'; // Show matching test item
 
                             let parent = item.parentElement;
                             while (parent && parent.tagName !== 'ASIDE') {
@@ -506,7 +520,7 @@
                     });
                 } else {
                     testItems.forEach(item => {
-                        item.style.display = 'block';
+                        item.style.display = 'flex';
                     });
                     detailsElements.forEach(detail => {
                         detail.open = false;

package/dist/views/navbar.hbs

@@ -1,4 +1,4 @@
-<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+<nav class="navbar is-primary is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
         <a class="navbar-item">
             {{#if logo}}
@@ -16,16 +16,6 @@
     </div>
     <div class="navbar-menu">
         <div class="navbar-end">
-            <div class="navbar-item">
-                <span id="selected-filters"></span>
-            </div>
-            <div class="navbar-item">
-                <div class="field">
-                    <p class="control">
-                        <input class="input" name="search" type="search" placeholder="Search by test">
-                    </p>
-                </div>
-            </div>
             <div class="navbar-item">
                 <button id="toggle-theme" class="" data-theme-status="{{preferredTheme}}">
                     <span class="icon">

package/dist/views/project.hbs

@@ -1,131 +1,239 @@
+<style>
+    :root {
+        --primary-gradient: linear-gradient(135deg, #3a6b6e 0%, #274754 100%);
+        --flaky-gradient: linear-gradient(135deg, #ffb70f 0%, #ffd65a 100%);
+        --retry-gradient: linear-gradient(135deg, #94a3b8 0%, #c0cad9 100%);
+        --skip-gradient: linear-gradient(135deg, #66d1ff 0%, #99e1ff 100%);
+        --success-gradient: linear-gradient(135deg, #34d399 0%, #059669 100%);
+        --error-gradient: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
+        --glass-bg: rgba(255, 255, 255, 0.7);
+        --glass-border: rgba(255, 255, 255, 0.1);
+        --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    .sidebar {
+        height: 100%;
+        overflow-y: auto;
+        max-height: calc(100vh - 100px);
+        padding: 0px 10px 0px 0px;
+    }
+
+    .test-group {
+        margin-bottom: 0.5rem;
+        border-radius: 8px;
+        transition: all 0.2s ease;
+    }
+
+    .test-group summary {
+        padding: 0.5rem;
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        border-radius: 8px;
+        background: var(--primary-gradient);
+        color: white;
+    }
+
+    .test-suite {
+        margin: 0.35rem;
+        border-radius: 6px;
+    }
+
+    .test-suite summary {
+        padding: 0.35rem 0.5rem;
+        color: inherit;
+        background: transparent;
+        transition: background-color 0.2s ease;
+    }
+
+    .test-case {
+        margin: 0.35rem;
+        border-radius: 6px;
+    }
+
+    .test-case summary {
+        padding: 0.35rem 0.5rem;
+        color: inherit;
+        background: transparent;
+        transition: background-color 0.2s ease;
+    }
+
+    .test-item {
+        padding: 0.4rem 0.5rem;
+        margin: 0.35rem;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+    }
+
+    .test-item span {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        max-width: 35ch;
+    }
+
+    .status-passed {
+        background: var(--success-gradient);
+        color: white;
+    }
+
+    .status-skipped {
+        background: var(--skip-gradient);
+        color: white;
+    }
+
+    .status-failed {
+        background: var(--error-gradient);
+        color: white;
+    }
+
+    .status-flaky {
+        background: var(--flaky-gradient);
+        color: white;
+    }
+
+    .icon-chevron {
+        transition: transform 0.2s ease;
+        width: 16px;
+        height: 16px;
+    }
+
+    details[open]>summary .icon-chevron {
+        transform: rotate(90deg);
+    }
+
+    .duration-tag {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 1rem;
+        margin-left: auto;
+        opacity: 0.8;
+    }
+
+    @keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateX(-5px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    details[open]>.test-content {
+        animation: slideIn 0.2s ease-out;
+    }
+</style>
 <div class="content sidebar">
     {{#if showProject}}
     {{#each groupedResults}}
-    <details class="box">
-        <summary class="is-size-5 has-icon-right">
+    <details class="test-group">
+        <summary class="is-size-5">
             <div class="icon-text">
-                <span class="icon has-text-info">
-                    <svg class="image is-16x16" height="512" viewBox="0 0 32 32" width="512"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <g data-name="Layer 2">
-                            <path
-                                d="M11.612 30.945a3.986 3.986 0 01-2.829-1.17l-5.209-5.208a4.006 4.006 0 010-5.657l3.955-3.954a1 1 0 011.414 1.414l-3.955 3.954a2.003 2.003 0 000 2.829l5.21 5.208a2.004 2.004 0 002.828 0l7.235-7.234a2.003 2.003 0 000-2.828l-4.63-4.63a1 1 0 011.414-1.414l4.63 4.63a4.006 4.006 0 010 5.657l-7.235 7.233a3.988 3.988 0 01-2.828 1.17z"
-                                fill="#232323" />
-                            <path
-                                d="M15.662 20.038a.997.997 0 01-.707-.293l-4.63-4.63a4.006 4.006 0 010-5.656l7.235-7.234a4.004 4.004 0 015.657 0l5.209 5.208a4.006 4.006 0 010 5.657l-3.955 3.954a1 1 0 01-1.414-1.414l3.955-3.954a2.003 2.003 0 000-2.829l-5.21-5.208a2.002 2.002 0 00-2.828 0l-7.235 7.234a2.003 2.003 0 000 2.828l4.63 4.63a1 1 0 01-.707 1.707z"
-                                fill="#7fbde7" />
-                        </g>
+                <span class="icon">
+                    <svg class="icon-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="9 18 15 12 9 6" />
                     </svg>
                 </span>
                 <span>{{@key}}</span>
             </div>
         </summary>
-        <ul class="mt-4 mb-4">
+        <div class="test-content">
             {{#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">
-                            <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                <path
-                                    d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
-                                    fill="#e6e9ed" />
+            <details class="test-suite">
+                <summary class="is-size-6 is-capitalized">
+                    <span class="icon is-small">
+                        <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path
+                                d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
+                                fill="#e6e9ed" />
+                            <path
+                                d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
+                                fill="#ccd1d9" />
+                            <path
+                                d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
+                                fill="#a0d468" />
+                            <g fill="#434a54">
                                 <path
-                                    d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
-                                    fill="#ccd1d9" />
+                                    d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
+                            </g>
+                        </svg>
+                    </span>
+                    <span>{{@key}}</span>
+                </summary>
+                {{#each this}}
+                <details class="test-case">
+                    <summary>
+                        <span class="icon is-small">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <path
-                                    d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
-                                    fill="#a0d468" />
-                                <g fill="#434a54">
-                                    <path
-                                        d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
-                                </g>
+                                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
                             </svg>
                         </span>
-                        <span>{{@key}}</span>
-                    </div>
-                </summary>
-                <ul class="mt-4 mb-4">
+                        <span class="is-size-6">{{@key}}</span>
+                    </summary>
                     {{#each this}}
-                    <details class="mt-2 mb-2">
-                        <summary class="is-capitalized is-size-6">{{@key}}</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}}">
-                                {{> testStatus}}
-                            </li>
-                            {{/each}}
-                        </ul>
-                    </details>
+                    {{> testStatus}}
                     {{/each}}
-                </ul>
+                </details>
+                {{/each}}
             </details>
             {{/each}}
-        </ul>
+        </div>
     </details>
     {{/each}}
     {{else}}
     {{#each groupedResults}}
-    <details class="box">
-        <summary class="is-size-5 has-icon-right">
+    <details class="test-group">
+        <summary class="is-size-5">
             <div class="icon-text">
-                <span class="icon has-text-info">
-                    <svg class="image is-16x16" height="512" viewBox="0 0 32 32" width="512"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <g data-name="Layer 2">
-                            <path
-                                d="M11.612 30.945a3.986 3.986 0 01-2.829-1.17l-5.209-5.208a4.006 4.006 0 010-5.657l3.955-3.954a1 1 0 011.414 1.414l-3.955 3.954a2.003 2.003 0 000 2.829l5.21 5.208a2.004 2.004 0 002.828 0l7.235-7.234a2.003 2.003 0 000-2.828l-4.63-4.63a1 1 0 011.414-1.414l4.63 4.63a4.006 4.006 0 010 5.657l-7.235 7.233a3.988 3.988 0 01-2.828 1.17z"
-                                fill="#232323" />
-                            <path
-                                d="M15.662 20.038a.997.997 0 01-.707-.293l-4.63-4.63a4.006 4.006 0 010-5.656l7.235-7.234a4.004 4.004 0 015.657 0l5.209 5.208a4.006 4.006 0 010 5.657l-3.955 3.954a1 1 0 01-1.414-1.414l3.955-3.954a2.003 2.003 0 000-2.829l-5.21-5.208a2.002 2.002 0 00-2.828 0l-7.235 7.234a2.003 2.003 0 000 2.828l4.63 4.63a1 1 0 01-.707 1.707z"
-                                fill="#7fbde7" />
-                        </g>
+                <span class="icon">
+                    <svg class="icon-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="9 18 15 12 9 6" />
                     </svg>
                 </span>
                 <span>{{@key}}</span>
             </div>
         </summary>
-        <ul class="mt-4 mb-4">
+        <div class="test-content">
             {{#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">
-                            <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                <path
-                                    d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
-                                    fill="#e6e9ed" />
-                                <path
-                                    d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
-                                    fill="#ccd1d9" />
+            <details class="test-case">
+                <summary>
+                    <span class="icon is-small">
+                        <svg class="image is-16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path
+                                d="M181.344 42.656v394.671C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V42.656H181.344z"
+                                fill="#e6e9ed" />
+                            <path
+                                d="M352 32c0 17.672-14.312 32-32 32H192c-17.656 0-32-14.328-32-32s14.344-32 32-32h128c17.688 0 32 14.328 32 32z"
+                                fill="#ccd1d9" />
+                            <path
+                                d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
+                                fill="#a0d468" />
+                            <g fill="#434a54">
                                 <path
-                                    d="M181.344 192v245.327C181.344 478.562 214.781 512 256 512c41.25 0 74.672-33.438 74.672-74.673V192H181.344z"
-                                    fill="#a0d468" />
-                                <g fill="#434a54">
-                                    <path
-                                        d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
-                                </g>
-                            </svg>
-                        </span>
-                        <span>{{@key}}</span>
-                    </div>
+                                    d="M245.344 266.655c0-5.89-4.781-10.655-10.672-10.655h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.673zM234.672 319.999h-53.328v21.328h53.328c5.891 0 10.672-4.781 10.672-10.671s-4.782-10.657-10.672-10.657zM245.344 202.656c0-5.891-4.781-10.656-10.672-10.656h-53.328v21.328h53.328c5.89 0 10.672-4.781 10.672-10.672z" />
+                            </g>
+                        </svg>
+                    </span>
+                    <span class="is-size-6">{{@key}}</span>
                 </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}}">
-                        {{> testStatus}}
-                    </li>
-                    {{/each}}
-                </ul>
+                {{#each this}}
+                {{> testStatus}}
+                {{/each}}
             </details>
             {{/each}}
-        </ul>
+        </div>
     </details>
     {{/each}}
     {{/if}}

package/dist/views/testIcons.hbs

@@ -0,0 +1,163 @@
+<div class="icon-text">
+    {{#if isRetry}}
+    <span class="icon has-text-info">
+        <svg class="image is-16x16" id="Layer_1" height="512" viewBox="0 0 512 512" width="512"
+            xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
+            <circle cx="256" cy="256" fill="#00ab5e" r="256" />
+            <path
+                d="m387.823 256.136c0 72.688-59.135 131.823-131.823 131.823s-131.824-59.135-131.824-131.823a132.14 132.14 0 0 1 77.501-120.136 16 16 0 1 1 13.2 29.15 99.852 99.852 0 1 0 103.749 13.25v25.833a16 16 0 0 1 -32 0v-64.192a16 16 0 0 1 16-16h64.192a16 16 0 0 1 0 32h-25.066a132.143 132.143 0 0 1 46.071 100.095z"
+                fill="#fff" />
+        </svg>
+    </span>
+    {{else}}
+    <span class="icon has-text-info">
+        {{#if (eq status "passed")}}
+        <svg class="image is-16x16" height="512" viewBox="0 0 520 520" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g id="_15-Checked" data-name="15-Checked">
+                <circle cx="208.52" cy="288.5" fill="#b0ef8f" r="176.52" />
+                <path
+                    d="m210.516 424.937-2.239-3.815c-34.2-58.27-125.082-181.928-126-183.17l-1.311-1.781 30.963-30.6 98.012 68.439c61.711-80.079 119.283-135.081 156.837-167.2 41.081-35.135 67.822-51.31 68.092-51.465l.608-.364h52.522l-5.017 4.468c-129.029 114.926-268.883 359.19-270.276 361.644z"
+                    fill="#009045" />
+            </g>
+        </svg>
+        {{/if}}
+        {{#if (eq status "failed")}}
+        <svg class="image is-16x16" height="512pt" viewBox="0 0 512 512" width="512pt"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0"
+                fill="#f44336" />
+            <path
+                d="m350.273438 320.105469c8.339843 8.34375 8.339843 21.824219 0 30.167969-4.160157 4.160156-9.621094 6.25-15.085938 6.25-5.460938 0-10.921875-2.089844-15.082031-6.25l-64.105469-64.109376-64.105469 64.109376c-4.160156 4.160156-9.621093 6.25-15.082031 6.25-5.464844 0-10.925781-2.089844-15.085938-6.25-8.339843-8.34375-8.339843-21.824219 0-30.167969l64.109376-64.105469-64.109376-64.105469c-8.339843-8.34375-8.339843-21.824219 0-30.167969 8.34375-8.339843 21.824219-8.339843 30.167969 0l64.105469 64.109376 64.105469-64.109376c8.34375-8.339843 21.824219-8.339843 30.167969 0 8.339843 8.34375 8.339843 21.824219 0 30.167969l-64.109376 64.105469zm0 0"
+                fill="#fafafa" />
+        </svg>
+        {{/if}}
+        {{#if (eq status "skipped")}}
+        <svg class="image is-16x16" id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512"
+            width="512" xmlns="http://www.w3.org/2000/svg">
+            <g clip-rule="evenodd" fill-rule="evenodd">
+                <path d="m256 0c-141.2 0-256 114.8-256 256s114.8 256 256 256 256-114.8 256-256-114.8-256-256-256z"
+                    fill="#fec006" />
+                <path
+                    d="m379 244.8c6.3 6.3 6.3 16.4 0 22.7l-112.7 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.3-6.3-6.3-16.4 0-22.6l101.3-101.3-101.3-101.3c-6.3-6.3-6.3-16.4 0-22.7s16.4-6.3 22.7 0zm-110.8 22.6-112.5 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.2-6.2-6.2-16.4 0-22.6l101.1-101.2-101.2-101.2c-6.2-6.2-6.2-16.4 0-22.6 6.3-6.2 16.4-6.2 22.6 0l112.5 112.5c6.3 6.2 6.3 16.4.1 22.6z"
+                    fill="#fff" />
+            </g>
+        </svg>
+        {{/if}}
+        {{#if (eq status "timedOut")}}
+        <svg class="image is-16x16" id="Date__x26__Time_-_Flat" enable-background="new 0 0 64 64" height="512"
+            viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g>
+                <g>
+                    <g>
+                        <path
+                            d="m46.12 16.71h-.43c-1.427 0-2.769-.555-3.777-1.562-1.008-1.009-1.563-2.347-1.563-3.769 0-1.842-1.494-3.34-3.33-3.34h-.7c-1.836 0-3.33 1.498-3.33 3.34v3.33c0 .553-.447 1-1 1s-1-.447-1-1v-3.33c0-2.944 2.391-5.34 5.33-5.34h.699c2.939 0 5.33 2.396 5.33 5.34 0 .888.348 1.723.978 2.354.631.63 1.47.977 2.363.977h.43c1.842 0 3.34-1.494 3.34-3.33 0-.553.447-1 1-1s1 .447 1 1c0 2.939-2.396 5.33-5.34 5.33z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m50.46 8.651c-.553 0-1-.447-1-1v-2.892c0-.553.447-1 1-1s1 .447 1 1v2.893c0 .552-.447.999-1 .999z"
+                            fill="#fb7088" />
+                    </g>
+                    <g>
+                        <path
+                            d="m47.824 9.744c-.256 0-.512-.098-.707-.293l-2.046-2.046c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.046 2.046c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
+                            fill="#fb7088" />
+                    </g>
+                    <g>
+                        <path
+                            d="m55.142 17.062c-.256 0-.512-.098-.707-.293l-2.045-2.045c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.045 2.045c.391.391.391 1.023 0 1.414-.196.195-.452.293-.707.293z"
+                            fill="#fb7088" />
+                    </g>
+                    <g>
+                        <path
+                            d="m57.081 12.38h-2.893c-.553 0-1-.447-1-1s.447-1 1-1h2.893c.553 0 1 .447 1 1s-.447 1-1 1z"
+                            fill="#fb7088" />
+                    </g>
+                    <g>
+                        <path
+                            d="m53.097 9.744c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.045-2.046c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.045 2.046c-.196.195-.451.293-.707.293z"
+                            fill="#fb7088" />
+                    </g>
+                    <path
+                        d="m36.48 18.96v-4.25h-8.96v4.25c-9.04 2.03-15.79 10.11-15.79 19.76 0 11.2 9.08 20.27 20.27 20.27s20.27-9.07 20.27-20.27c0-9.65-6.75-17.73-15.79-19.76z"
+                        fill="#565662" />
+                    <path
+                        d="m32 54.489c-8.694 0-15.767-7.073-15.767-15.767s7.073-15.767 15.767-15.767 15.767 7.073 15.767 15.767c0 8.693-7.073 15.767-15.767 15.767z"
+                        fill="#faf8f9" />
+                    <path
+                        d="m18.233 40.721c0-8.694 7.073-15.767 15.767-15.767 3.839 0 7.359 1.382 10.096 3.671-2.895-3.462-7.241-5.671-12.096-5.671-8.694 0-15.767 7.073-15.767 15.767 0 4.855 2.209 9.201 5.671 12.096-2.289-2.737-3.671-6.257-3.671-10.096z"
+                        fill="#e0cad6" />
+                    <g>
+                        <path
+                            d="m31.991 26.758c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .553-.447 1-1 1z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m22.827 30.562c-.256 0-.512-.098-.707-.293l-2.828-2.828c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.828c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m19.036 39.73h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m20.012 51.722c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.827c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.827c-.196.195-.451.293-.707.293z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m32.009 56.684c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .552-.447 1-1 1z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m44.001 51.709c-.256 0-.512-.098-.707-.293l-2.828-2.827c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.827c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m48.962 39.712h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m41.16 30.549c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.828c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.828c-.195.195-.451.293-.707.293z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m32 38.228c-.553 0-1-.447-1-1v-7.819c0-.553.447-1 1-1s1 .447 1 1v7.819c0 .552-.447 1-1 1z"
+                            fill="#565662" />
+                    </g>
+                    <g>
+                        <path
+                            d="m26.047 45.675c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.024 0-1.414l4.558-4.555c.391-.391 1.023-.391 1.414 0s.391 1.024 0 1.414l-4.558 4.555c-.195.195-.451.293-.707.293z"
+                            fill="#565662" />
+                    </g>
+                    <circle cx="32" cy="38.721" fill="#ffc361" r="2.54" />
+                </g>
+            </g>
+        </svg>
+        {{/if}}
+        {{#if (eq status "flaky")}}
+        <svg class="image is-16x16" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g id="Layer_35" data-name="Layer 35">
+                <path
+                    d="m32 3.4a28.59 28.59 0 0 0 -28.6 28.6 28.59 28.59 0 0 0 28.6 28.6 28.59 28.59 0 0 0 28.6-28.6 28.59 28.59 0 0 0 -28.6-28.6zm0 49.2a4.32 4.32 0 1 1 4.31-4.31 4.32 4.32 0 0 1 -4.31 4.31zm5.23-35.6-1.63 22a.6.6 0 0 1 -.6.56h-6a.6.6 0 0 1 -.6-.56l-1.63-22a5.24 5.24 0 1 1 10.46 0z"
+                    fill="#ffc048" />
+            </g>
+        </svg>
+        {{/if}}
+    </span>
+    {{/if}}
+    <span>{{title}}</span>
+</div>
+{{#if @root.showProject}}
+<span class="tag duration-tag has-text-weight-medium">{{duration}}</span>
+{{else}}
+<span class="tag duration-tag has-text-weight-medium">{{projectName}}</span>
+{{/if}}

package/dist/views/testPanel.hbs

@@ -1,31 +1,37 @@
-<div class="columns is-mobile is-vcentered">
+<div class="columns is-mobile is-vcentered is-gapless">
     <div class="column">
-        <h2 class="title is-4">Tests</h2>
+        <div class="control">
+            <input class="input" name="search" type="search" placeholder="Search by test" />
+        </div>
     </div>
-    <div class="column">
+    <div class="column is-2 mr-3">
         <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">
+                <button class="button is-primary" 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>
+                        <i class="fa-solid fa-filter" aria-hidden="true"></i>
                     </span>
                 </button>
             </div>
             <div class="dropdown-menu" id="select-filter" role="menu">
                 <div class="dropdown-content">
+                    <p class="dropdown-item has-text-weight-semibold has-text-primary">Projects</p>
                     {{#each projects}}
                     <div class="dropdown-item">
                         <label class="checkbox is-capitalized">
-                            <input name="{{this}}" type="checkbox" data-filter-type="project" value="{{this}}"> {{this}}
+                            <input name="{{this}}" type="checkbox" data-filter-type="project" value="{{this}}" />
+                            {{this}}
                         </label>
                     </div>
                     {{/each}}
                     <hr class="dropdown-divider" />
+                    <p class="dropdown-item has-text-weight-semibold has-text-primary">Tags</p>
                     {{#each allTags}}
                     <div class="dropdown-item">
                         <label class="checkbox">
-                            <input name="{{this}}" type="checkbox" data-filter-type="test-tags" value="{{this}}"> {{this}}
+                            <input name="{{this}}" type="checkbox" data-filter-type="test-tags" value="{{this}}" />
+                            {{this}}
                         </label>
                     </div>
                     {{/each}}
@@ -33,4 +39,7 @@
             </div>
         </div>
     </div>
+</div>
+<div class="content">
+    <span id="selected-filters"></span>
 </div>

package/dist/views/testStatus.hbs

@@ -1,33 +1,9 @@
-<div class="icon-text">
-    {{#if isRetry}}
-    <span class="icon has-text-info">
-        <svg class="image is-16x16" id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><circle cx="256" cy="256" fill="#00ab5e" r="256"/><path d="m387.823 256.136c0 72.688-59.135 131.823-131.823 131.823s-131.824-59.135-131.824-131.823a132.14 132.14 0 0 1 77.501-120.136 16 16 0 1 1 13.2 29.15 99.852 99.852 0 1 0 103.749 13.25v25.833a16 16 0 0 1 -32 0v-64.192a16 16 0 0 1 16-16h64.192a16 16 0 0 1 0 32h-25.066a132.143 132.143 0 0 1 46.071 100.095z" fill="#fff"/></svg>
-    </span>
-    {{else}}
-    <span class="icon has-text-info">
-        {{#if (eq status "passed")}}
-        <svg class="image is-16x16" height="512" viewBox="0 0 520 520" width="512" xmlns="http://www.w3.org/2000/svg">
-            <g id="_15-Checked" data-name="15-Checked">
-                <circle cx="208.52" cy="288.5" fill="#b0ef8f" r="176.52" />
-                <path
-                    d="m210.516 424.937-2.239-3.815c-34.2-58.27-125.082-181.928-126-183.17l-1.311-1.781 30.963-30.6 98.012 68.439c61.711-80.079 119.283-135.081 156.837-167.2 41.081-35.135 67.822-51.31 68.092-51.465l.608-.364h52.522l-5.017 4.468c-129.029 114.926-268.883 359.19-270.276 361.644z"
-                    fill="#009045" />
-            </g>
-        </svg>
-        {{/if}}
-        {{#if (eq status "failed")}}
-        <svg class="image is-16x16" height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0" fill="#f44336"/><path d="m350.273438 320.105469c8.339843 8.34375 8.339843 21.824219 0 30.167969-4.160157 4.160156-9.621094 6.25-15.085938 6.25-5.460938 0-10.921875-2.089844-15.082031-6.25l-64.105469-64.109376-64.105469 64.109376c-4.160156 4.160156-9.621093 6.25-15.082031 6.25-5.464844 0-10.925781-2.089844-15.085938-6.25-8.339843-8.34375-8.339843-21.824219 0-30.167969l64.109376-64.105469-64.109376-64.105469c-8.339843-8.34375-8.339843-21.824219 0-30.167969 8.34375-8.339843 21.824219-8.339843 30.167969 0l64.105469 64.109376 64.105469-64.109376c8.34375-8.339843 21.824219-8.339843 30.167969 0 8.339843 8.34375 8.339843 21.824219 0 30.167969l-64.109376 64.105469zm0 0" fill="#fafafa"/></svg>
-        {{/if}}
-        {{#if (eq status "skipped")}}
-        <svg class="image is-16x16" id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m256 0c-141.2 0-256 114.8-256 256s114.8 256 256 256 256-114.8 256-256-114.8-256-256-256z" fill="#fec006"/><path d="m379 244.8c6.3 6.3 6.3 16.4 0 22.7l-112.7 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.3-6.3-6.3-16.4 0-22.6l101.3-101.3-101.3-101.3c-6.3-6.3-6.3-16.4 0-22.7s16.4-6.3 22.7 0zm-110.8 22.6-112.5 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.2-6.2-6.2-16.4 0-22.6l101.1-101.2-101.2-101.2c-6.2-6.2-6.2-16.4 0-22.6 6.3-6.2 16.4-6.2 22.6 0l112.5 112.5c6.3 6.2 6.3 16.4.1 22.6z" fill="#fff"/></g></svg>
-        {{/if}}
-        {{#if (eq status "timedOut")}}
-        <svg class="image is-16x16" id="Date__x26__Time_-_Flat" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m46.12 16.71h-.43c-1.427 0-2.769-.555-3.777-1.562-1.008-1.009-1.563-2.347-1.563-3.769 0-1.842-1.494-3.34-3.33-3.34h-.7c-1.836 0-3.33 1.498-3.33 3.34v3.33c0 .553-.447 1-1 1s-1-.447-1-1v-3.33c0-2.944 2.391-5.34 5.33-5.34h.699c2.939 0 5.33 2.396 5.33 5.34 0 .888.348 1.723.978 2.354.631.63 1.47.977 2.363.977h.43c1.842 0 3.34-1.494 3.34-3.33 0-.553.447-1 1-1s1 .447 1 1c0 2.939-2.396 5.33-5.34 5.33z" fill="#565662"/></g><g><path d="m50.46 8.651c-.553 0-1-.447-1-1v-2.892c0-.553.447-1 1-1s1 .447 1 1v2.893c0 .552-.447.999-1 .999z" fill="#fb7088"/></g><g><path d="m47.824 9.744c-.256 0-.512-.098-.707-.293l-2.046-2.046c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.046 2.046c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#fb7088"/></g><g><path d="m55.142 17.062c-.256 0-.512-.098-.707-.293l-2.045-2.045c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.045 2.045c.391.391.391 1.023 0 1.414-.196.195-.452.293-.707.293z" fill="#fb7088"/></g><g><path d="m57.081 12.38h-2.893c-.553 0-1-.447-1-1s.447-1 1-1h2.893c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#fb7088"/></g><g><path d="m53.097 9.744c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.045-2.046c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.045 2.046c-.196.195-.451.293-.707.293z" fill="#fb7088"/></g><path d="m36.48 18.96v-4.25h-8.96v4.25c-9.04 2.03-15.79 10.11-15.79 19.76 0 11.2 9.08 20.27 20.27 20.27s20.27-9.07 20.27-20.27c0-9.65-6.75-17.73-15.79-19.76z" fill="#565662"/><path d="m32 54.489c-8.694 0-15.767-7.073-15.767-15.767s7.073-15.767 15.767-15.767 15.767 7.073 15.767 15.767c0 8.693-7.073 15.767-15.767 15.767z" fill="#faf8f9"/><path d="m18.233 40.721c0-8.694 7.073-15.767 15.767-15.767 3.839 0 7.359 1.382 10.096 3.671-2.895-3.462-7.241-5.671-12.096-5.671-8.694 0-15.767 7.073-15.767 15.767 0 4.855 2.209 9.201 5.671 12.096-2.289-2.737-3.671-6.257-3.671-10.096z" fill="#e0cad6"/><g><path d="m31.991 26.758c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .553-.447 1-1 1z" fill="#565662"/></g><g><path d="m22.827 30.562c-.256 0-.512-.098-.707-.293l-2.828-2.828c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.828c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m19.036 39.73h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#565662"/></g><g><path d="m20.012 51.722c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.827c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.827c-.196.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m32.009 56.684c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .552-.447 1-1 1z" fill="#565662"/></g><g><path d="m44.001 51.709c-.256 0-.512-.098-.707-.293l-2.828-2.827c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.827c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m48.962 39.712h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#565662"/></g><g><path d="m41.16 30.549c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.828c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.828c-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m32 38.228c-.553 0-1-.447-1-1v-7.819c0-.553.447-1 1-1s1 .447 1 1v7.819c0 .552-.447 1-1 1z" fill="#565662"/></g><g><path d="m26.047 45.675c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.024 0-1.414l4.558-4.555c.391-.391 1.023-.391 1.414 0s.391 1.024 0 1.414l-4.558 4.555c-.195.195-.451.293-.707.293z" fill="#565662"/></g><circle cx="32" cy="38.721" fill="#ffc361" r="2.54"/></g></g></svg>
-        {{/if}}
-        {{#if (eq status "flaky")}}
-        <svg class="image is-16x16" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_35" data-name="Layer 35"><path d="m32 3.4a28.59 28.59 0 0 0 -28.6 28.6 28.59 28.59 0 0 0 28.6 28.6 28.59 28.59 0 0 0 28.6-28.6 28.59 28.59 0 0 0 -28.6-28.6zm0 49.2a4.32 4.32 0 1 1 4.31-4.31 4.32 4.32 0 0 1 -4.31 4.31zm5.23-35.6-1.63 22a.6.6 0 0 1 -.6.56h-6a.6.6 0 0 1 -.6-.56l-1.63-22a5.24 5.24 0 1 1 10.46 0z" fill="#ffc048"/></g></svg>
-        {{/if}}
-    </span>
-    {{/if}}
-    <span>{{title}}</span>
+<div class="test-item 
+    {{#if (eq status 'passed')}}status-passed
+    {{else if (or (eq status 'failed') (eq status 'timedOut'))}}status-failed
+    {{else if (includes status 'flaky')}}status-flaky
+    {{else if (eq status 'skipped')}}status-skipped is-hidden{{/if}}" data-suite-name="{{suite}}"
+    data-test-tags="{{joinWithSpace testTags}}" data-project-name="{{projectName}}" data-test-id="{{index}}"
+    data-test-status="{{status}} {{retry}}" data-test-duration="{{duration}}">
+    {{> testIcons}}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "tsc": "tsc",

package/readme.md

@@ -11,32 +11,40 @@ Welcome to **Ortoni Report**, a comprehensive and visually appealing HTML report
 ## Key Features
 
 1. **Hierarchical Grouping**
+
    - Tests are structured and grouped by filename, suite, and project, providing a clear and organized view of the entire test execution.
 
 2. **Detailed Breakdown**
+
    - Each suite displays tests categorized by project, with organized test results for better navigation.
 
 3. **Comprehensive Test Details**
+
    - Rich details include test status (passed, failed, skipped), duration, tags, errors, logs, annotations, screenshots, videos, and trace data.
    - Users can sort and filter tests by suite, project, or script for more focused insights.
 
 4. **Summary Statistics**
+
    - Overview displays total tests, passed, failed, skipped, and flaky tests, with a success rate calculation for each suite.
 
 5. **Chart Visualizations**
+
    - Visualize test result distributions using:
      - **Doughnut Chart**: Illustrates overall test result status (passed, failed, skipped, flaky).
      - **Doughnut & Bar Charts**: Breakdown of results per project (Chromium, Firefox, etc.) for easy comparison.
 
 6. **Advanced Search and Reset**
+
    - Search and filter tests quickly using specific keywords or criteria. Easily reset filters to display all tests again.
 
 7. **Customization & Themes**
+
    - Personalize reports with project details, author name, test type, and toggle between light and dark themes.
    - Flexibility to choose between Base64 images or file paths for screenshots.
    - Customize report filenames and folder paths.
 
 8. **Test Attachments**
+
    - Screenshots
    - Videos
    - Trace viewer
@@ -45,22 +53,28 @@ Welcome to **Ortoni Report**, a comprehensive and visually appealing HTML report
    - Console logs
 
 9. **Integration and Configuration**
+
    - Easily configure and integrate with Playwright using TypeScript/JavaScript.
    - Configure reporting preferences within the Playwright setup for quick customization.
 
 10. **Add Your Logo**
+
     - Include your branding by adding a relative or absolute path to the config for a custom logo in the report.
 
 11. **Share Reports**
+
     - Generated reports are self-contained and ready to share right away, making it easier to distribute and review.
 
 12. **Advanced Filtering**
+
     - Apply filters based on project, tags, and test status simultaneously for precise reporting. See only the relevant tests.
 
 13. **Colorful and Intuitive Dashboard**
+
     - Vibrant, intuitive color schemes enhance the dashboard’s visual appeal, improving clarity for quick test status assessment.
 
 14. **Selected Status Display**
+
     - The UI now clearly displays the selected status filter, helping users keep track of the current filter criteria.
 
 15. **Hide Skipped Tests by Default**
@@ -88,14 +102,14 @@ import { OrtoniReportConfig } from "ortoni-report";
 
 const reportConfig: OrtoniReportConfig = {
   port: 1994,
-  open: "on-failure",
+  open: process.env.CI ? "never" : "always",
   folderPath: "report",
   filename: "index.html",
   logo: "logo.png",
   title: "Ortoni Test Report",
   showProject: false,
   projectName: "Ortoni-Report",
-  testType: "Release - Oct 21, 2024",
+  testType: "Release - Oct 30, 2024",
   authorName: "Koushik (LetCode with Koushik)",
   preferredTheme: "light",
   base64Image: true,
@@ -106,13 +120,15 @@ export default defineConfig({
   // Other Playwright configurations
 });
 ```
+
 ### Configure in `playwright.config.js`
+
 ```javascript
 import { defineConfig } from "@playwright/test";
 
 const reportConfig = {
   port: 1994,
-  open: "on-failure",
+  open: process.env.CI ? "never" : "always",D
   folderPath: "report",
   filename: "index.html",
   logo: "logo.png",
@@ -171,4 +187,4 @@ Thank you for using **Ortoni Report**! We’re committed to providing you with a
 
 **LetCode with Koushik**
 
---- 
+---