@xtest-cli/cli/dist/commands/browser.js

CLI for xtest.ing - AI-powered test generation platform

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.browserCommand = void 0;
const commander_1 = require("commander");
const chalk_1 = __importDefault(require("chalk"));
const ora_1 = __importDefault(require("ora"));
const inquirer_1 = __importDefault(require("inquirer"));
const controller_1 = require("../browser/controller");
const config_1 = require("../utils/config");
// Browser type icons
const browserIcons = {
    chromium: 'Chrome',
    firefox: 'Firefox',
    webkit: 'Safari',
};
// Mode descriptions
const modeDescriptions = {
    inspector: 'Browser with DevTools for debugging',
    headed: 'Normal browser window',
    headless: 'No visible browser (background mode)',
};
exports.browserCommand = new commander_1.Command('browser')
    .description('Control browser sessions locally')
    .option('-s, --session <id>', 'Session ID to connect to')
    .option('-m, --mode <mode>', 'Browser mode: inspector, headed, headless', 'headed')
    .option('-b, --browser <type>', 'Browser type: chromium, firefox, webkit', 'chromium')
    .option('--devtools', 'Open DevTools automatically', true)
    .option('--slow-mo <ms>', 'Slow down actions by specified milliseconds', '100')
    .option('--record', 'Record the session locally')
    .option('-i, --interactive', 'Interactive mode to select options')
    .action(async (options) => {
    try {
        // Get authentication config
        const config = await (0, config_1.getConfig)();
        if (!config.apiKey) {
            console.log('\n' + chalk_1.default.yellow('Warning: Not authenticated'));
            console.log(chalk_1.default.gray('Please login first: ') + chalk_1.default.cyan('xtest auth'));
            return;
        }
        let browserOptions = {
            mode: options.mode,
            browserType: options.browser,
            devtools: options.devtools && options.mode !== 'headless',
            slowMo: parseInt(options.slowMo),
            record: options.record,
        };
        // Interactive mode
        if (options.interactive && !options.session) {
            console.log('\n' + chalk_1.default.cyan.bold('Browser Session Setup\n'));
            const answers = await inquirer_1.default.prompt([
                {
                    type: 'list',
                    name: 'browserType',
                    message: 'Select browser:',
                    choices: [
                        { name: `${browserIcons.chromium} Chromium (Recommended)`, value: 'chromium' },
                        { name: `${browserIcons.firefox} Firefox`, value: 'firefox' },
                        { name: `${browserIcons.webkit} WebKit (Safari)`, value: 'webkit' },
                    ],
                    default: 'chromium',
                },
                {
                    type: 'list',
                    name: 'mode',
                    message: 'Select mode:',
                    choices: [
                        { name: '👁️  Headed - Normal browser window', value: 'headed' },
                        { name: '🔍 Inspector - Browser with DevTools', value: 'inspector' },
                        { name: '👻 Headless - Background mode', value: 'headless' },
                    ],
                    default: 'headed',
                },
                {
                    type: 'confirm',
                    name: 'record',
                    message: 'Record the session?',
                    default: false,
                    when: (answers) => answers.mode !== 'headless',
                },
                {
                    type: 'list',
                    name: 'slowMo',
                    message: 'Action speed:',
                    choices: [
                        { name: '⚡ Fast (no delay)', value: '0' },
                        { name: '🚶 Normal (100ms delay)', value: '100' },
                        { name: '🐌 Slow (500ms delay)', value: '500' },
                        { name: '🐢 Very slow (1000ms delay)', value: '1000' },
                    ],
                    default: '100',
                },
            ]);
            browserOptions = {
                ...browserOptions,
                ...answers,
                slowMo: parseInt(answers.slowMo),
                devtools: answers.mode === 'inspector',
            };
        }
        // Generate session ID if not provided
        const sessionId = options.session || `cli-${Date.now()}`;
        // Show session preview
        console.log('\n' + chalk_1.default.cyan('═'.repeat(60)));
        console.log(chalk_1.default.cyan.bold('  Browser Session Configuration'));
        console.log(chalk_1.default.cyan('═'.repeat(60)) + '\n');
        console.log(chalk_1.default.white('  Session ID: ') + chalk_1.default.yellow(sessionId));
        console.log(chalk_1.default.white('  Browser: ') + chalk_1.default.cyan(`${browserIcons[browserOptions.browserType]} (${browserOptions.browserType})`));
        console.log(chalk_1.default.white('  Mode: ') + chalk_1.default.cyan(browserOptions.mode) + chalk_1.default.gray(` - ${modeDescriptions[browserOptions.mode]}`));
        console.log(chalk_1.default.white('  Server: ') + chalk_1.default.cyan(config.serverUrl));
        if (browserOptions.record) {
            console.log(chalk_1.default.white('  Recording: ') + chalk_1.default.green('Enabled'));
        }
        if (browserOptions.slowMo > 0) {
            console.log(chalk_1.default.white('  Action delay: ') + chalk_1.default.yellow(`${browserOptions.slowMo}ms`));
        }
        console.log('\n' + chalk_1.default.cyan('═'.repeat(60)) + '\n');
        const spinner = (0, ora_1.default)({
            text: 'Initializing browser session...',
            color: 'cyan',
        }).start();
        spinner.text = `Launching ${browserOptions.browserType} browser...`;
        // Create browser controller
        const controller = new controller_1.BrowserController({
            sessionId,
            serverUrl: config.serverUrl,
            apiKey: config.apiKey,
            browserOptions,
        });
        // Update spinner during connection
        controller.on('connecting', () => {
            spinner.text = 'Connecting to server...';
        });
        controller.on('connected', () => {
            spinner.text = 'Establishing control...';
        });
        // Start the browser session
        await controller.start();
        spinner.succeed('Browser session started');
        console.log('\n' + chalk_1.default.green.bold('✓ Browser Session Active!'));
        console.log(chalk_1.default.gray('Session ID: ') + chalk_1.default.white(sessionId));
        console.log(chalk_1.default.gray('Browser: ') + chalk_1.default.white(`${browserIcons[browserOptions.browserType]} (${browserOptions.browserType})`));
        console.log(chalk_1.default.gray('Mode: ') + chalk_1.default.white(browserOptions.mode));
        console.log(chalk_1.default.gray('URL: ') + chalk_1.default.white(config.serverUrl));
        if (browserOptions.mode === 'inspector') {
            console.log(chalk_1.default.gray('\nDevTools Tips:'));
            console.log(chalk_1.default.gray('  - Use Elements panel to inspect page structure'));
            console.log(chalk_1.default.gray('  - Use Console to run JavaScript'));
            console.log(chalk_1.default.gray('  - Use Network panel to monitor requests'));
            console.log(chalk_1.default.gray('  - Press Ctrl+C to end session'));
        }
        else if (browserOptions.mode === 'headed') {
            console.log(chalk_1.default.gray('\nBrowser Control:'));
            console.log(chalk_1.default.gray('  - Interact with the browser normally'));
            console.log(chalk_1.default.gray('  - Close the browser window to end session'));
            console.log(chalk_1.default.gray('  - Or press Ctrl+C in terminal'));
        }
        else {
            console.log(chalk_1.default.gray('\nHeadless Mode:'));
            console.log(chalk_1.default.gray('  - Browser is running invisibly'));
            console.log(chalk_1.default.gray('  - Perfect for automation scripts'));
            console.log(chalk_1.default.gray('  - Press Ctrl+C to end session'));
        }
        if (browserOptions.record) {
            console.log(chalk_1.default.gray('\n🎥 Recording:'));
            console.log(chalk_1.default.gray('  • Session is being recorded'));
            console.log(chalk_1.default.gray('  • Video will be saved when session ends'));
        }
        console.log('\n' + chalk_1.default.cyan('═'.repeat(60)) + '\n');
        // Handle graceful shutdown
        process.on('SIGINT', async () => {
            console.log('\n');
            const shutdownSpinner = (0, ora_1.default)({
                text: 'Stopping browser session...',
                color: 'yellow',
            }).start();
            await controller.stop();
            shutdownSpinner.succeed('Browser session closed');
            if (browserOptions.record) {
                console.log(chalk_1.default.green('✅ Recording saved'));
            }
            console.log(chalk_1.default.gray('\nThank you for using xtest CLI!\n'));
            process.exit(0);
        });
        // Keep the process running
        await new Promise(() => { });
    }
    catch (error) {
        console.error('\n' + chalk_1.default.red('❌ Failed to start browser session'));
        console.error(chalk_1.default.gray(`   ${error.message}`));
        if (error.message.includes('ECONNREFUSED')) {
            console.error(chalk_1.default.yellow('\nTip: Make sure the xtest server is running'));
        }
        process.exit(1);
    }
});
// Add subcommand to list available browser types
exports.browserCommand
    .command('list')
    .description('List available browser types and modes')
    .action(() => {
    console.log('\n' + chalk_1.default.cyan.bold('Available Browsers:'));
    console.log();
    console.log(chalk_1.default.white('  chromium') + chalk_1.default.gray(' - Chrome/Chromium browser (default)'));
    console.log(chalk_1.default.white('  firefox') + chalk_1.default.gray('  - Mozilla Firefox'));
    console.log(chalk_1.default.white('  webkit') + chalk_1.default.gray('   - Safari/WebKit'));
    console.log();
    console.log('\n' + chalk_1.default.cyan.bold('Available Modes:'));
    console.log();
    console.log(chalk_1.default.white('  headless') + chalk_1.default.gray('  - Invisible browser (default)'));
    console.log(chalk_1.default.white('  headed') + chalk_1.default.gray('    - Visible browser window'));
    console.log(chalk_1.default.white('  inspector') + chalk_1.default.gray(' - Browser with DevTools'));
    console.log();
    console.log('\n' + chalk_1.default.cyan.bold('Examples:'));
    console.log();
    console.log(chalk_1.default.gray('  # Start Chrome in headed mode'));
    console.log(chalk_1.default.white('  xtest browser --mode headed'));
    console.log();
    console.log(chalk_1.default.gray('  # Start Firefox and navigate to GitHub'));
    console.log(chalk_1.default.white('  xtest browser --type firefox --url https://github.com'));
    console.log();
    console.log(chalk_1.default.gray('  # Start with developer tools'));
    console.log(chalk_1.default.white('  xtest browser --mode inspector'));
    console.log();
});
//# sourceMappingURL=browser.js.map