@flash-ai-team/flash-test-framework 0.0.6 → 0.0.9

package/README.md

@@ -5,7 +5,7 @@ A powerful, keyword-driven automation framework built on top of Playwright and T
 ## Installation
 
 ```bash
-npm install flash-test-framework
+npm install @flash-ai-team/flash-test-framework
 ```
 
 ## Setup
@@ -17,7 +17,7 @@ npm install flash-test-framework
 
 2.  **Configuration**:
     *   **Email Reporting**: Create `email.config.json` in your project root if you want email reports.
-    *   **AI Features**: Create `ai.config.json` with your OpenAI API key to use `AIWebUI`.
+    *   **AI Features**: Create `ai.config.json` with your OpenAI API key to use `AIWeb`.
     ```json
     {
         "enabled": true,
@@ -29,56 +29,47 @@ npm install flash-test-framework
 
 ## Usage
 
-### 1. Basic Web Automation (`web`)
+### 1. Basic Web Automation (`Web`)
 
-Use `web` for standard, deterministic interactions using selectors.
+Use `Web` for standard, deterministic interactions using selectors.
+Import `test` from the framework to automatically initialize the context.
 
 ```typescript
-import { test } from '@playwright/test';
-import { web, findTestObject, KeywordContext } from 'flash-test-framework';
+import { test, Web, el, KeywordContext } from '@flash-ai-team/flash-test-framework';
 
 test.describe('My Test Suite', () => {
-    test.beforeEach(async ({ page }, testInfo) => {
-        // Initialize Context
-        KeywordContext.page = page;
-        KeywordContext.testInfo = testInfo;
-    });
+    // Context is automatically initialized by the 'test' fixture
 
     test('Login Test', async () => {
-        await web.navigateToUrl('https://example.com/login');
+        await Web.navigateToUrl('https://example.com/login');
         
-        const usernameInput = findTestObject('#username', 'Username Field');
-        const passwordInput = findTestObject('#password', 'Password Field');
-        const loginButton = findTestObject('button[type="submit"]', 'Login Button');
+        const usernameInput = el('#username', 'Username Field');
+        const passwordInput = el('#password', 'Password Field');
+        const loginButton = el('button[type="submit"]', 'Login Button');
 
-        await web.setText(usernameInput, 'myuser');
-        await web.setText(passwordInput, 'mypassword');
-        await web.click(loginButton);
+        await Web.setText(usernameInput, 'myuser');
+        await Web.setText(passwordInput, 'mypassword');
+        await Web.click(loginButton);
         
         // precise search using heuristics
-        await web.search("Specific Item");
+        await Web.search("Specific Item");
     });
 });
 ```
 
-### 2. AI & Manual Steps (`aiWeb`)
+### 2. AI & Manual Steps (`AIWeb`)
 
-Use `aiWeb` to write tests in plain English or to click elements that are hard to target (like map markers) using images.
+Use `AIWeb` to write tests in plain English or to click elements that are hard to target (like map markers) using images.
 
 **Example: `AIManualSteps.spec.ts`**
 
 ```typescript
