qa360 2.3.0 → 2.3.2

package/dist/core/crawler/repl-debug-handler.d.ts

@@ -0,0 +1,105 @@
+/**
+ * REPL Debug Handler
+ *
+ * P1 - Interactive debugging mode for test development
+ *
+ * Supports:
+ * - Interactive JavaScript REPL in browser context
+ * - Page inspection commands
+ * - Selector testing
+ * - Step-by-step test execution
+ * - State inspection and modification
+ * - Screenshot capture on demand
+ *
+ * @see https://playwright.dev/docs/debug
+ */
+export interface REPLConfig {
+    /** Enable color output */
+    color?: boolean;
+    /** Show help on start */
+    showHelp?: boolean;
+    /** Custom command prompt */
+    prompt?: string;
+    /** History file path */
+    historyFile?: string;
+    /** Maximum history entries */
+    maxHistory?: number;
+}
+export interface REPLCommand {
+    /** Command name */
+    name: string;
+    /** Aliases */
+    aliases?: string[];
+    /** Description */
+    description: string;
+    /** Usage example */
+    usage: string;
+    /** Handler function */
+    handler: (args: string[], context: REPLContext) => Promise<string> | string;
+}
+export interface REPLContext {
+    /** Playwright page */
+    page: any;
+    /** Current selector */
+    selector?: string;
+    /** Current element */
+    element?: any;
+    /** Variables */
+    variables: Map<string, any>;
+    /** History */
+    history: string[];
+    /** Command results */
+    lastResult?: any;
+}
+/**
+ * REPL Debug Handler class
+ */
+export declare class REPLDebugHandler {
+    private commands;
+    private config;
+    private context;
+    private running;
+    private readline;
+    constructor(config?: REPLConfig);
+    /**
+     * Register default commands
+     */
+    private registerDefaultCommands;
+    /**
+     * Register a custom command
+     */
+    registerCommand(command: REPLCommand): void;
+    /**
+     * Find command by name or alias
+     */
+    private findCommand;
+    /**
+     * Start the REPL
+     */
+    start(page: any): Promise<void>;
+    /**
+     * Execute a command
+     */
+    private executeCommand;
+    /**
+     * Colorize text for terminal output
+     */
+    private colorize;
+    /**
+     * Get current context
+     */
+    getContext(): REPLContext;
+    /**
+     * Execute a single command programmatically (non-interactive)
+     */
+    execute(page: any, command: string): Promise<any>;
+}
+/**
+ * Factory function to create REPL Debug Handler
+ */
+export declare function createREPLDebugHandler(config?: REPLConfig): REPLDebugHandler;
+/**
+ * Start REPL (convenience function)
+ */
+export declare function startREPL(page: any, config?: REPLConfig): Promise<void>;
+export default REPLDebugHandler;

package/dist/core/crawler/repl-debug-handler.js

