@flash-ai-team/flash-test-framework 0.0.7 → 0.0.10

package/README.md

@@ -2,22 +2,53 @@
 
 A powerful, keyword-driven automation framework built on top of Playwright and TypeScript, featuring AI-powered capabilities.
 
-## Installation
+## Quick Start
+
+The easiest way to start a new project is using our CLI.
+
+### Global Installation
+
+Alternatively, you can install the CLI globally to run `flash-test` commands directly.
 
 ```bash
-npm install flash-test-framework
+npm install -g @flash-ai-team/flash-test-framework
 ```
 
-## Setup
+Then you can use:
+
+```bash
+flash-test init <project-name>
+flash-test --version
+```
 
-1.  **Initialize Playwright** (if not already done):
+1.  **Initialize a new project**:
+    Make a new folder and run:
     ```bash
-    npx playwright install
+    flash-test init <project-name>
     ```
+    This will create:
+    *   `package.json` with dependencies.
+    *   `playwright.config.ts` configured for the framework.
+    *   `tsconfig.json`.
+    *   `tests/cases/ExampleTests.ts` and `tests/suites/Example.spec.ts`.
 
-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`.
+2.  **Install dependencies**:
+    ```bash
+    npm install
+    ```
+
+4.  **Run the test**:
+    ```bash
+    npx playwright test
+    ```
+
+## Manual Setup (Optional)
+
+If you prefer to set up manually:
+1.  `npm install @flash-ai-team/flash-test-framework`
+2.  Create `playwright.config.ts` and `tsconfig.json`.
+3.  **Email Reporting**: Create `email.config.json`.
+4.  **AI Features**: Create `ai.config.json`:
     ```json
     {
         "enabled": true,
@@ -29,56 +60,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 +118,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/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const args = process.argv.slice(2);
+const command = args[0];
+if (command === 'init') {
+    const projectName = args[1];
+    initProject(projectName);
+}
+else if (command === '--version' || command === '-v') {
+    printVersion();
+}
+else {
+    console.log('Usage: flash-test init [project-name]');
+    console.log('       flash-test -v / --version');
+    process.exit(1);
+}
+function printVersion() {
+    try {
+        const packageJsonPath = path_1.default.join(__dirname, '..', '..', 'package.json');
+        const packageJson = JSON.parse(fs_1.default.readFileSync(packageJsonPath, 'utf-8'));
+        console.log(`v${packageJson.version}`);
+    }
+    catch (error) {
+        console.error('Error reading version:', error);
+        process.exit(1);
+    }
+}
+function initProject(projectName) {
+    console.log('Initializing Flash Test Project...');
+    let projectDir = process.cwd();
+    let name = "my-flash-test-project";
+    if (projectName) {
+        projectDir = path_1.default.join(process.cwd(), projectName);
+        name = projectName;
+        if (!fs_1.default.existsSync(projectDir)) {
+            fs_1.default.mkdirSync(projectDir);
+            console.log(`Created directory: ${projectName}`);
+        }
+    }
+    // 1. Create Files
+    createFile(path_1.default.join(projectDir, 'package.json'), JSON.stringify({
+        "name": name,
+        "version": "1.0.0",
+        "scripts": {
+            "test": "playwright test"
+        },
+        "devDependencies": {
+            "@flash-ai-team/flash-test-framework": "latest",
+            "@playwright/test": "^1.57.0",
+            "typescript": "^5.9.3"
+        }
+    }, null, 2));
+    createFile(path_1.default.join(projectDir, 'playwright.config.ts'), `
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+    reporter: [
+        ['html', { open: 'never' }],
+        ['list'], // Keep 'list' for console output
+        [require.resolve('@flash-ai-team/flash-test-framework/dist/reporting/CustomReporter.js')],
+        [require.resolve('@flash-ai-team/flash-test-framework/dist/reporting/HtmlReporter.js')]
+    ],
+  use: {
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chrome',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
+`);
+    createFile(path_1.default.join(projectDir, 'tsconfig.json'), JSON.stringify({
+        "compilerOptions": {
+            "target": "es2016",
+            "module": "commonjs",
+            "esModuleInterop": true,
+            "forceConsistentCasingInFileNames": true,
+            "strict": true,
+            "skipLibCheck": true
+        }
+    }, null, 2));
+    createFile(path_1.default.join(projectDir, '.gitignore'), `
+node_modules/
+test-results/
+playwright-report/
+dist/
+`);
+    const testsDir = path_1.default.join(projectDir, 'tests');
+    const casesDir = path_1.default.join(testsDir, 'cases');
+    const suitesDir = path_1.default.join(testsDir, 'suites');
+    if (!fs_1.default.existsSync(testsDir))
+        fs_1.default.mkdirSync(testsDir);
+    if (!fs_1.default.existsSync(casesDir))
+        fs_1.default.mkdirSync(casesDir);
+    if (!fs_1.default.existsSync(suitesDir))
+        fs_1.default.mkdirSync(suitesDir);
+    createFile(path_1.default.join(casesDir, 'ExampleTests.ts'), `
+import { Web, el, TestCase } from '@flash-ai-team/flash-test-framework';
+
+export class ExampleTests {
+
+    @TestCase
+    static async BasicVerify() {
+        await Web.navigateToUrl('https://example.com');
+        await Web.verifyTextPresent('Example Domain');
+        
+        const header = el('h1', 'Header');
+        await Web.verifyElementPresent(header);
+    }
+}
+`);
+    createFile(path_1.default.join(suitesDir, 'Example.spec.ts'), `
+import { test } from '@flash-ai-team/flash-test-framework';
+import { ExampleTests } from '../cases/ExampleTests';
+
+test.describe('Example Suite', () => {
+    test('Basic Verification', async () => {
+        await ExampleTests.BasicVerify();
+    });
+});
+`);
+    console.log('Project initialized successfully!');
+    if (projectName) {
+        console.log(`\nNext steps:\n  cd ${projectName}\n  npm install`);
+    }
+    else {
+        console.log('Run "npm install" to install dependencies.');
+    }
+}
+function createFile(filePath, content) {
+    if (fs_1.default.existsSync(filePath)) {
+        console.log(`Skipping existing file: ${path_1.default.basename(filePath)}`);
+    }
+    else {
+        fs_1.default.writeFileSync(filePath, content.trim());
+        console.log(`Created: ${path_1.default.basename(filePath)}`);
+    }
+}

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,3 +1,4 @@
 import { Suite } from '@playwright/test/reporter';
+export declare function generateReportPath(baseDir?: string, prefix?: string): string;
 export declare function getReportFolder(suite: Suite): string;
 export declare function resetReportFolderCache(): void;

package/dist/reporting/ReporterUtils.js

@@ -33,11 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateReportPath = generateReportPath;
 exports.getReportFolder = getReportFolder;
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flash-ai-team/flash-test-framework",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "A powerful keyword-driven automation framework built on top of Playwright and TypeScript.",
   "keywords": [
     "playwright",
@@ -24,6 +24,9 @@
   "type": "commonjs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "flash-test": "./dist/cli/index.js"
+  },
   "directories": {
     "test": "tests"
   },