-import { test } from '@playwright/test';
-import { aiWeb, KeywordContext } from 'flash-test-framework';
+import { test, AIWeb } from '@flash-ai-team/flash-test-framework';
 
 test.describe('AI Scenario', () => {
-    test.beforeEach(async ({ page }, testInfo) => {
-        KeywordContext.page = page;
-        KeywordContext.testInfo = testInfo;
-    });
 
     test('Google Maps Flow', async () => {
-        await aiWeb.executeManualSteps(`
+        await AIWeb.executeManualSteps(`
             1. Navigate to "https://www.google.com/maps"
             2. Click on "Accept all"
             3. Search "KFC"
@@ -96,15 +87,56 @@ test.describe('AI Scenario', () => {
 
 ## Keywords
 
-### web
-*   `navigateToUrl(url)`
-*   `click(testObject)`
-*   `setText(testObject, text)`
-*   `search(text)` - Smart search input targeting.
-*   `clickImage(imagePath)` - Visual testing.
-*   `pressKey(key)` - Keyboard interactions.
-*   `verifyElementPresent(testObject)`
-*   ...and more.
-
-### aiWeb
-*   `executeManualSteps(steps: string)` - Parses multi-line natural language steps.
+### Web
+
+#### Navigation
+*   `navigateToUrl(url)`: Navigate to the specified URL.
+*   `refresh()`: Refresh the current page.
+*   `back()`: Navigate back.
+*   `forward()`: Navigate forward.
+*   `closeBrowser()`: Close the browser instance.
+*   `verifyUrl(url, timeout?)`: Verify the current URL matches the expected URL.
+
+#### Interaction
+*   `click(testObject)`: Click on a test object.
+*   `doubleClick(testObject)`: Double-click on a test object.
+*   `rightClick(testObject)`: Right-click on a test object.
+*   `setText(testObject, text)`: Clear and set text in an input field.
+*   `sendKeys(testObject, key)`: Send specific keys to an element.
+*   `pressKey(key)`: Press a specific key globally (e.g., 'Enter').
+*   `check(testObject)`: Check a checkbox or radio button.
+*   `uncheck(testObject)`: Uncheck a checkbox.
+*   `selectOptionByValue(testObject, value)`: Select a dropdown option by value.
+*   `selectOptionByLabel(testObject, label)`: Select a dropdown option by label.
+*   `mouseOver(testObject)`: Hover over an element.
+*   `dragAndDrop(source, target)`: Drag one element and drop it onto another.
+*   `uploadFile(testObject, absolutePath)`: Upload a file to an input element.
+*   `scrollToElement(testObject)`: Scroll the page to make the element visible.
+*   `search(text)`: Heuristically find a search bar and enter text.
+*   `clickImage(imagePath)`: Click an element by matching an image template.
+
+#### Verification
+*   `verifyElementPresent(testObject, timeout?)`: Assert an element exists.
+*   `verifyElementNotPresent(testObject, timeout?)`: Assert an element does not exist.
+*   `verifyElementText(testObject, expectedText)`: Assert element text matches.
+*   `verifyElementAttributeValue(testObject, attribute, value)`: Assert element attribute matches.
+*   `verifyElementChecked(testObject, checked?)`: Assert element checked state.
+*   `verifyTextPresent(text)`: Assert text exists on the page.
+
+#### Synchonization
+*   `waitForElementVisible(testObject, timeout?)`: Wait for element to be visible.
+*   `waitForElementNotVisible(testObject, timeout?)`: Wait for element to disappear.
+*   `waitForElementClickable(testObject, timeout?)`: Wait for element to be clickable.
+*   `waitForAngularLoad()`: Wait for Angular stability (if applicable).
+*   `delay(seconds)`: Hard wait (use sparingly).
+
+#### Utilities
+*   `getText(testObject)`: Get text content of an element.
+*   `getAttribute(testObject, attribute)`: Get attribute value of an element.
+*   `takeScreenshot(filename?)`: Capture a full-page screenshot.
+*   `maximizeWindow()`: Maximize the browser window.
+*   `setWindowSize(width, height)`: Set specific window dimensions.
+
+### AIWeb
+
+*   `executeManualSteps(steps: string)`: Execute a multi-step test case described in natural language.

package/dist/core/TestBase.js

@@ -3,14 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.expect = exports.test = void 0;
 const test_1 = require("@playwright/test");
 const Keyword_1 = require("./Keyword");
-const ReporterUtils_1 = require("../reporting/ReporterUtils");
 exports.test = test_1.test.extend({
     contextSetup: [async ({ page }, use, testInfo) => {
             // Initialize the Keyword Context before every test
             Keyword_1.KeywordContext.page = page;
             Keyword_1.KeywordContext.testInfo = testInfo;
-            // Ensure report folder exists automatically
-            (0, ReporterUtils_1.ensureReportFolder)(testInfo);
             await use();
         }, { auto: true }],
 });

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Keyword, KeywordContext } from './core/Keyword';
 export { TestObject, el } from './core/ObjectRepository';
 export { TestCase } from './core/TestDecorators';
 export { test, expect } from './core/TestBase';
+export { generateReportPath } from './reporting/ReporterUtils';
 export { default as CustomReporter } from './reporting/CustomReporter';
 export { default as HtmlReporter } from './reporting/HtmlReporter';
 export { default as EmailReporter } from './reporting/EmailReporter';

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmailReporter = exports.HtmlReporter = exports.CustomReporter = exports.expect = exports.test = exports.TestCase = exports.el = exports.TestObject = exports.KeywordContext = exports.Keyword = exports.AIWeb = exports.Web = void 0;
+exports.EmailReporter = exports.HtmlReporter = exports.CustomReporter = exports.generateReportPath = exports.expect = exports.test = exports.TestCase = exports.el = exports.TestObject = exports.KeywordContext = exports.Keyword = exports.AIWeb = exports.Web = void 0;
 // Core
 var WebUI_1 = require("./keywords/WebUI");
 Object.defineProperty(exports, "Web", { enumerable: true, get: function () { return WebUI_1.Web; } });
@@ -20,6 +20,8 @@ Object.defineProperty(exports, "TestCase", { enumerable: true, get: function ()
 var TestBase_1 = require("./core/TestBase");
 Object.defineProperty(exports, "test", { enumerable: true, get: function () { return TestBase_1.test; } });
 Object.defineProperty(exports, "expect", { enumerable: true, get: function () { return TestBase_1.expect; } });
+var ReporterUtils_1 = require("./reporting/ReporterUtils");
+Object.defineProperty(exports, "generateReportPath", { enumerable: true, get: function () { return ReporterUtils_1.generateReportPath; } });
 // Reporters
 var CustomReporter_1 = require("./reporting/CustomReporter");
 Object.defineProperty(exports, "CustomReporter", { enumerable: true, get: function () { return __importDefault(CustomReporter_1).default; } });

package/dist/reporting/HtmlReporter.d.ts

@@ -6,6 +6,7 @@ declare class HtmlReporter implements Reporter {
     onEnd(result: FullResult): Promise<void>;
     private testResults;
     onTestEnd(test: TestCase, result: TestResult): void;
+    private ansiToHtml;
     private generateHtml;
 }
 export default HtmlReporter;

package/dist/reporting/HtmlReporter.js

@@ -96,92 +96,328 @@ class HtmlReporter {
         const screenshotRelativePath = copyAttachment('screenshot', a => (a.name === 'screenshot' || a.contentType.startsWith('image/')) && !!a.path);
         this.testResults.push({ test, result, suiteName, videoPath: videoRelativePath, screenshotPath: screenshotRelativePath });
     }
+    ansiToHtml(text) {
+        if (!text)
+            return '';
+        let html = text
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        // Simple mapping for common Playwright ANSI codes
+        // Styles
+        html = html.replace(/\u001b\[1m/g, '<span style="font-weight:bold">')
+            .replace(/\u001b\[2m/g, '<span style="opacity:0.6">')
+            .replace(/\u001b\[3m/g, '<span style="font-style:italic">')
+            .replace(/\u001b\[4m/g, '<span style="text-decoration:underline">')
+            .replace(/\u001b\[22m/g, '</span>') // Reset bold/dim
+            .replace(/\u001b\[23m/g, '</span>') // Reset italic
+            .replace(/\u001b\[24m/g, '</span>'); // Reset underline
+        // Colors (Foreground)
+        html = html.replace(/\u001b\[30m/g, '<span style="color:#555">')
+            .replace(/\u001b\[31m/g, '<span style="color:#ff6b6b">') // Red
+            .replace(/\u001b\[32m/g, '<span style="color:#69db7c">') // Green
+            .replace(/\u001b\[33m/g, '<span style="color:#ffd43b">') // Yellow
+            .replace(/\u001b\[34m/g, '<span style="color:#4dabf7">') // Blue
+            .replace(/\u001b\[35m/g, '<span style="color:#da77f2">') // Magenta
+            .replace(/\u001b\[36m/g, '<span style="color:#9775fa">') // Cyan
+            .replace(/\u001b\[37m/g, '<span style="color:#ccc">') // White
+            .replace(/\u001b\[39m/g, '</span>'); // Default color
+        // Reset all
+        html = html.replace(/\u001b\[0m/g, '</span></span></span></span>');
+        return html;
+    }
     generateHtml() {
-        const rows = this.testResults.map((item, index) => {
-            const statusColor = item.result.status === 'passed' ? '#dff0d8' : item.result.status === 'failed' ? '#f2dede' : '#fcf8e3';
-            const statusText = item.result.status.toUpperCase();
-            // Steps processing
-            const stepsHtml = item.result.steps.map(step => {
-                return `<div class="step">
-                            <span class="step-title">${step.title}</span>
-                            <span class="step-duration">${step.duration}ms</span>
-                            ${step.error ? `<div class="error">${step.error.message}</div>` : ''}
-                        </div>`;
-            }).join('');
-            const screenshotHtml = item.screenshotPath ? `
-                <div class="screenshot-container" style="margin-top: 15px;">
-                    <h3>Screenshot</h3>
-                    <img src="${item.screenshotPath}" alt="Failure Screenshot" style="max-width: 100%; border: 1px solid #ddd;">
-                </div>
-            ` : '';
-            const videoHtml = item.videoPath ? `
-                <div class="video-container" style="margin-top: 15px;">
-                    <h3>Video Recording</h3>
-                    <video width="640" height="480" controls>
-                        <source src="${item.videoPath}" type="video/webm">
-                        Your browser does not support the video tag.
-                    </video> 
-                </div>
-            ` : '';
-            return `
-                <tr class="test-row" onclick="toggleDetails(${index})" style="background-color: ${statusColor}">
-                    <td>${item.suiteName}</td>
-                    <td>${item.test.title}</td>
-                    <td>${statusText}</td>
-                    <td>${item.result.duration}ms</td>
-                </tr>
-                <tr id="details-${index}" style="display:none">
-                    <td colspan="4">
-                        <div class="details-container">
-                            ${stepsHtml}
-                            ${screenshotHtml}
-                            ${videoHtml}
-                        </div>
-                    </td>
-                </tr>
-            `;
-        }).join('');
+        const totalTests = this.testResults.length;
+        const passedTests = this.testResults.filter(r => r.result.status === 'passed').length;
+        const failedTests = this.testResults.filter(r => r.result.status === 'failed' || r.result.status === 'timedOut').length;
+        const skippedTests = totalTests - passedTests - failedTests;
+        const resultsData = JSON.stringify(this.testResults.map((item, index) => ({
+            id: index,
+            suite: item.suiteName,
+            title: item.test.title,
+            status: item.result.status,
+            duration: item.result.duration,
+            steps: item.result.steps.map(step => ({
+                title: step.title,
+                duration: step.duration,
+                error: step.error ? this.ansiToHtml(step.error.stack || step.error.message || '') : undefined
+            })),
+            error: item.result.error ? this.ansiToHtml(item.result.error.stack || item.result.error.message || '') : undefined,
+            screenshot: item.screenshotPath,
+            video: item.videoPath
+        })));
         return `
             <!DOCTYPE html>
-            <html>
+            <html lang="en">
             <head>
-                <title>Test Execution Report</title>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>Test Result</title>
                 <style>
-                    body { font-family: Arial, sans-serif; margin: 20px; }
-                    h1 { color: #333; }
-                    table { width: 100%; border-collapse: collapse; margin-top: 20px; }
-                    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
-                    th { background-color: #f2f2f2; }
-                    .test-row { cursor: pointer; }
-                    .step { margin: 5px 0; padding: 5px; border-left: 3px solid #007bff; background: #f9f9f9; }
-                    .step-title { font-weight: bold; }
-                    .step-duration { float: right; color: #666; font-size: 0.9em; }
-                    .error { color: red; margin-top: 5px; white-space: pre-wrap; }
-                    .details-container { padding: 10px; background: #fff; border: 1px solid #ddd; }
+                    :root {
+                        --bg-color: #1e1e1e;
+                        --sidebar-bg: #252526;
+                        --text-color: #d4d4d4;
+                        --border-color: #3e3e42;
+                        --hover-color: #2a2d2e;
+                        --success-color: #4caf50;
+                        --fail-color: #f44336;
+                        --skip-color: #ff9800;
+                        --blue-accent: #007acc;
+                    }
+                    body {
+                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                        margin: 0;
+                        padding: 0;
+                        background-color: var(--bg-color);
+                        color: var(--text-color);
+                        display: flex;
+                        height: 100vh;
+                        overflow: hidden;
+                    }
+                    /* Sidebar styles */
+                    .sidebar {
+                        width: 350px;
+                        background-color: var(--sidebar-bg);
+                        border-right: 1px solid var(--border-color);
+                        display: flex;
+                        flex-direction: column;
+                    }
+                    .sidebar-header {
+                        padding: 15px;
+                        border-bottom: 1px solid var(--border-color);
+                    }
+                    .stats-container {
+                        display: flex;
+                        gap: 10px;
+                        margin-bottom: 10px;
+                        font-size: 0.9em;
+                    }
+                    .stat-item {
+                        display: flex;
+                        align-items: center;
+                        gap: 5px;
+                    }
+                    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+                    .passed-dot { background-color: var(--success-color); }
+                    .failed-dot { background-color: var(--fail-color); }
+                    .skipped-dot { background-color: var(--skip-color); }
+                    
+                    .search-box {
+                        width: 100%;
+                        padding: 8px;
+                        background-color: #3c3c3c;
+                        border: 1px solid var(--border-color);
+                        color: white;
+                        border-radius: 4px;
+                        box-sizing: border-box;
+                    }
+                    
+                    .test-list {
+                        overflow-y: auto;
+                        flex: 1;
+                    }
+                    .test-item {
+                        padding: 10px 15px;
+                        border-bottom: 1px solid var(--border-color);
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                        gap: 10px;
+                    }
+                    .test-item:hover, .test-item.active { background-color: var(--hover-color); }
+                    .test-status-icon {
+                        font-size: 1.2em;
+                        width: 20px;
+                        text-align: center;
+                    }
+                    .test-info { flex: 1; overflow: hidden; }
+                    .test-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+                    .test-suite { font-size: 0.8em; color: #888; }
+                    .test-duration { font-size: 0.8em; color: #888; }
+
+                    /* Main Content */
+                    .main-content {
+                        flex: 1;
+                        padding: 20px;
+                        overflow-y: auto;
+                        display: none; /* Hidden by default until selected */
+                    }
+                    .main-content.active { display: block; }
+
+                    .detail-header {
+                        border-bottom: 1px solid var(--border-color);
+                        padding-bottom: 15px;
+                        margin-bottom: 20px;
+                    }
+                    .detail-title { font-size: 1.5em; margin-bottom: 5px; }
+                    .detail-meta { color: #888; font-size: 0.9em; display: flex; gap: 20px; }
+
+                    .section-title {
+                        font-size: 1.1em;
+                        margin: 20px 0 10px 0;
+                        color: #bbb;
+                        border-bottom: 1px solid #333;
+                        padding-bottom: 5px;
+                    }
+
+                    /* Steps */
+                    .steps-container {
+                        background-color: #252526;
+                        border-radius: 5px;
+                        padding: 10px;
+                    }
+                    .step-row {
+                        padding: 8px;
+                        border-left: 2px solid #555;
+                        margin-bottom: 5px;
+                        background-color: #2d2d2d;
+                    }
+                    .step-row.passed { border-left-color: var(--success-color); }
+                    .step-row.failed { border-left-color: var(--fail-color); }
+                    .step-header { display: flex; justify-content: space-between; }
+                    .step-error { 
+                        margin-top: 5px; 
+                        padding: 10px; 
+                        background-color: #0d1117; 
+                        color: #c9d1d9; 
+                        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+                        font-size: 0.85em;
+                        border: 1px solid #30363d;
+                        border-radius: 6px;
+                        white-space: pre-wrap;
+                        overflow-x: auto;
+                        line-height: 1.45;
+                    }
+
+                    /* Media */
+                    .media-container {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 20px;
+                    }
+                    .media-item {
+                        background-color: #000;
+                        padding: 5px;
+                        border-radius: 4px;
+                        border: 1px solid var(--border-color);
+                    }
+                    img, video { max-width: 100%; display: block; }
+                    
+                    .empty-state {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+                        color: #666;
+                        font-size: 1.2em;
+                    }
                 </style>
+            </head>
+            <body>
+                <div class="sidebar">
+                    <div class="sidebar-header">
+                        <div class="stats-container">
+                            <div class="stat-item"><span class="dot passed-dot"></span>Passed: ${passedTests}</div>
+                            <div class="stat-item"><span class="dot failed-dot"></span>Failed: ${failedTests}</div>
+                            <div class="stat-item"><span class="dot skipped-dot"></span>Skipped: ${skippedTests}</div>
+                        </div>
+                        <input type="text" class="search-box" placeholder="Filter tests..." id="searchInput" onkeyup="filterTests()">
+                    </div>
+                    <div class="test-list" id="testList"></div>
+                </div>
+                
+                <div id="contentArea" class="main-content">
+                    <div class="empty-state">Select a test view details</div>
+                </div>
+
                 <script>
-                    function toggleDetails(id) {
-                        var row = document.getElementById('details-' + id);
-                        row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
+                    const data = ${resultsData};
+                    let currentId = null;
+
+                    function renderList(items) {
+                        const container = document.getElementById('testList');
+                        container.innerHTML = items.map(item => {
+                            const icon = item.status === 'passed' ? '✅' : item.status === 'failed' ? '❌' : '⚠️';
+                            const activeClass = currentId === item.id ? 'active' : '';
+                            return \`<div class="test-item \${activeClass}" onclick="selectTest(\${item.id})">
+                                        <div class="test-status-icon">\${icon}</div>
+                                        <div class="test-info">
+                                            <div class="test-title" title="\${item.title}">\${item.title}</div>
+                                            <div class="test-suite">\${item.suite}</div>
+                                        </div>
+                                        <div class="test-duration">\${item.duration}ms</div>
+                                    </div>\`;
+                        }).join('');
                     }
+
+                    function selectTest(id) {
+                        currentId = id;
+                        renderList(data); // Re-render to update active state
+                        const test = data.find(t => t.id === id);
+                        if (!test) return;
+
+                        const content = document.getElementById('contentArea');
+                        const statusColor = test.status === 'passed' ? '#4caf50' : '#f44336';
+                        
+                        const stepsHtml = test.steps.map(step => \`
+                            <div class="step-row \${step.error ? 'failed' : 'passed'}">
+                                <div class="step-header">
+                                    <span>\${step.title}</span>
+                                    <span style="color: #888">\${step.duration}ms</span>
+                                </div>
+                                \${step.error ? \`<div class="step-error">\${step.error}</div>\` : ''}
+                            </div>
+                        \`).join('');
+
+                        const mediaHtml = \`
+                            \${test.screenshot ? \`
+                                <div class="media-item">
+                                    <div style="margin-bottom:5px; color:#aaa">Screenshot</div>
+                                    <img src="\${test.screenshot}" height="200" onclick="window.open(this.src)">
+                                </div>\` : ''}
+                            \${test.video ? \`
+                                <div class="media-item">
+                                    <div style="margin-bottom:5px; color:#aaa">Video</div>
+                                    <video src="\${test.video}" height="200" controls></video>
+                                </div>\` : ''}
+                        \`;
+
+                        content.innerHTML = \`
+                            <div class="detail-header">
+                                <div style="display:flex; align-items:center; gap:10px;">
+                                    <span style="font-size:1.5em; color:\${statusColor}">\${test.status.toUpperCase()}</span>
+                                    <div class="detail-title">\${test.title}</div>
+                                </div>
+                                <div class="detail-meta">
+                                    <span>Suite: \${test.suite}</span>
+                                    <span>Duration: \${test.duration}ms</span>
+                                </div>
+                                \${test.error ? \`<div class="step-error" style="margin-top:10px">\${test.error}</div>\` : ''}
+                            </div>
+
+                            <div class="section-title">Execution Steps</div>
+                            <div class="steps-container">
+                                \${stepsHtml}
+                            </div>
+
+                            \${test.screenshot || test.video ? \`<div class="section-title">Artifacts</div><div class="media-container">\${mediaHtml}</div>\` : ''}
+                        \`;
+                        content.classList.add('active');
+                    }
+
+                    function filterTests() {
+                        const query = document.getElementById('searchInput').value.toLowerCase();
+                        const filtered = data.filter(item => 
+                            item.title.toLowerCase().includes(query) || 
+                            item.suite.toLowerCase().includes(query)
+                        );
+                        renderList(filtered);
+                    }
+
+                    // Initial render
+                    renderList(data);
                 </script>
-            </head>
-            <body>
-                <h1>Execution Report</h1>
-                <p>Generated: ${new Date().toLocaleString()}</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Test Suite</th>
-                            <th>Test Case</th>
-                            <th>Status</th>
-                            <th>Duration</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        ${rows}
-                    </tbody>
-                </table>
             </body>
             </html>
         `;

package/dist/reporting/ReporterUtils.d.ts

@@ -1,5 +1,4 @@
 import { Suite } from '@playwright/test/reporter';
+export declare function generateReportPath(baseDir?: string, prefix?: string): string;
 export declare function getReportFolder(suite: Suite): string;
-import { TestInfo } from '@playwright/test';
-export declare function ensureReportFolder(testInfo: TestInfo): string;
 export declare function resetReportFolderCache(): void;

package/dist/reporting/ReporterUtils.js

@@ -33,12 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateReportPath = generateReportPath;
 exports.getReportFolder = getReportFolder;
-exports.ensureReportFolder = ensureReportFolder;
 exports.resetReportFolderCache = resetReportFolderCache;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 let cachedReportFolder = null;
+function generateReportPath(baseDir = 'reports', prefix = 'test') {
+    const timestamp = new Date().toISOString().replace(/T/, '_').replace(/:/g, '').split('.')[0];
+    return path.join(process.cwd(), baseDir, `${prefix}_${timestamp}`);
+}
 function getReportFolder(suite) {
     if (cachedReportFolder) {
         return cachedReportFolder;
@@ -65,42 +69,6 @@ function getReportFolder(suite) {
     console.log(`[ReporterUtils] Calculated report folder: ${cachedReportFolder}`);
     return cachedReportFolder;
 }
-// ... existing code ...
-function ensureReportFolder(testInfo) {
-    if (cachedReportFolder) {
-        return cachedReportFolder;
-    }
-    const timestamp = new Date().toISOString().replace(/T/, '_').replace(/:/g, '').split('.')[0];
-    // Extract suite name from test info title path (usually file name without ext)
-    // testInfo.titlePath[0] is usually the file name relative to test dir, e.g. "suites/SauceDemoAI.spec.ts"
-    let suiteName = 'TestRun';
-    if (testInfo.titlePath.length > 0) {
-        const fileName = path.basename(testInfo.file || '');
-        if (fileName) {
-            suiteName = fileName.split('.')[0];
-        }
-    }
-    // Check if our reporters are already configured.
-    // If they are, they will handle folder creation (in the main process), so we shouldn't create a duplicate one here (in the worker process)
-    // which would likely differ in timestamp.
-    const reporters = testInfo.config.reporter;
-    const hasFlashReporter = reporters.some(r => {
-        const name = Array.isArray(r) ? r[0] : r;
-        if (typeof name === 'string') {
-            return name.includes('CustomReporter') || name.includes('HtmlReporter') || name.includes('EmailReporter');
-        }
-        return false;
-    });
-    if (hasFlashReporter) {
-        return '';
-    }
-    cachedReportFolder = path.join(process.cwd(), 'reports', suiteName, `test_${timestamp}`);
-    if (!fs.existsSync(cachedReportFolder)) {
-        fs.mkdirSync(cachedReportFolder, { recursive: true });
-        console.log(`[ReporterUtils] AUTO-CREATED report folder: ${cachedReportFolder}`);
-    }
-    return cachedReportFolder;
-}
 function resetReportFolderCache() {
     cachedReportFolder = null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flash-ai-team/flash-test-framework",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "A powerful keyword-driven automation framework built on top of Playwright and TypeScript.",
   "keywords": [
     "playwright",