@@ -0,0 +1,552 @@
+/**
+ * REPL Debug Handler
+ *
+ * P1 - Interactive debugging mode for test development
+ *
+ * Supports:
+ * - Interactive JavaScript REPL in browser context
+ * - Page inspection commands
+ * - Selector testing
+ * - Step-by-step test execution
+ * - State inspection and modification
+ * - Screenshot capture on demand
+ *
+ * @see https://playwright.dev/docs/debug
+ */
+import { createInterface } from 'readline';
+/**
+ * REPL Debug Handler class
+ */
+export class REPLDebugHandler {
+    commands = new Map();
+    config;
+    context;
+    running = false;
+    readline = null;
+    constructor(config = {}) {
+        this.config = {
+            color: config.color !== false,
+            showHelp: config.showHelp !== false,
+            prompt: config.prompt || 'qa360> ',
+            historyFile: config.historyFile || '.qa360-repl-history',
+            maxHistory: config.maxHistory || 1000,
+        };
+        this.context = {
+            page: null,
+            variables: new Map(),
+            history: [],
+        };
+        this.registerDefaultCommands();
+    }
+    /**
+     * Register default commands
+     */
+    registerDefaultCommands() {
+        // Help command
+        this.registerCommand({
+            name: 'help',
+            aliases: ['h', '?'],
+            description: 'Show available commands',
+            usage: 'help [command]',
+            handler: (args, _context) => {
+                if (args.length === 0) {
+                    const lines = [
+                        '\nAvailable Commands:',
+                        ...Array.from(this.commands.values())
+                            .filter(cmd => cmd.name !== 'exit' && cmd.name !== 'quit')
+                            .map(cmd => `  ${this.colorize(cmd.name.padEnd(12), 'cyan')} - ${cmd.description}`),
+                        '\nType "help <command>" for more details.',
+                        'Type "exit" or "quit" to leave REPL.\n',
+                    ];
+                    return lines.join('\n');
+                }
+                const cmd = this.findCommand(args[0]);
+                if (!cmd) {
+                    return `Unknown command: ${args[0]}`;
+                }
+                return [
+                    `\n${this.colorize(cmd.name, 'cyan')}`,
+                    `  Description: ${cmd.description}`,
+                    `  Usage: ${cmd.usage}`,
+                    cmd.aliases?.length ? `  Aliases: ${cmd.aliases.join(', ')}` : '',
+                ].filter(Boolean).join('\n');
+            },
+        });
+        // Exit command
+        this.registerCommand({
+            name: 'exit',
+            aliases: ['quit', 'q'],
+            description: 'Exit the REPL',
+            usage: 'exit',
+            handler: () => {
+                this.running = false;
+                return 'Goodbye!';
+            },
+        });
+        // Page info command
+        this.registerCommand({
+            name: 'page',
+            description: 'Show current page information',
+            usage: 'page',
+            handler: async (_args, context) => {
+                if (!context.page) {
+                    return 'No page available. Use "set page" first.';
+                }
+                const info = await context.page.evaluate(() => {
+                    return {
+                        url: window.location.href,
+                        title: document.title,
+                        readyState: document.readyState,
+                        viewport: `${window.innerWidth}x${window.innerHeight}`,
+                    };
+                });
+                return [
+                    `\n${this.colorize('Page Information', 'cyan')}`,
+                    `  URL:      ${info.url}`,
+                    `  Title:    ${info.title}`,
+                    `  State:    ${info.readyState}`,
+                    `  Viewport: ${info.viewport}`,
+                ].join('\n');
+            },
+        });
+        // Navigate command
+        this.registerCommand({
+            name: 'goto',
+            description: 'Navigate to a URL',
+            usage: 'goto <url>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: goto <url>';
+                }
+                await context.page.goto(args[0]);
+                return `Navigated to: ${args[0]}`;
+            },
+        });
+        // Screenshot command
+        this.registerCommand({
+            name: 'screenshot',
+            aliases: ['ss'],
+            description: 'Take a screenshot',
+            usage: 'screenshot [filename]',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                const filename = args[0] || `screenshot-${Date.now()}.png`;
+                await context.page.screenshot({ path: filename });
+                return `Screenshot saved to: ${filename}`;
+            },
+        });
+        // Selector command
+        this.registerCommand({
+            name: '$',
+            description: 'Query selector (first match)',
+            usage: '$ <selector>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: $ <selector>';
+                }
+                const selector = args.join(' ');
+                const element = await context.page.locator(selector).first();
+                try {
+                    await element.waitFor({ state: 'attached', timeout: 5000 });
+                    context.selector = selector;
+                    context.element = element;
+                    const info = await context.page.evaluate((sel) => {
+                        const el = document.querySelector(sel);
+                        if (!el)
+                            return null;
+                        return {
+                            tag: el.tagName.toLowerCase(),
+                            id: el.id,
+                            classes: el.className,
+                            text: el.textContent?.substring(0, 50),
+                            visible: el.offsetParent !== null,
+                        };
+                    }, selector);
+                    return [
+                        `\n${this.colorize('Element Found', 'green')}`,
+                        `  Selector: ${selector}`,
+                        `  Tag:      ${info?.tag}`,
+                        `  ID:       ${info?.id || '(none)'}`,
+                        `  Classes:  ${info?.classes || '(none)'}`,
+                        `  Text:     ${info?.text || '(empty)'}`,
+                        `  Visible:  ${info?.visible ? 'yes' : 'no'}`,
+                    ].join('\n');
+                }
+                catch {
+                    return `No element found: ${selector}`;
+                }
+            },
+        });
+        // $$ command (all matches)
+        this.registerCommand({
+            name: '$$',
+            description: 'Query selector (all matches)',
+            usage: '$$ <selector>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: $$ <selector>';
+                }
+                const selector = args.join(' ');
+                const count = await context.page.locator(selector).count();
+                return `Found ${count} element(s) matching: ${selector}`;
+            },
+        });
+        // Click command
+        this.registerCommand({
+            name: 'click',
+            description: 'Click an element',
+            usage: 'click <selector>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: click <selector>';
+                }
+                const selector = args.join(' ');
+                try {
+                    await context.page.locator(selector).first().click();
+                    return `Clicked: ${selector}`;
+                }
+                catch (e) {
+                    return `Error: ${e}`;
+                }
+            },
+        });
+        // Fill command
+        this.registerCommand({
+            name: 'fill',
+            description: 'Fill an input field',
+            usage: 'fill <selector> <value>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length < 2) {
+                    return 'Usage: fill <selector> <value>';
+                }
+                const selector = args[0];
+                const value = args.slice(1).join(' ');
+                try {
+                    await context.page.locator(selector).first().fill(value);
+                    return `Filled ${selector} with: ${value}`;
+                }
+                catch (e) {
+                    return `Error: ${e}`;
+                }
+            },
+        });
+        // Eval command
+        this.registerCommand({
+            name: 'eval',
+            aliases: ['e'],
+            description: 'Evaluate JavaScript in page context',
+            usage: 'eval <javascript>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: eval <javascript>';
+                }
+                const code = args.join(' ');
+                try {
+                    const result = await context.page.evaluate(code);
+                    context.lastResult = result;
+                    // Format output
+                    if (result === null) {
+                        return 'null';
+                    }
+                    if (result === undefined) {
+                        return 'undefined';
+                    }
+                    if (typeof result === 'object') {
+                        return JSON.stringify(result, null, 2);
+                    }
+                    return String(result);
+                }
+                catch (e) {
+                    return `Error: ${e}`;
+                }
+            },
+        });
+        // Wait command
+        this.registerCommand({
+            name: 'wait',
+            description: 'Wait for time or condition',
+            usage: 'wait <ms> | wait for selector <selector>',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args.length === 0) {
+                    return 'Usage: wait <ms> | wait for selector <selector>';
+                }
+                if (args[0] === 'for' && args[1] === 'selector') {
+                    const selector = args.slice(2).join(' ');
+                    try {
+                        await context.page.locator(selector).first().waitFor({ state: 'visible' });
+                        return `Element visible: ${selector}`;
+                    }
+                    catch (e) {
+                        return `Timeout waiting for: ${selector}`;
+                    }
+                }
+                const ms = parseInt(args[0], 10);
+                if (isNaN(ms)) {
+                    return 'Usage: wait <ms>';
+                }
+                await new Promise(resolve => setTimeout(resolve, ms));
+                return `Waited ${ms}ms`;
+            },
+        });
+        // Set command (variables)
+        this.registerCommand({
+            name: 'set',
+            description: 'Set a variable or page',
+            usage: 'set page | set <name> <value>',
+            handler: (args, context) => {
+                if (args.length === 0) {
+                    return `Variables: ${Array.from(context.variables.keys()).join(', ') || '(none)'}`;
+                }
+                if (args[0] === 'page') {
+                    // Page is set externally via start()
+                    return 'Page set via context';
+                }
+                if (args.length < 2) {
+                    return 'Usage: set <name> <value>';
+                }
+                const name = args[0];
+                const value = args.slice(1).join(' ');
+                context.variables.set(name, value);
+                return `Set ${name} = ${value}`;
+            },
+        });
+        // Get command (variables)
+        this.registerCommand({
+            name: 'get',
+            description: 'Get a variable value',
+            usage: 'get <name>',
+            handler: (args, context) => {
+                if (args.length === 0) {
+                    return `Variables: ${Array.from(context.variables.keys()).join(', ') || '(none)'}`;
+                }
+                const value = context.variables.get(args[0]);
+                if (value === undefined) {
+                    return `Variable not found: ${args[0]}`;
+                }
+                return String(value);
+            },
+        });
+        // Console command
+        this.registerCommand({
+            name: 'console',
+            aliases: ['logs'],
+            description: 'Show recent console messages',
+            usage: 'console [clear]',
+            handler: async (args, context) => {
+                if (!context.page) {
+                    return 'No page available';
+                }
+                if (args[0] === 'clear') {
+                    // Clear would need tracking
+                    return 'Console cleared (simulated)';
+                }
+                // Get recent logs
+                const logs = await context.page.evaluate(() => {
+                    return window.__qa360ConsoleLogs || [];
+                });
+                if (logs.length === 0) {
+                    return 'No console logs collected';
+                }
+                return logs.slice(-20).map((log) => `[${log.type}] ${log.text}`).join('\n');
+            },
+        });
+        // History command
+        this.registerCommand({
+            name: 'history',
+            aliases: ['hist'],
+            description: 'Show command history',
+            usage: 'history',
+            handler: (_args, context) => {
+                return context.history.map((cmd, i) => `${i + 1}  ${cmd}`).join('\n');
+            },
+        });
+    }
+    /**
+     * Register a custom command
+     */
+    registerCommand(command) {
+        this.commands.set(command.name, command);
+        if (command.aliases) {
+            for (const alias of command.aliases) {
+                this.commands.set(alias, command);
+            }
+        }
+    }
+    /**
+     * Find command by name or alias
+     */
+    findCommand(name) {
+        return this.commands.get(name);
+    }
+    /**
+     * Start the REPL
+     */
+    async start(page) {
+        this.context.page = page;
+        // Setup console tracking
+        await page.evaluate(() => {
+            window.__qa360ConsoleLogs = [];
+            const originalLog = console.log;
+            const originalError = console.error;
+            const originalWarn = console.warn;
+            console.log = (...args) => {
+                window.__qa360ConsoleLogs.push({ type: 'log', text: args.join(' ') });
+                originalLog.apply(console, args);
+            };
+            console.error = (...args) => {
+                window.__qa360ConsoleLogs.push({ type: 'error', text: args.join(' ') });
+                originalError.apply(console, args);
+            };
+            console.warn = (...args) => {
+                window.__qa360ConsoleLogs.push({ type: 'warn', text: args.join(' ') });
+                originalWarn.apply(console, args);
+            };
+        });
+        this.running = true;
+        if (this.config.showHelp) {
+            console.log(this.colorize('\nQA360 REPL Debug Mode', 'cyan'));
+            console.log('Type "help" for available commands, "exit" to quit\n');
+        }
+        this.readline = createInterface({
+            input: process.stdin,
+            output: process.stdout,
+            prompt: this.config.prompt,
+        });
+        this.readline.prompt();
+        for await (const line of this.readline) {
+            const trimmed = line.trim();
+            if (trimmed) {
+                this.context.history.push(trimmed);
+                await this.executeCommand(trimmed);
+            }
+            if (!this.running) {
+                this.readline.close();
+                break;
+            }
+            this.readline.prompt();
+        }
+    }
+    /**
+     * Execute a command
+     */
+    async executeCommand(input) {
+        const parts = input.match(/^("([^"]*)"|'([^']*)'|[^\s]+)+/g);
+        if (!parts) {
+            console.log('Invalid command');
+            return;
+        }
+        const commandName = parts[0].replace(/^["']|["']$/g, '');
+        const args = parts.slice(1).map(arg => arg.replace(/^["']|["']$/g, ''));
+        const command = this.findCommand(commandName);
+        if (!command) {
+            // Try to evaluate as JavaScript
+            if (this.context.page) {
+                try {
+                    const result = await this.context.page.evaluate(input);
+                    console.log(formatOutput(result));
+                }
+                catch (e) {
+                    console.log(this.colorize(`Error: ${e}`, 'red'));
+                }
+            }
+            else {
+                console.log(this.colorize(`Unknown command: ${commandName}`, 'red'));
+            }
+            return;
+        }
+        try {
+            const result = await command.handler(args, this.context);
+            if (result) {
+                console.log(result);
+            }
+        }
+        catch (e) {
+            console.log(this.colorize(`Error: ${e}`, 'red'));
+        }
+    }
+    /**
+     * Colorize text for terminal output
+     */
+    colorize(text, color) {
+        if (!this.config.color)
+            return text;
+        const colors = {
+            cyan: '\x1b[36m',
+            green: '\x1b[32m',
+            red: '\x1b[31m',
+            yellow: '\x1b[33m',
+            blue: '\x1b[34m',
+            reset: '\x1b[0m',
+        };
+        const code = colors[color] || colors.reset;
+        return `${code}${text}${colors.reset}`;
+    }
+    /**
+     * Get current context
+     */
+    getContext() {
+        return this.context;
+    }
+    /**
+     * Execute a single command programmatically (non-interactive)
+     */
+    async execute(page, command) {
+        this.context.page = page;
+        const parts = command.split(' ');
+        const cmd = this.findCommand(parts[0]);
+        if (!cmd) {
+            throw new Error(`Unknown command: ${parts[0]}`);
+        }
+        return await cmd.handler(parts.slice(1), this.context);
+    }
+}
+/**
+ * Format output for display
+ */
+function formatOutput(value) {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (typeof value === 'object') {
+        return JSON.stringify(value, null, 2);
+    }
+    return String(value);
+}
+/**
+ * Factory function to create REPL Debug Handler
+ */
+export function createREPLDebugHandler(config) {
+    return new REPLDebugHandler(config);
+}
+/**
+ * Start REPL (convenience function)
+ */
+export async function startREPL(page, config) {
+    const handler = new REPLDebugHandler(config);
+    await handler.start(page);
+}
+export default REPLDebugHandler;