@testsmith/perfornium 0.4.0 → 0.6.0

package/dist/cli/cli.js

@@ -81,6 +81,7 @@ program
     .option('-o, --output <file>', 'Output file for recorded scenario')
     .option('--viewport <viewport>', 'Browser viewport size (e.g., 1920x1080)')
     .option('--base-url <url>', 'Base URL to relativize recorded URLs')
+    .option('-b, --browser <browser>', 'Browser to use: chromium, chrome, msedge, firefox, webkit', 'chromium')
     .option('-f, --format <format>', 'Output format: yaml, json, or typescript', 'yaml')
     .action(async (url, options) => {
     // Auto-determine file extension if output not specified
@@ -97,7 +98,8 @@ program
         output: options.output,
         format: options.format,
         viewport: options.viewport,
-        baseUrl: options.baseUrl
+        baseUrl: options.baseUrl,
+        browser: options.browser
     });
 });
 // ============================================

package/dist/config/types/global-config.d.ts

@@ -40,7 +40,7 @@ export interface FakerConfig {
     seed?: number;
 }
 export interface BrowserConfig {
-    type: 'chromium' | 'firefox' | 'webkit';
+    type: 'chromium' | 'firefox' | 'webkit' | 'msedge' | 'chrome';
     headless?: boolean;
     viewport?: {
         width: number;
@@ -50,6 +50,15 @@ export interface BrowserConfig {
     base_url?: string;
     highlight?: boolean | HighlightConfig;
     clear_storage?: boolean | ClearStorageConfig;
+    /** Capture screenshot on test failure */
+    screenshot_on_failure?: boolean | ScreenshotConfig;
+}
+export interface ScreenshotConfig {
+    enabled: boolean;
+    /** Directory to save screenshots (default: 'screenshots') */
+    output_dir?: string;
+    /** Capture full page screenshot (default: true) */
+    full_page?: boolean;
 }
 export interface ClearStorageConfig {
     local_storage?: boolean;

package/dist/core/test-runner.js

@@ -290,7 +290,8 @@ class TestRunner {
                 viewport: browserConfig.viewport,
                 slow_mo: browserConfig.slow_mo,
                 highlight: browserConfig.highlight,
-                clear_storage: browserConfig.clear_storage
+                clear_storage: browserConfig.clear_storage,
+                screenshot_on_failure: browserConfig.screenshot_on_failure
             };
             const handler = new handler_3.WebHandler(webConfig);
             await handler.initialize();

package/dist/dashboard/server.js

@@ -278,9 +278,11 @@ class DashboardServer {
     async handleRunTest(req, res) {
         const body = await this.readBody(req);
         const { testPath, options } = JSON.parse(body);
+        // Normalize the test path to use native separators for the OS
+        const normalizedTestPath = path.normalize(testPath);
         const testId = `run-${Date.now()}`;
-        const testName = path.basename(testPath).replace(/\.(yml|yaml|json)$/, '');
-        const args = ['run', testPath];
+        const testName = path.basename(normalizedTestPath).replace(/\.(yml|yaml|json)$/, '');
+        const args = ['run', normalizedTestPath];
         if (options?.verbose)
             args.push('-v');
         if (options?.report)
@@ -574,18 +576,21 @@ class DashboardServer {
                         }
                         const stat = await fs.stat(fullPath);
                         const relativePath = path.relative(baseDir, fullPath);
-                        // Detect test type from content or path
+                        // Detect test type from content or path (use forward slashes for cross-platform matching)
+                        const normalizedPath = fullPath.replace(/\\/g, '/');
                         let testType = 'api';
-                        if (content.includes('protocol: web') || content.includes('playwright') || fullPath.includes('/web/')) {
+                        if (content.includes('protocol: web') || content.includes('playwright') || normalizedPath.includes('/web/')) {
                             testType = 'web';
                         }
-                        else if (content.includes('protocol: http') || content.includes('protocol: https') || fullPath.includes('/api/')) {
+                        else if (content.includes('protocol: http') || content.includes('protocol: https') || normalizedPath.includes('/api/')) {
                             testType = 'api';
                         }
+                        // Normalize paths to forward slashes for cross-platform compatibility
+                        const normalizedRelativePath = relativePath.replace(/\\/g, '/');
                         tests.push({
                             name: entry.name.replace(/\.(yml|yaml|json)$/, ''),
-                            path: fullPath,
-                            relativePath,
+                            path: fullPath, // Keep native path for filesystem operations
+                            relativePath: normalizedRelativePath, // Use forward slashes for display/URLs
                             type: testType,
                             lastModified: stat.mtime.toISOString()
                         });
@@ -926,7 +931,10 @@ class DashboardServer {
       <svg viewBox="0 0 128 128"><defs><linearGradient id="lg1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00d4ff"/><stop offset="100%" stop-color="#9c40ff"/></linearGradient><linearGradient id="lg2" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#00d4ff"/><stop offset="100%" stop-color="#9c40ff"/></linearGradient></defs><rect x="4" y="4" width="120" height="120" rx="24" fill="#0f0f23"/><rect x="32" y="28" width="12" height="72" rx="6" fill="url(#lg1)"/><path d="M 38 28 L 62 28 C 88 28 88 60 62 60 L 38 60" fill="none" stroke="url(#lg1)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><rect x="76" y="68" width="8" height="32" rx="4" fill="url(#lg2)" opacity="0.9"/><rect x="88" y="54" width="8" height="46" rx="4" fill="url(#lg1)" opacity="0.9"/></svg>
       Perfornium Dashboard
     </div>
-    <div id="connectionStatus"></div>
+    <div style="display: flex; align-items: center; gap: 16px;">
+      <div id="workersStatus"></div>
+      <div id="connectionStatus"></div>
+    </div>
   </div>
 
   <div class="container">
@@ -1037,8 +1045,8 @@ class DashboardServer {
     function initWebSocket() {
       const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
       ws = new WebSocket(protocol + '//' + location.host);
-      ws.onopen = () => { document.getElementById('connectionStatus').innerHTML = '<span class="live-badge">Connected</span>'; };
-      ws.onclose = () => { document.getElementById('connectionStatus').innerHTML = ''; setTimeout(initWebSocket, 3000); };
+      ws.onopen = () => { document.getElementById('connectionStatus').innerHTML = '<span class="live-badge">Dashboard</span>'; };
+      ws.onclose = () => { document.getElementById('connectionStatus').innerHTML = '<span style="color: var(--text-secondary); font-size: 12px;">Reconnecting...</span>'; setTimeout(initWebSocket, 3000); };
       ws.onmessage = (e) => handleMessage(JSON.parse(e.data));
     }
 
@@ -1067,10 +1075,17 @@ class DashboardServer {
         workersData = await res.json();
         const section = document.getElementById('workersSection');
         const info = document.getElementById('workersInfo');
+        const headerStatus = document.getElementById('workersStatus');
         if (workersData.available && workersData.workers.length > 0) {
           section.style.display = 'block';
           const totalCapacity = workersData.workers.reduce((sum, w) => sum + (w.capacity || 0), 0);
-          info.textContent = '(' + workersData.workers.length + ' workers, ' + totalCapacity + ' total capacity)';
+          const workerCount = workersData.workers.length;
+          info.textContent = '(' + workerCount + ' workers, ' + totalCapacity + ' total capacity)';
+          // Show workers info in header
+          const workerNames = workersData.workers.map(w => w.name || (w.host + ':' + w.port)).join(', ');
+          headerStatus.innerHTML = '<span style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: linear-gradient(135deg, #9c40ff 0%, #00d4ff 100%); border-radius: 20px; font-size: 12px; color: white; font-weight: 500; cursor: help;" title="' + workerNames + '"><span style="width: 8px; height: 8px; background: white; border-radius: 50%; animation: pulse 1.5s infinite;"></span>' + workerCount + ' Worker' + (workerCount > 1 ? 's' : '') + '</span>';
+        } else {
+          headerStatus.innerHTML = '';
         }
       } catch (e) { console.error('Failed to load workers:', e); }
     }

package/dist/protocols/web/handler.d.ts

@@ -47,4 +47,8 @@ export declare class WebHandler implements ProtocolHandler {
      * Highlight an element before interacting with it (for debugging)
      */
     private highlightElement;
+    /**
+     * Capture a screenshot when a test step fails
+     */
+    private captureFailureScreenshot;
 }

package/dist/protocols/web/handler.js

@@ -1,8 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebHandler = void 0;
 const playwright_1 = require("playwright");
 const logger_1 = require("../../utils/logger");
+const path = __importStar(require("path"));
+const fs = __importStar(require("fs"));
 const core_web_vitals_1 = require("./core-web-vitals");
 class WebHandler {
     constructor(config) {
@@ -249,6 +284,23 @@ class WebHandler {
             const shouldRecordError = measurableCommands.includes(action.command);
             // Get verification metrics from error if available (attached by measureVerificationStep)
             const verificationMetrics = error.verificationMetrics;
+            // Capture screenshot on failure if enabled
+            let screenshotPath;
+            if (this.config.screenshot_on_failure) {
+                logger_1.logger.debug(`Screenshot on failure enabled, attempting capture for VU ${context.vu_id}`);
+                try {
+                    const page = this.pages.get(context.vu_id);
+                    if (page && !page.isClosed()) {
+                        screenshotPath = await this.captureFailureScreenshot(page, context.vu_id, action.command);
+                    }
+                    else {
+                        logger_1.logger.warn(`Cannot capture screenshot: page is ${page ? 'closed' : 'not found'} for VU ${context.vu_id}`);
+                    }
+                }
+                catch (screenshotError) {
+                    logger_1.logger.warn(`Failed to capture failure screenshot: ${screenshotError.message}`);
+                }
+            }
             return {
                 success: false,
                 error: error.message,
@@ -259,7 +311,8 @@ class WebHandler {
                     command: action.command,
                     error_type: error.constructor.name,
                     error_stack: error.stack?.split('\n').slice(0, 3).join('; '),
-                    verification_metrics: verificationMetrics
+                    verification_metrics: verificationMetrics,
+                    screenshot: screenshotPath
                 }
             };
         }
@@ -500,6 +553,12 @@ class WebHandler {
                 case 'chromium':
                     browser = await playwright_1.chromium.launch(launchOptions);
                     break;
+                case 'chrome':
+                    browser = await playwright_1.chromium.launch({ ...launchOptions, channel: 'chrome' });
+                    break;
+                case 'msedge':
+                    browser = await playwright_1.chromium.launch({ ...launchOptions, channel: 'msedge' });
+                    break;
                 case 'firefox':
                     browser = await playwright_1.firefox.launch(launchOptions);
                     break;
@@ -507,7 +566,7 @@ class WebHandler {
                     browser = await playwright_1.webkit.launch(launchOptions);
                     break;
                 default:
-                    throw new Error(`Unsupported browser type: ${browserType}`);
+                    throw new Error(`Unsupported browser type: ${browserType}. Supported: chromium, chrome, msedge, firefox, webkit`);
             }
             logger_1.logger.debug(`VU ${vuId}: Launched enhanced ${browserType} browser with Web Vitals support`);
             return browser;
@@ -737,5 +796,34 @@ class WebHandler {
             logger_1.logger.debug(`Failed to highlight element ${selector}:`, error);
         }
     }
+    /**
+     * Capture a screenshot when a test step fails
+     */
+    async captureFailureScreenshot(page, vuId, command) {
+        const screenshotConfig = this.config.screenshot_on_failure;
+        // Parse config - can be boolean or ScreenshotConfig object
+        let outputDir = 'screenshots';
+        let fullPage = true;
+        if (typeof screenshotConfig === 'object') {
+            outputDir = screenshotConfig.output_dir || 'screenshots';
+            fullPage = screenshotConfig.full_page !== false;
+        }
+        // Ensure directory exists
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+        // Generate unique filename with timestamp
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        const sanitizedCommand = command.replace(/[^a-zA-Z0-9_-]/g, '_');
+        const filename = `failure_vu${vuId}_${sanitizedCommand}_${timestamp}.png`;
+        const screenshotPath = path.join(outputDir, filename);
+        // Capture the screenshot
+        await page.screenshot({
+            path: screenshotPath,
+            fullPage
+        });
+        logger_1.logger.info(`📸 Screenshot captured: ${screenshotPath}`);
+        return screenshotPath;
+    }
 }
 exports.WebHandler = WebHandler;

package/dist/recorder/native-recorder.d.ts

@@ -4,6 +4,7 @@ export interface NativeRecorderOptions {
     viewport?: string;
     baseUrl?: string;
     device?: string;
+    browser?: 'chromium' | 'chrome' | 'msedge' | 'firefox' | 'webkit';
 }
 /**
  * Native Playwright Recorder

package/dist/recorder/native-recorder.js

@@ -78,6 +78,18 @@ async function startNativeRecording(url, options = {}) {
     logger_1.logger.info('');
     // Build playwright codegen arguments
     const args = ['codegen', '--output', tempFile];
+    const browserType = options.browser || 'chromium';
+    // Add browser option - playwright codegen uses --browser for channel selection
+    if (browserType === 'msedge') {
+        args.push('--browser', 'chromium', '--channel', 'msedge');
+    }
+    else if (browserType === 'chrome') {
+        args.push('--browser', 'chromium', '--channel', 'chrome');
+    }
+    else if (browserType === 'firefox' || browserType === 'webkit') {
+        args.push('--browser', browserType);
+    }
+    // chromium is the default, no need to specify
     if (options.viewport) {
         const [width, height] = options.viewport.split('x');
         args.push('--viewport-size', `${width},${height}`);
@@ -196,7 +208,7 @@ async function startNativeRecording(url, options = {}) {
     const outputFile = options.output || getDefaultOutputFile(format);
     const outputPath = path.resolve(outputFile);
     logger_1.logger.info(`\nConverting recording to ${format.toUpperCase()} format...`);
-    const converter = new PlaywrightToPerfornium(playwrightCode, savedWaitPoints, url, options.baseUrl);
+    const converter = new PlaywrightToPerfornium(playwrightCode, savedWaitPoints, url, options.baseUrl, options.browser);
     switch (format) {
         case 'typescript':
             fs.writeFileSync(outputPath, converter.toTypeScript());
@@ -236,10 +248,11 @@ function getDefaultOutputFile(format) {
  * Converts Playwright codegen output to Perfornium formats
  */
 class PlaywrightToPerfornium {
-    constructor(playwrightCode, waitPoints, startUrl, baseUrl) {
+    constructor(playwrightCode, waitPoints, startUrl, baseUrl, browserType) {
         this.actions = [];
         this.waitPoints = waitPoints;
         this.baseUrl = baseUrl || new URL(startUrl).origin;
+        this.browserType = browserType || 'chromium';
         this.parsePlaywrightCode(playwrightCode);
     }
     parsePlaywrightCode(code) {
@@ -416,7 +429,7 @@ class PlaywrightToPerfornium {
             description: `Recorded on ${new Date().toISOString()} using Playwright codegen`,
             global: {
                 base_url: this.baseUrl,
-                browser: { type: 'chromium', headless: false },
+                browser: { type: this.browserType, headless: false },
                 think_time: '1-3'
             },
             load: {
@@ -466,7 +479,7 @@ class PlaywrightToPerfornium {
 
 const testConfig = test('Recorded Web Scenario')
   .baseUrl('${this.baseUrl}')
-  .withBrowser('chromium', {
+  .withBrowser('${this.browserType}', {
     headless: process.env.HEADLESS !== 'false',
     viewport: { width: 1920, height: 1080 }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testsmith/perfornium",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Flexible performance testing framework for REST, SOAP, and web applications",
   "author": "TestSmith",
   "license": "MIT",