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

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-ai-team/flash-test-framework
+npm install -g @flash-ai-team/flash-test-framework
 ```
 
-## Setup
+Then you can use:
 
-1.  **Initialize Playwright** (if not already done):
+```bash
+flash-test init <project-name>
+flash-test --version
+```
+
+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.  **Install dependencies**:
+    ```bash
+    npm install
+    ```
+
+4.  **Run the test**:
+    ```bash
+    npx playwright test
+    ```
+
+## Manual Setup (Optional)
 
-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 `AIWeb`.
+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,

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/keywords/WebUI.d.ts

@@ -116,6 +116,12 @@ export declare class Web {
      * @param timeout - The maximum time to wait in milliseconds (default: 5000).
      */
     static verifyElementNotPresent(to: TestObject, timeout?: number): Promise<void>;
+    /**
+     * Verifies that the specified text is present on the page.
+     * @param text - The text to search for.
+     * @param timeout - The maximum time to wait in milliseconds (default: 5000).
+     */
+    static verifyTextPresent(text: string, timeout?: number): Promise<void>;
     /**
      * Verifies that the element's text matches the expected text.
      * @param to - The TestObject representing the element.

package/dist/keywords/WebUI.js

@@ -253,6 +253,14 @@ class Web {
     static async verifyElementNotPresent(to, timeout = 5000) {
         await (0, test_1.expect)(this.getLocator(to)).toBeHidden({ timeout });
     }
+    /**
+     * Verifies that the specified text is present on the page.
+     * @param text - The text to search for.
+     * @param timeout - The maximum time to wait in milliseconds (default: 5000).
+     */
+    static async verifyTextPresent(text, timeout = 5000) {
+        await (0, test_1.expect)(this.page.locator('body')).toContainText(text, { timeout });
+    }
     /**
      * Verifies that the element's text matches the expected text.
      * @param to - The TestObject representing the element.
@@ -506,6 +514,12 @@ __decorate([
     __metadata("design:paramtypes", [ObjectRepository_1.TestObject, Number]),
     __metadata("design:returntype", Promise)
 ], Web, "verifyElementNotPresent", null);
+__decorate([
+    (0, Keyword_1.Keyword)("Verify Text Present"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Number]),
+    __metadata("design:returntype", Promise)
+], Web, "verifyTextPresent", null);
 __decorate([
     (0, Keyword_1.Keyword)("Verify Element Text"),
     __metadata("design:type", Function),

package/dist/reporting/HtmlReporter.d.ts

@@ -2,11 +2,15 @@ import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@
 declare class HtmlReporter implements Reporter {
     private suiteStartTime;
     private reportPath;
+    private fileCache;
     onBegin(config: FullConfig, suite: Suite): void;
     onEnd(result: FullResult): Promise<void>;
     private testResults;
     onTestEnd(test: TestCase, result: TestResult): void;
     private ansiToHtml;
+    private getFileContent;
+    private getSnippet;
+    private processSteps;
     private generateHtml;
 }
 export default HtmlReporter;

package/dist/reporting/HtmlReporter.js

@@ -40,6 +40,8 @@ class HtmlReporter {
     constructor() {
         this.suiteStartTime = 0;
         this.reportPath = '';
+        // Cache for file contents to avoid repeated reads
+        this.fileCache = new Map();
         // onExit removed as generation is now in onEnd
         this.testResults = [];
     }
@@ -126,22 +128,80 @@ class HtmlReporter {
         html = html.replace(/\u001b\[0m/g, '</span></span></span></span>');
         return html;
     }
+    // New method to get file content with caching
+    getFileContent(filePath) {
+        if (this.fileCache.has(filePath)) {
+            return this.fileCache.get(filePath);
+        }
+        try {
+            if (fs.existsSync(filePath)) {
+                const content = fs.readFileSync(filePath, 'utf-8').split('\n');
+                this.fileCache.set(filePath, content);
+                return content;
+            }
+        }
+        catch (e) {
+            // Ignore errors reading file
+        }
+        return null;
+    }
+    // New method to extract code snippet
+    getSnippet(location) {
+        if (!location || !location.file)
+            return undefined;
+        const lines = this.getFileContent(location.file);
+        if (!lines)
+            return undefined;
+        const line = location.line - 1; // 0-indexed
+        if (line < 0 || line >= lines.length)
+            return undefined;
+        // Get 2 lines before and 2 lines after
+        const start = Math.max(0, line - 2);
+        const end = Math.min(lines.length, line + 3);
+        let snippet = '';
+        const maxLineNumWidth = end.toString().length;
+        for (let i = start; i < end; i++) {
+            const isErrorLine = i === line;
+            const lineNum = (i + 1).toString().padStart(maxLineNumWidth, ' ');
+            const prefix = isErrorLine ? '>' : ' ';
+            snippet += `${prefix} ${lineNum} | ${lines[i]}\n`;
+        }
+        return snippet;
+    }
+    processSteps(steps, depth = 0) {
+        return steps.map(step => {
+            const hasChildren = step.steps && step.steps.length > 0;
+            // Only try to get snippet for failed steps that have a location
+            let codeSnippet;
+            if (step.error && step.location) {
+                codeSnippet = this.getSnippet(step.location);
+            }
+            return {
+                title: step.title,
+                duration: step.duration,
+                error: step.error ? this.ansiToHtml(step.error.stack || step.error.message || '') : undefined,
+                codeSnippet: codeSnippet, // Add codeSnippet here
+                depth: depth,
+                steps: hasChildren ? this.processSteps(step.steps, depth + 1) : []
+            };
+        });
+    }
     generateHtml() {
         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;
+        // Calculate percentages for the pie chart
+        const passPct = totalTests ? (passedTests / totalTests) * 360 : 0;
+        const failPct = totalTests ? (failedTests / totalTests) * 360 : 0;
+        const skipPct = totalTests ? (skippedTests / totalTests) * 360 : 0;
         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
-            })),
+            steps: this.processSteps(item.result.steps),
             error: item.result.error ? this.ansiToHtml(item.result.error.stack || item.result.error.message || '') : undefined,
             screenshot: item.screenshotPath,
             video: item.videoPath
@@ -164,6 +224,7 @@ class HtmlReporter {
                         --fail-color: #f44336;
                         --skip-color: #ff9800;
                         --blue-accent: #007acc;
+                        --code-bg: #0d1117;
                     }
                     body {
                         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -177,40 +238,99 @@ class HtmlReporter {
                     }
                     /* Sidebar styles */
                     .sidebar {
-                        width: 350px;
+                        width: 400px;
                         background-color: var(--sidebar-bg);
                         border-right: 1px solid var(--border-color);
                         display: flex;
                         flex-direction: column;
+                        flex-shrink: 0;
                     }
                     .sidebar-header {
-                        padding: 15px;
+                        padding: 20px;
                         border-bottom: 1px solid var(--border-color);
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        gap: 15px;
                     }
-                    .stats-container {
+                    /* Pie Chart */
+                    .chart-container {
+                        position: relative;
+                        width: 120px;
+                        height: 120px;
+                        border-radius: 50%;
+                        background: conic-gradient(
+                            var(--success-color) 0deg ${passPct}deg,
+                            var(--fail-color) ${passPct}deg ${passPct + failPct}deg,
+                            var(--skip-color) ${passPct + failPct}deg 360deg
+                        );
                         display: flex;
-                        gap: 10px;
-                        margin-bottom: 10px;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                    .chart-inner {
+                        width: 90px;
+                        height: 90px;
+                        background-color: var(--sidebar-bg);
+                        border-radius: 50%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                    .total-text { font-size: 1.5em; font-weight: bold; }
+                    .total-label { font-size: 0.8em; color: #888; }
+
+                    .stats-row {
+                        display: flex;
+                        gap: 15px;
                         font-size: 0.9em;
+                        width: 100%;
+                        justify-content: space-around;
                     }
                     .stat-item {
                         display: flex;
+                        flex-direction: column;
                         align-items: center;
-                        gap: 5px;
+                        cursor: pointer;
+                        padding: 5px 10px;
+                        border-radius: 4px;
+                        transition: background 0.2s;
                     }
-                    .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); }
+                    .stat-item:hover { background-color: var(--hover-color); }
+                    .stat-item.active { background-color: #333; box-shadow: 0 0 0 1px var(--border-color); }
+                    .stat-value { font-weight: bold; font-size: 1.1em; }
+                    .stat-label { font-size: 0.8em; color: #aaa; }
                     
+                    .filter-group {
+                        display: flex;
+                        gap: 5px;
+                        width: 100%;
+                    }
+                    .filter-btn {
+                        flex: 1;
+                        background: #333;
+                        border: 1px solid var(--border-color);
+                        color: #ccc;
+                        padding: 5px;
+                        cursor: pointer;
+                        font-size: 0.85em;
+                    }
+                    .filter-btn.active {
+                        background-color: var(--blue-accent);
+                        color: white;
+                        border-color: var(--blue-accent);
+                    }
+
                     .search-box {
                         width: 100%;
-                        padding: 8px;
-                        background-color: #3c3c3c;
+                        padding: 10px;
+                        background-color: #1e1e1e;
                         border: 1px solid var(--border-color);
                         color: white;
                         border-radius: 4px;
                         box-sizing: border-box;
+                        margin-top: 10px;
                     }
                     
                     .test-list {
@@ -218,130 +338,270 @@ class HtmlReporter {
                         flex: 1;
                     }
                     .test-item {
-                        padding: 10px 15px;
+                        padding: 12px 20px;
                         border-bottom: 1px solid var(--border-color);
                         cursor: pointer;
                         display: flex;
                         align-items: center;
-                        gap: 10px;
+                        gap: 12px;
+                        transition: background 0.1s;
                     }
-                    .test-item:hover, .test-item.active { background-color: var(--hover-color); }
-                    .test-status-icon {
-                        font-size: 1.2em;
-                        width: 20px;
-                        text-align: center;
+                    .test-item:hover, .test-item.active { background-color: var(--hover-color); border-left: 4px solid var(--blue-accent); padding-left: 16px; }
+                    .test-status-indicator {
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 50%;
                     }
+                    .status-passed { background-color: var(--success-color); }
+                    .status-failed { background-color: var(--fail-color); }
+                    .status-skipped { background-color: var(--skip-color); }
+
                     .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; }
+                    .test-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em; }
+                    .test-suite { font-size: 0.8em; color: #888; margin-top: 3px; }
+                    .test-duration { font-size: 0.8em; color: #666; width: 50px; text-align: right; }
 
                     /* Main Content */
                     .main-content {
                         flex: 1;
-                        padding: 20px;
-                        overflow-y: auto;
+                        padding: 0;
+                        overflow-y: hidden;
                         display: none; /* Hidden by default until selected */
+                        flex-direction: column;
                     }
-                    .main-content.active { display: block; }
+                    .main-content.active { display: flex; }
 
-                    .detail-header {
+                    .detail-header-wrapper {
+                        padding: 20px 30px;
                         border-bottom: 1px solid var(--border-color);
-                        padding-bottom: 15px;
-                        margin-bottom: 20px;
+                        background-color: #252526;
+                    }
+                    .detail-title { font-size: 1.6em; margin: 10px 0; font-weight: 300; }
+                    .detail-badges { display: flex; gap: 10px; align-items: center; }
+                    .badge {
+                        padding: 3px 8px;
+                        border-radius: 3px;
+                        font-size: 0.8em;
+                        font-weight: 600;
+                        text-transform: uppercase;
                     }
-                    .detail-title { font-size: 1.5em; margin-bottom: 5px; }
-                    .detail-meta { color: #888; font-size: 0.9em; display: flex; gap: 20px; }
+                    .badge-passed { background-color: rgba(76, 175, 80, 0.2); color: var(--success-color); border: 1px solid var(--success-color); }
+                    .badge-failed { background-color: rgba(244, 67, 54, 0.2); color: var(--fail-color); border: 1px solid var(--fail-color); }
+                    .badge-skipped { background-color: rgba(255, 152, 0, 0.2); color: var(--skip-color); border: 1px solid var(--skip-color); }
 
-                    .section-title {
-                        font-size: 1.1em;
-                        margin: 20px 0 10px 0;
-                        color: #bbb;
-                        border-bottom: 1px solid #333;
-                        padding-bottom: 5px;
+                    .detail-scroll-area {
+                        flex: 1;
+                        padding: 30px;
+                        overflow-y: auto;
                     }
 
-                    /* Steps */
-                    .steps-container {
+                    .section-card {
                         background-color: #252526;
-                        border-radius: 5px;
-                        padding: 10px;
+                        border: 1px solid var(--border-color);
+                        border-radius: 6px;
+                        margin-bottom: 25px;
+                        overflow: hidden;
                     }
-                    .step-row {
-                        padding: 8px;
-                        border-left: 2px solid #555;
-                        margin-bottom: 5px;
+                    .section-header {
+                        padding: 10px 15px;
                         background-color: #2d2d2d;
+                        border-bottom: 1px solid var(--border-color);
+                        font-weight: 600;
+                        color: #bbb;
+                        font-size: 0.9em;
+                        text-transform: uppercase;
+                        letter-spacing: 0.5px;
                     }
-                    .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;
+
+                    /* Steps */
+                    .step-row {
+                        padding: 8px 15px;
+                        border-bottom: 1px solid #333;
+                        display: flex;
+                        gap: 10px;
+                        align-items: flex-start;
+                        font-family: Consolas, monospace;
+                        font-size: 0.9em;
+                        transition: background-color 0.2s;
+                    }
+                    .step-row:last-child { border-bottom: none; }
+                    .step-row:hover { background-color: #2a2d2e; }
+                    .step-status { margin-top: 3px; font-size: 1.2em; line-height: 1; }
+                    .step-content { flex: 1; }
+                    .step-meta { color: #666; font-size: 0.9em; margin-left: 10px; white-space: nowrap; }
+                    
+                    /* Tree Toggle */
+                    .toggle-icon {
+                        display: inline-block;
+                        width: 16px;
+                        text-align: center;
+                        cursor: pointer;
+                        user-select: none;
+                        font-size: 0.8em;
+                        transition: transform 0.1s;
+                        color: #ccc;
+                    }
+                    .step-row.collapsed + .children-container { display: none; }
+                    .step-row.collapsed .toggle-icon { transform: rotate(-90deg); }
+                    
+                    /* Error Box */
+                    .error-box {
+                        padding: 15px;
+                        background-color: rgba(244, 67, 54, 0.1);
+                        border-left: 4px solid var(--fail-color);
+                        margin: 0;
+                    }
+                    .error-message {
+                        color: #ff8a80;
+                        font-size: 1.1em;
+                        margin-bottom: 10px;
                         white-space: pre-wrap;
+                    }
+                    .stack-trace {
+                        background-color: var(--code-bg);
+                        padding: 15px;
+                        border-radius: 4px;
+                        font-family: Consolas, monospace;
+                        color: #d4d4d4;
+                        white-space: pre-wrap;
+                        overflow-x: auto;
+                        border: 1px solid #30363d;
+                    }
+                    
+                    /* Code Snippet */
+                    .code-snippet {
+                        margin-top: 10px;
+                        background-color: #000;
+                        border-radius: 4px;
+                        padding: 10px;
+                        font-family: Consolas, monospace;
+                        font-size: 0.9em;
+                        color: #ccc;
+                        white-space: pre;
                         overflow-x: auto;
-                        line-height: 1.45;
+                        border-left: 3px solid #ffcc00;
                     }
 
                     /* Media */
-                    .media-container {
-                        display: flex;
-                        flex-wrap: wrap;
+                    .media-grid {
+                        display: grid;
+                        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                         gap: 20px;
+                        padding: 20px;
                     }
                     .media-item {
                         background-color: #000;
-                        padding: 5px;
                         border-radius: 4px;
                         border: 1px solid var(--border-color);
+                        overflow: hidden;
                     }
-                    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;
+                    .media-header {
+                        padding: 8px 12px;
+                        background-color: #333;
+                        color: #ccc;
+                        font-size: 0.85em;
+                        border-bottom: 1px solid #444;
+                    }
+                    img, video { width: 100%; height: auto; display: block; }
+
+                    .copy-btn {
+                        float: right;
+                        background: transparent;
+                        border: 1px solid #555;
+                        color: #aaa;
+                        cursor: pointer;
+                        padding: 2px 8px;
+                        border-radius: 3px;
                     }
+                    .copy-btn:hover { background: #333; color: white; }
+
                 </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 class="chart-container">
+                            <div class="chart-inner">
+                                <div class="total-text">${totalTests}</div>
+                                <div class="total-label">TESTS</div>
+                            </div>
                         </div>
-                        <input type="text" class="search-box" placeholder="Filter tests..." id="searchInput" onkeyup="filterTests()">
+                        
+                        <div class="stats-row">
+                            <div class="stat-item" onclick="setFilter('passed')" title="Show Passed">
+                                <span class="stat-value" style="color:var(--success-color)">${passedTests}</span>
+                                <span class="stat-label">Passed</span>
+                            </div>
+                            <div class="stat-item" onclick="setFilter('failed')" title="Show Failed">
+                                <span class="stat-value" style="color:var(--fail-color)">${failedTests}</span>
+                                <span class="stat-label">Failed</span>
+                            </div>
+                            <div class="stat-item" onclick="setFilter('skipped')" title="Show Skipped">
+                                <span class="stat-value" style="color:var(--skip-color)">${skippedTests}</span>
+                                <span class="stat-label">Skipped</span>
+                            </div>
+                        </div>
+
+                        <div class="filter-group">
+                            <button class="filter-btn active" onclick="setFilter('all')">All</button>
+                            <button class="filter-btn" onclick="setFilter('failed')">Failures</button>
+                        </div>
+
+                        <input type="text" class="search-box" placeholder="Search 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 class="empty-state">
+                        <div style="text-align:center">
+                            <div style="font-size:3em; margin-bottom:10px">🧪</div>
+                            <div>Select a test to view execution details</div>
+                        </div>
+                    </div>
                 </div>
 
                 <script>
                     const data = ${resultsData};
                     let currentId = null;
+                    let currentFilter = 'all';
+
+                    function setFilter(filter) {
+                        currentFilter = filter;
+                        // Update buttons
+                        document.querySelectorAll('.stat-item').forEach(el => el.classList.remove('active'));
+                        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
+                        
+                        if (filter === 'all') document.querySelector('button[onclick="setFilter(\\'all\\')"]').classList.add('active');
+                        else if (filter === 'failed') document.querySelector('button[onclick="setFilter(\\'failed\\')"]').classList.add('active');
+                        
+                        filterTests();
+                    }
+
+                    function filterTests() {
+                        const query = document.getElementById('searchInput').value.toLowerCase();
+                        const filtered = data.filter(item => {
+                            const matchesSearch = item.title.toLowerCase().includes(query) || item.suite.toLowerCase().includes(query);
+                            const matchesFilter = currentFilter === 'all' ? true : 
+                                                currentFilter === 'failed' ? (item.status === 'failed' || item.status === 'timedOut') :
+                                                item.status === currentFilter;
+                            return matchesSearch && matchesFilter;
+                        });
+                        renderList(filtered);
+                    }
 
                     function renderList(items) {
                         const container = document.getElementById('testList');
+                        if (items.length === 0) {
+                            container.innerHTML = '<div style="padding:20px; text-align:center; color:#666">No tests match current filter</div>';
+                            return;
+                        }
                         container.innerHTML = items.map(item => {
-                            const icon = item.status === 'passed' ? '✅' : item.status === 'failed' ? '❌' : '⚠️';
+                            const statusClass = item.status === 'passed' ? 'status-passed' : 
+                                              (item.status === 'failed' || item.status === 'timedOut') ? 'status-failed' : 'status-skipped';
                             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-status-indicator \${statusClass}"></div>
                                         <div class="test-info">
                                             <div class="test-title" title="\${item.title}">\${item.title}</div>
                                             <div class="test-suite">\${item.suite}</div>
@@ -351,70 +611,115 @@ class HtmlReporter {
                         }).join('');
                     }
 
+                    function toggleStep(element) {
+                        const row = element.closest('.step-row');
+                        row.classList.toggle('collapsed');
+                        const icon = row.querySelector('.toggle-icon');
+                        if (row.classList.contains('collapsed')) {
+                             icon.textContent = '▶';
+                        } else {
+                             icon.textContent = '▼';
+                        }
+                    }
+
+                    function generateStepTreeHtml(step) {
+                         const hasChildren = step.steps && step.steps.length > 0;
+                         const isPassed = !step.error;
+                         // Collapse by default if passed and has children
+                         const isCollapsed = hasChildren && isPassed;
+                         const collapsedClass = isCollapsed ? 'collapsed' : '';
+                         const icon = hasChildren ? (isCollapsed ? '▶' : '▼') : '';
+                         
+                         const statusIcon = step.error ? '❌' : '✓';
+                         const style = step.error ? 'color:var(--fail-color)' : 'color:var(--success-color)';
+                         
+                         let childHtml = '';
+                         if (hasChildren) {
+                             childHtml = \`<div class="children-container">\${step.steps.map(generateStepTreeHtml).join('')}</div>\`;
+                         }
+                         
+                         return \`
+                            <div class="step-wrapper">
+                                <div class="step-row \${collapsedClass}" style="padding-left: \${15 + (step.depth * 20)}px" >
+                                    \${hasChildren ? \`<span class="toggle-icon" onclick="toggleStep(this)">\${icon}</span>\` : '<span style="width:16px;display:inline-block"></span>'}
+                                    <div class="step-status" style="\${style}">\${statusIcon}</div>
+                                    <div class="step-content">
+                                        <div>\${step.title}</div>
+                                        \${step.error ? \`<div style="margin-top:5px; color:#ff8a80; font-size:0.9em">\${step.error}</div>\` : ''}
+                                        \${step.codeSnippet ? \`<div class="code-snippet">\${step.codeSnippet}</div>\` : ''}
+                                    </div>
+                                    <div class="step-meta">\${step.duration}ms</div>
+                                </div>
+                                \${childHtml}
+                            </div>
+                         \`;
+                    }
+                    
                     function selectTest(id) {
                         currentId = id;
-                        renderList(data); // Re-render to update active state
+                        filterTests(); // 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 statusClass = test.status === 'passed' ? 'badge-passed' : 
+                                          (test.status === 'failed' || test.status === 'timedOut') ? 'badge-failed' : 'badge-skipped';
                         
-                        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('');
+                        // Steps (using tree renderer)
+                        const stepsHtml = test.steps.map(generateStepTreeHtml).join('');
 
+                        // Media
                         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 class="media-header">Screenshot <a href="\${test.screenshot}" target="_blank" style="float:right; color:#4dabf7; text-decoration:none">Open New Tab</a></div>
+                                    <img src="\${test.screenshot}" 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 class="media-header">Video</div>
+                                    <video src="\${test.video}" 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-header-wrapper">
                                 <div class="detail-meta">
-                                    <span>Suite: \${test.suite}</span>
-                                    <span>Duration: \${test.duration}ms</span>
+                                    <span class="badge \${statusClass}">\${test.status}</span>
+                                    <span>\${test.suite}</span>
+                                    <span style="margin-left:auto">Duration: \${test.duration}ms</span>
                                 </div>
-                                \${test.error ? \`<div class="step-error" style="margin-top:10px">\${test.error}</div>\` : ''}
+                                <div class="detail-title">\${test.title}</div>
                             </div>
+                            
+                            <div class="detail-scroll-area">
+                                \${test.error ? \`
+                                    <div class="section-card error-box">
+                                        <div style="display:flex; justify-content:space-between; margin-bottom:10px">
+                                            <strong style="color:var(--fail-color)">Error Details</strong>
+                                        </div>
+                                        <div class="stack-trace">\${test.error}</div>
+                                    </div>
+                                \` : ''}
 
-                            <div class="section-title">Execution Steps</div>
-                            <div class="steps-container">
-                                \${stepsHtml}
-                            </div>
+                                <div class="section-card">
+                                    <div class="section-header">Execution Steps</div>
+                                    <div class="steps-tree-container">
+                                        \${stepsHtml}
+                                    </div>
+                                </div>
 
-                            \${test.screenshot || test.video ? \`<div class="section-title">Artifacts</div><div class="media-container">\${mediaHtml}</div>\` : ''}
+                                \${test.screenshot || test.video ? \`
+                                    <div class="section-card">
+                                        <div class="section-header">Artifacts</div>
+                                        <div class="media-grid">\${mediaHtml}</div>
+                                    </div>
+                                \` : ''}
+                            </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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flash-ai-team/flash-test-framework",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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"
   },