@be-link/smart-test 1.0.1-beta.1 → 1.0.1-beta.3

package/dist/cli/index.js

@@ -5,6 +5,8 @@ import * as path from 'path';
 import chalk from 'chalk';
 import ora from 'ora';
 import { cosmiconfig } from 'cosmiconfig';
+import { chromium, webkit, firefox } from '@playwright/test';
+import OpenAI from 'openai';
 
 /**
  * 日志级别
@@ -507,6 +509,1391 @@ var configLoader$1 = /*#__PURE__*/Object.freeze({
     configLoader: configLoader
 });
 
+/**
+ * 网络请求录制器
+ */
+class NetworkRecorder {
+    constructor() {
+        this.browser = null;
+        this.context = null;
+        this.page = null;
+        this.requests = [];
+    }
+    /**
+     * 启动录制
+     */
+    async start(options) {
+        logger.info(`启动浏览器: ${options.browser || 'chromium'}`);
+        // 启动浏览器
+        const browserType = options.browser || 'chromium';
+        switch (browserType) {
+            case 'firefox':
+                this.browser = await firefox.launch({ headless: false });
+                break;
+            case 'webkit':
+                this.browser = await webkit.launch({ headless: false });
+                break;
+            default:
+                this.browser = await chromium.launch({ headless: false });
+        }
+        // 创建浏览器上下文
+        this.context = await this.browser.newContext({
+            viewport: options.viewport || { width: 375, height: 667 },
+            locale: 'zh-CN',
+        });
+        // 创建页面
+        this.page = await this.context.newPage();
+        // 开始录制网络请求
+        this.startRecording();
+        logger.success('浏览器已启动');
+        logger.info(`访问页面: ${options.url}`);
+        // 访问页面
+        await this.page.goto(options.url, {
+            waitUntil: 'networkidle',
+            timeout: 30000,
+        });
+        logger.success('页面已加载');
+        return this.page;
+    }
+    /**
+     * 开始录制网络请求
+     */
+    startRecording() {
+        if (!this.page || !this.context) {
+            throw new Error('页面或浏览器上下文未初始化');
+        }
+        this.requests = [];
+        // 拦截请求
+        this.page.on('request', (request) => {
+            // 过滤静态资源
+            const url = request.url();
+            if (this.shouldRecordRequest(url)) {
+                const networkRequest = {
+                    url: request.url(),
+                    method: request.method(),
+                    headers: request.headers(),
+                    postData: request.postData() || undefined,
+                    timestamp: Date.now(),
+                };
+                this.requests.push(networkRequest);
+                logger.debug(`捕获请求: ${request.method()} ${url}`);
+            }
+        });
+        // 拦截响应
+        this.page.on('response', async (response) => {
+            const url = response.url();
+            if (this.shouldRecordRequest(url)) {
+                const matchedRequest = this.requests.find((req) => req.url === url && req.method === response.request().method() && !req.response);
+                if (matchedRequest) {
+                    try {
+                        const body = await response.text();
+                        const networkResponse = {
+                            status: response.status(),
+                            headers: response.headers(),
+                            body,
+                            timestamp: Date.now(),
+                        };
+                        matchedRequest.response = networkResponse;
+                        logger.debug(`捕获响应: ${response.status()} ${url}`);
+                    }
+                    catch (error) {
+                        logger.warn(`无法读取响应体: ${url}`);
+                    }
+                }
+            }
+        });
+        logger.success('网络请求录制已启动');
+    }
+    /**
+     * 判断是否应该录制该请求
+     */
+    shouldRecordRequest(url) {
+        // 过滤掉静态资源
+        const staticExtensions = [
+            '.png',
+            '.jpg',
+            '.jpeg',
+            '.gif',
+            '.svg',
+            '.ico',
+            '.css',
+            '.js',
+            '.woff',
+            '.woff2',
+            '.ttf',
+        ];
+        // 过滤掉 data: 和 blob: URL
+        if (url.startsWith('data:') || url.startsWith('blob:')) {
+            return false;
+        }
+        // 检查是否是静态资源
+        return !staticExtensions.some((ext) => url.endsWith(ext));
+    }
+    /**
+     * 停止录制
+     */
+    async stop() {
+        logger.info('停止录制...');
+        // 等待一下，确保最后的请求都被捕获
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        // 关闭浏览器
+        if (this.browser) {
+            await this.browser.close();
+            this.browser = null;
+        }
+        logger.success(`录制完成，共捕获 ${this.requests.length} 个请求`);
+        return this.requests;
+    }
+    /**
+     * 获取当前录制的请求
+     */
+    getRequests() {
+        return [...this.requests];
+    }
+    /**
+     * 获取页面实例
+     */
+    getPage() {
+        return this.page;
+    }
+    /**
+     * 等待用户操作
+     */
+    async waitForUserInteraction(timeout = 60) {
+        logger.prompt(`请在浏览器中进行操作，完成后按 Ctrl+C 或等待 ${timeout} 秒后自动停止`);
+        // 监听 Ctrl+C
+        const controller = new AbortController();
+        const signal = controller.signal;
+        return new Promise((resolve) => {
+            const handler = () => {
+                logger.info('收到停止信号');
+                resolve();
+            };
+            process.on('SIGINT', handler);
+            signal.addEventListener('abort', handler);
+            // 超时自动停止
+            const timeoutId = setTimeout(() => {
+                logger.info('录制超时，自动停止');
+                controller.abort();
+                resolve();
+            }, timeout * 1000);
+            // 清理
+            signal.addEventListener('abort', () => {
+                clearTimeout(timeoutId);
+                process.removeListener('SIGINT', handler);
+            }, { once: true });
+        });
+    }
+    /**
+     * 显示录制统计
+     */
+    displayStats() {
+        const stats = {
+            total: this.requests.length,
+            withResponse: this.requests.filter((r) => r.response).length,
+            withoutResponse: this.requests.filter((r) => !r.response).length,
+            byMethod: {},
+        };
+        this.requests.forEach((req) => {
+            stats.byMethod[req.method] = (stats.byMethod[req.method] || 0) + 1;
+        });
+        logger.newLine();
+        logger.title('录制统计');
+        logger.info(`总请求数: ${stats.total}`);
+        logger.info(`有响应: ${stats.withResponse}`);
+        logger.info(`无响应: ${stats.withoutResponse}`);
+        logger.newLine();
+        logger.info('按方法统计:');
+        Object.entries(stats.byMethod).forEach(([method, count]) => {
+            logger.info(`  ${method}: ${count}`);
+        });
+        logger.newLine();
+    }
+}
+
+/**
+ * HAR 转换器
+ */
+class HARConverter {
+    /**
+     * 将网络请求转换为 HAR 格式
+     */
+    toHAR(requests) {
+        const entries = requests
+            .filter((req) => req.response) // 只包含有响应的请求
+            .map((req) => this.requestToHAREntry(req));
+        return {
+            log: {
+                version: '1.2',
+                creator: {
+                    name: '@be-link/smart-test',
+                    version: '1.0.0',
+                },
+                entries,
+            },
+        };
+    }
+    /**
+     * 将单个请求转换为 HAR 条目
+     */
+    requestToHAREntry(request) {
+        const response = request.response;
+        const startTime = new Date(request.timestamp).toISOString();
+        const duration = response.timestamp - request.timestamp;
+        return {
+            startedDateTime: startTime,
+            time: duration,
+            request: {
+                method: request.method,
+                url: request.url,
+                headers: Object.entries(request.headers).map(([name, value]) => ({ name, value })),
+                postData: request.postData
+                    ? {
+                        mimeType: request.headers['content-type'] || 'application/json',
+                        text: request.postData,
+                    }
+                    : undefined,
+            },
+            response: {
+                status: response.status,
+                headers: Object.entries(response.headers).map(([name, value]) => ({ name, value })),
+                content: {
+                    mimeType: response.headers['content-type'] || 'application/json',
+                    text: response.body,
+                },
+            },
+        };
+    }
+    /**
+     * 保存 HAR 文件
+     */
+    async saveHAR(requests, outputPath) {
+        const har = this.toHAR(requests);
+        const harPath = path.join(outputPath, 'recorded.har');
+        await fs.mkdir(outputPath, { recursive: true });
+        await fs.writeFile(harPath, JSON.stringify(har, null, 2), 'utf-8');
+        logger.success(`HAR 文件已保存: ${harPath}`);
+        return harPath;
+    }
+    /**
+     * 从 HAR 生成 Mock 数据对象
+     */
+    generateMockData(requests) {
+        const mockData = {};
+        requests
+            .filter((req) => req.response)
+            .forEach((req) => {
+            // 提取 API 路径作为 key
+            const apiPath = this.extractApiPath(req.url);
+            const key = this.generateMockKey(apiPath, req.method);
+            // 获取 content-type
+            const contentType = req.response.headers['content-type'] || 'text/plain';
+            const isJson = contentType.includes('application/json');
+            try {
+                // 尝试解析 JSON 响应
+                const responseBody = isJson ? JSON.parse(req.response.body) : req.response.body;
+                mockData[key] = {
+                    url: apiPath,
+                    method: req.method,
+                    status: req.response.status,
+                    contentType,
+                    isJson,
+                    response: responseBody,
+                };
+            }
+            catch {
+                // JSON 解析失败，直接存储原始文本
+                mockData[key] = {
+                    url: apiPath,
+                    method: req.method,
+                    status: req.response.status,
+                    contentType,
+                    isJson: false,
+                    response: req.response.body,
+                };
+            }
+        });
+        return mockData;
+    }
+    /**
+     * 提取 API 路径（去除域名和查询参数）
+     */
+    extractApiPath(url) {
+        try {
+            const urlObj = new URL(url);
+            return urlObj.pathname;
+        }
+        catch {
+            return url;
+        }
+    }
+    /**
+     * 生成 Mock 数据的 key
+     */
+    generateMockKey(apiPath, method) {
+        // 将路径转换为驼峰命名
+        // /api/user/info -> apiUserInfo
+        const parts = apiPath
+            .split('/')
+            .filter((p) => p)
+            .map((p, index) => (index === 0 ? p : p.charAt(0).toUpperCase() + p.slice(1)));
+        return `${method.toLowerCase()}${parts.map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join('')}`;
+    }
+    /**
+     * 生成 Playwright Mock 代码
+     */
+    generateMockCode(requests, pageName) {
+        const mockData = this.generateMockData(requests);
+        // 生成 TypeScript 代码
+        let code = `import type { Page } from '@playwright/test';\n\n`;
+        code += `// Mock 数据常量\n`;
+        // 生成每个 Mock 数据常量
+        Object.entries(mockData).forEach(([key, data]) => {
+            code += `const ${key}Data = ${JSON.stringify(data.response, null, 2)};\n\n`;
+        });
+        // 生成 Mock 函数
+        code += `/**\n`;
+        code += ` * Mock ${pageName} 页面的 API\n`;
+        code += ` */\n`;
+        code += `export async function mock${this.capitalize(pageName)}Apis(page: Page): Promise<void> {\n`;
+        // 为每个请求生成 route
+        Object.entries(mockData).forEach(([key, data]) => {
+            const urlPattern = this.generateUrlPattern(data.url);
+            code += `  // ${data.method} ${data.url}\n`;
+            code += `  await page.route('${urlPattern}', async (route) => {\n`;
+            code += `    await route.fulfill({\n`;
+            code += `      status: ${data.status},\n`;
+            code += `      headers: { 'content-type': '${data.contentType}' },\n`;
+            // 根据响应类型决定如何处理 body
+            if (data.isJson) {
+                code += `      body: JSON.stringify(${key}Data),\n`;
+            }
+            else {
+                code += `      body: ${key}Data,\n`;
+            }
+            code += `    });\n`;
+            code += `  });\n\n`;
+        });
+        code += `}\n`;
+        return code;
+    }
+    /**
+     * 生成 URL 匹配模式
+     */
+    generateUrlPattern(apiPath) {
+        // 将 API 路径转换为通配符模式
+        // 精确匹配路径，但允许不同的域名和查询参数
+        // /api/user/info -> **/api/user/info
+        // / -> **/
+        // 如果路径以斜杠结尾，保持原样；否则在末尾添加可选的查询参数匹配
+        if (apiPath === '/' || apiPath.endsWith('/')) {
+            return `**${apiPath}`;
+        }
+        // 对于其他路径，精确匹配路径部分，但允许查询参数
+        return `**${apiPath}?(|?*)`;
+    }
+    /**
+     * 首字母大写
+     */
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    /**
+     * 保存 Mock 代码
+     */
+    async saveMockCode(requests, outputPath, pageName) {
+        const mockCode = this.generateMockCode(requests, pageName);
+        const mockPath = path.join(outputPath, `mock-${pageName}.ts`);
+        await fs.mkdir(outputPath, { recursive: true });
+        await fs.writeFile(mockPath, mockCode, 'utf-8');
+        logger.success(`Mock 代码已保存: ${mockPath}`);
+        return mockPath;
+    }
+}
+
+/**
+ * AI 测试用例生成器
+ */
+class TestGenerator {
+    constructor(config) {
+        this.config = config;
+        this.openai = null;
+        // 初始化 OpenAI 客户端
+        if (config.ai?.apiKey) {
+            this.openai = new OpenAI({
+                apiKey: config.ai.apiKey,
+                baseURL: config.ai.baseURL || 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+                timeout: config.ai.timeout || 60000,
+            });
+        }
+    }
+    /**
+     * 从录制数据生成测试用例
+     */
+    async generateTest(url, pageName, requests, mockFileName) {
+        if (!this.openai) {
+            logger.warn('未配置 AI API Key，跳过测试用例生成');
+            return this.generateBasicTest(url, pageName, mockFileName);
+        }
+        try {
+            logger.debug('准备 AI 提示词...');
+            // 准备 AI 提示词
+            const prompt = this.buildPrompt(url, pageName, requests, mockFileName);
+            logger.debug('调用 AI 生成测试用例...');
+            // 调用 AI 生成测试用例
+            const response = await this.openai.chat.completions.create({
+                model: this.config.ai?.model || 'qwen-vl-plus',
+                messages: [
+                    {
+                        role: 'system',
+                        content: '你是一个专业的测试工程师，擅长使用 Playwright 编写 E2E 测试。请根据提供的页面信息和网络请求记录，生成高质量的测试用例代码。',
+                    },
+                    {
+                        role: 'user',
+                        content: prompt,
+                    },
+                ],
+                temperature: 0.3,
+            });
+            const generatedCode = response.choices[0]?.message?.content || '';
+            // 提取代码块
+            const codeMatch = generatedCode.match(/```(?:typescript|ts)?\n([\s\S]*?)```/);
+            if (codeMatch) {
+                return codeMatch[1].trim();
+            }
+            return generatedCode.trim();
+        }
+        catch (error) {
+            logger.warn(`AI 生成测试失败: ${error instanceof Error ? error.message : String(error)}`);
+            logger.info('将生成基础测试模板');
+            return this.generateBasicTest(url, pageName, mockFileName);
+        }
+    }
+    /**
+     * 构建 AI 提示词
+     */
+    buildPrompt(url, pageName, requests, mockFileName) {
+        // 统计请求信息
+        const requestSummary = this.summarizeRequests(requests);
+        return `
+请为以下页面生成 Playwright 测试用例：
+
+## 页面信息
+- URL: ${url}
+- 页面名称: ${pageName}
+
+## 网络请求统计
+${requestSummary}
+
+## 要求
+1. 使用 TypeScript 语法
+2. 导入 Mock 函数: import { mock${this.capitalize(pageName)}Apis } from './${mockFileName}'
+3. 在测试开始前调用 Mock 函数
+4. 包含基础的页面加载测试
+5. 根据请求类型，生成合适的测试场景（如表单提交、数据加载等）
+6. 使用 Playwright 的最佳实践
+7. 包含有意义的断言
+8. 代码简洁清晰，有适当的注释
+
+请直接返回测试代码，不需要额外的说明。
+`;
+    }
+    /**
+     * 总结请求信息
+     */
+    summarizeRequests(requests) {
+        const summary = [];
+        // 按方法统计
+        const methodCount = {};
+        requests.forEach((req) => {
+            methodCount[req.method] = (methodCount[req.method] || 0) + 1;
+        });
+        summary.push('请求统计：');
+        Object.entries(methodCount).forEach(([method, count]) => {
+            summary.push(`  - ${method}: ${count} 个请求`);
+        });
+        // 列出主要的 API 端点
+        summary.push('\n主要 API 端点：');
+        requests
+            .filter((req) => req.response)
+            .slice(0, 10) // 最多列出 10 个
+            .forEach((req) => {
+            const urlObj = new URL(req.url);
+            summary.push(`  - ${req.method} ${urlObj.pathname} (${req.response?.status})`);
+        });
+        return summary.join('\n');
+    }
+    /**
+     * 生成基础测试模板（不使用 AI）
+     */
+    generateBasicTest(url, pageName, mockFileName) {
+        const capitalizedName = this.capitalize(pageName);
+        return `import { test, expect } from '@playwright/test';
+import { mock${capitalizedName}Apis } from './${mockFileName}';
+
+test.describe('${capitalizedName} 页面测试', () => {
+  test.beforeEach(async ({ page }) => {
+    // 设置 Mock 数据
+    await mock${capitalizedName}Apis(page);
+  });
+
+  test('应该成功加载页面', async ({ page }) => {
+    // 访问页面
+    await page.goto('${url}');
+
+    // 等待页面加载
+    await page.waitForLoadState('networkidle');
+
+    // 验证页面标题或关键元素
+    await expect(page).toHaveURL('${url}');
+  });
+
+  // TODO: 添加更多测试用例
+});
+`;
+    }
+    /**
+     * 保存测试文件
+     */
+    async saveTest(testCode, outputPath, pageName) {
+        const testPath = path.join(outputPath, `${pageName}.spec.ts`);
+        await fs.mkdir(outputPath, { recursive: true });
+        await fs.writeFile(testPath, testCode, 'utf-8');
+        logger.success(`测试文件已保存: ${testPath}`);
+        return testPath;
+    }
+    /**
+     * 首字母大写
+     */
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+}
+
+/**
+ * Page Object Model 生成器
+ */
+class POMGenerator {
+    constructor(config) {
+        this.config = config;
+        this.openai = null;
+        // 初始化 OpenAI 客户端
+        if (config.ai?.apiKey) {
+            this.openai = new OpenAI({
+                apiKey: config.ai.apiKey,
+                baseURL: config.ai.baseURL || 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+                timeout: config.ai.timeout || 60000,
+            });
+        }
+    }
+    /**
+     * 从页面提取元素信息
+     */
+    async extractElements(page) {
+        logger.debug('提取页面元素信息...');
+        const elements = await page.evaluate(() => {
+            // 辅助函数：生成选择器
+            function generateSelector(el) {
+                // 优先使用 id
+                if (el.id) {
+                    return `#${el.id}`;
+                }
+                // 使用 name 属性
+                const name = el.getAttribute('name');
+                if (name) {
+                    return `[name="${name}"]`;
+                }
+                // 使用 data-testid
+                const testId = el.getAttribute('data-testid');
+                if (testId) {
+                    return `[data-testid="${testId}"]`;
+                }
+                // 使用类名（取第一个）
+                if (el.className && typeof el.className === 'string') {
+                    const firstClass = el.className.split(' ')[0];
+                    if (firstClass) {
+                        return `.${firstClass}`;
+                    }
+                }
+                // 使用标签名
+                return el.tagName.toLowerCase();
+            }
+            // 辅助函数：推断描述
+            function inferDescription(el) {
+                const tag = el.tagName.toLowerCase();
+                // 从文本内容推断
+                const text = el.textContent?.trim();
+                if (text && text.length < 30) {
+                    return text.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]+/g, ' ').trim();
+                }
+                // 从属性推断
+                const placeholder = el.getAttribute('placeholder');
+                if (placeholder) {
+                    return placeholder;
+                }
+                const name = el.getAttribute('name');
+                if (name) {
+                    return name;
+                }
+                const id = el.getAttribute('id');
+                if (id) {
+                    return id;
+                }
+                const type = el.getAttribute('type');
+                if (type) {
+                    return `${type} ${tag}`;
+                }
+                return tag;
+            }
+            // 辅助函数：获取属性
+            function getAttributes(el) {
+                const attrs = {};
+                ['id', 'name', 'type', 'placeholder', 'value', 'href', 'role', 'data-testid'].forEach((attrName) => {
+                    const value = el.getAttribute(attrName);
+                    if (value) {
+                        attrs[attrName] = value;
+                    }
+                });
+                return attrs;
+            }
+            const results = [];
+            // 提取输入框
+            document.querySelectorAll('input, textarea').forEach((el) => {
+                const input = el;
+                results.push({
+                    type: input.tagName.toLowerCase() === 'textarea' ? 'textarea' : 'input',
+                    selector: generateSelector(input),
+                    description: inferDescription(input),
+                    attributes: getAttributes(input),
+                    text: input.value,
+                });
+            });
+            // 提取按钮
+            document.querySelectorAll('button, [role="button"], input[type="submit"], input[type="button"]').forEach((el) => {
+                const button = el;
+                results.push({
+                    type: 'button',
+                    selector: generateSelector(button),
+                    description: inferDescription(button),
+                    attributes: getAttributes(button),
+                    text: button.textContent?.trim() || '',
+                });
+            });
+            // 提取链接
+            document.querySelectorAll('a[href]').forEach((el) => {
+                const link = el;
+                results.push({
+                    type: 'link',
+                    selector: generateSelector(link),
+                    description: inferDescription(link),
+                    attributes: getAttributes(link),
+                    text: link.textContent?.trim() || '',
+                });
+            });
+            // 提取下拉框
+            document.querySelectorAll('select').forEach((el) => {
+                const select = el;
+                results.push({
+                    type: 'select',
+                    selector: generateSelector(select),
+                    description: inferDescription(select),
+                    attributes: getAttributes(select),
+                    text: select.selectedOptions[0]?.text || '',
+                });
+            });
+            return results;
+        });
+        logger.debug(`提取到 ${elements.length} 个页面元素`);
+        return elements;
+    }
+    /**
+     * 生成 Page Object 代码
+     */
+    async generatePOM(pageName, pageUrl, elements) {
+        const capitalizedName = this.capitalize(pageName);
+        const className = `${capitalizedName}Page`;
+        // 如果没有元素，生成基础 POM
+        if (elements.length === 0) {
+            return this.generateBasicPOM(className, pageUrl);
+        }
+        // 使用 AI 优化元素命名（如果可用）
+        let optimizedElements = elements;
+        if (this.openai) {
+            try {
+                optimizedElements = await this.optimizeElementNames(elements);
+            }
+            catch (error) {
+                logger.warn(`AI 优化元素命名失败: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        }
+        // 生成代码
+        let code = `import type { Page, Locator } from '@playwright/test';\n\n`;
+        code += `/**\n`;
+        code += ` * ${capitalizedName} 页面 Page Object\n`;
+        code += ` */\n`;
+        code += `export class ${className} {\n`;
+        code += `  readonly url = '${pageUrl}';\n\n`;
+        // 生成元素定位器声明
+        code += `  // 页面元素\n`;
+        optimizedElements.forEach((el) => {
+            const propertyName = this.toPropertyName(el.description);
+            code += `  readonly ${propertyName}: Locator;\n`;
+        });
+        code += `\n`;
+        code += `  constructor(private page: Page) {\n`;
+        // 生成元素初始化
+        optimizedElements.forEach((el) => {
+            const propertyName = this.toPropertyName(el.description);
+            code += `    this.${propertyName} = page.locator('${el.selector}');\n`;
+        });
+        code += `  }\n\n`;
+        // 生成基础方法
+        code += `  /**\n`;
+        code += `   * 访问页面\n`;
+        code += `   */\n`;
+        code += `  async goto() {\n`;
+        code += `    await this.page.goto(this.url);\n`;
+        code += `  }\n\n`;
+        code += `  /**\n`;
+        code += `   * 等待页面加载完成\n`;
+        code += `   */\n`;
+        code += `  async waitForLoad() {\n`;
+        code += `    await this.page.waitForLoadState('networkidle');\n`;
+        code += `  }\n`;
+        code += `}\n`;
+        return code;
+    }
+    /**
+     * 使用 AI 优化元素命名
+     */
+    async optimizeElementNames(elements) {
+        if (!this.openai) {
+            return elements;
+        }
+        logger.debug('使用 AI 优化元素命名...');
+        const elementsSummary = elements
+            .map((el, index) => {
+            return `${index + 1}. ${el.type} - selector: ${el.selector}, text: "${el.text || ''}", name: "${el.attributes.name || ''}", id: "${el.attributes.id || ''}"`;
+        })
+            .join('\n');
+        const prompt = `
+请为以下页面元素生成语义化的属性名称（使用小驼峰命名法）。
+
+元素列表：
+${elementsSummary}
+
+要求：
+1. 属性名要体现元素的用途
+2. 使用英文，小驼峰命名法
+3. 简洁清晰
+4. 对于按钮、链接，从文本内容推断用途
+5. 对于输入框，从 name/id/placeholder 推断用途
+
+请以 JSON 数组格式返回，每个元素包含 index 和 propertyName：
+[{"index": 1, "propertyName": "usernameInput"}, ...]
+`;
+        try {
+            const response = await this.openai.chat.completions.create({
+                model: this.config.ai?.model || 'qwen-vl-plus',
+                messages: [
+                    {
+                        role: 'system',
+                        content: '你是一个专业的前端工程师，擅长为 UI 元素命名。',
+                    },
+                    {
+                        role: 'user',
+                        content: prompt,
+                    },
+                ],
+                temperature: 0.3,
+            });
+            const result = response.choices[0]?.message?.content || '';
+            // 提取 JSON
+            const jsonMatch = result.match(/\[[\s\S]*\]/);
+            if (jsonMatch) {
+                const naming = JSON.parse(jsonMatch[0]);
+                // 应用命名
+                return elements.map((el, index) => {
+                    const nameData = naming.find((n) => n.index === index + 1);
+                    if (nameData && nameData.propertyName) {
+                        return { ...el, description: nameData.propertyName };
+                    }
+                    return el;
+                });
+            }
+        }
+        catch (error) {
+            logger.debug(`AI 命名解析失败: ${error instanceof Error ? error.message : String(error)}`);
+        }
+        return elements;
+    }
+    /**
+     * 生成基础 POM（无元素）
+     */
+    generateBasicPOM(className, pageUrl) {
+        return `import type { Page } from '@playwright/test';
+
+/**
+ * ${className} Page Object
+ */
+export class ${className} {
+  readonly url = '${pageUrl}';
+
+  constructor(private page: Page) {}
+
+  /**
+   * 访问页面
+   */
+  async goto() {
+    await this.page.goto(this.url);
+  }
+
+  /**
+   * 等待页面加载完成
+   */
+  async waitForLoad() {
+    await this.page.waitForLoadState('networkidle');
+  }
+}
+`;
+    }
+    /**
+     * 将描述转换为属性名
+     */
+    toPropertyName(description) {
+        // 移除特殊字符，转换为小驼峰
+        return description
+            .replace(/[^a-zA-Z0-9]+/g, ' ')
+            .trim()
+            .split(' ')
+            .map((word, index) => {
+            word = word.toLowerCase();
+            if (index > 0) {
+                word = word.charAt(0).toUpperCase() + word.slice(1);
+            }
+            return word;
+        })
+            .join('');
+    }
+    /**
+     * 保存 POM 文件
+     */
+    async savePOM(pomCode, outputPath, pageName) {
+        const pomPath = path.join(outputPath, `${pageName}-page.po.ts`);
+        await fs.mkdir(outputPath, { recursive: true });
+        await fs.writeFile(pomPath, pomCode, 'utf-8');
+        logger.success(`POM 文件已保存: ${pomPath}`);
+        return pomPath;
+    }
+    /**
+     * 首字母大写
+     */
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+}
+
+/**
+ * AI 交互式引导
+ */
+class InteractiveGuide {
+    constructor(page, config) {
+        this.page = page;
+        this.config = config;
+        this.openai = null;
+        this.pomGenerator = new POMGenerator(config);
+        this.context = {
+            url: page.url(),
+            elements: [],
+            executedActions: [],
+            currentStep: 0,
+        };
+        // 初始化 OpenAI 客户端
+        if (config.ai?.apiKey) {
+            this.openai = new OpenAI({
+                apiKey: config.ai.apiKey,
+                baseURL: config.ai.baseURL || 'https://dashscope.aliyuncs.com/compatible-mode/v1',
+                timeout: config.ai.timeout || 60000,
+            });
+        }
+    }
+    /**
+     * 启动交互式引导
+     */
+    async start() {
+        logger.newLine();
+        logger.ai('🤖 AI 交互式引导模式启动');
+        logger.info('AI 将分析页面并为您提供测试操作建议喵～');
+        logger.newLine();
+        try {
+            // 主循环
+            while (true) {
+                // 1. 分析页面
+                await this.analyzePageContext();
+                // 2. 生成建议
+                const suggestions = await this.generateSuggestions();
+                if (suggestions.length === 0) {
+                    logger.warn('没有更多的操作建议了喵～');
+                    break;
+                }
+                // 3. 展示建议并获取用户选择
+                const selectedAction = await this.displaySuggestions(suggestions);
+                // 4. 检查是否结束
+                if (selectedAction.type === 'finish') {
+                    logger.success('录制已结束喵～');
+                    break;
+                }
+                // 5. 执行操作
+                await this.executeAction(selectedAction);
+                // 6. 记录操作
+                this.context.executedActions.push(selectedAction);
+                this.context.currentStep++;
+                // 等待页面可能的状态变化
+                await this.page.waitForTimeout(1000);
+            }
+        }
+        catch (error) {
+            logger.error(`交互式引导出错: ${error instanceof Error ? error.message : String(error)}`);
+            throw error;
+        }
+    }
+    /**
+     * 分析页面当前上下文
+     */
+    async analyzePageContext() {
+        logger.startSpinner('正在分析页面结构...');
+        try {
+            // 提取页面元素
+            this.context.elements = await this.pomGenerator.extractElements(this.page);
+            this.context.url = this.page.url();
+            logger.succeedSpinner(`发现 ${this.context.elements.length} 个可操作元素`);
+        }
+        catch (error) {
+            logger.failSpinner('页面分析失败');
+            throw error;
+        }
+    }
+    /**
+     * 生成操作建议
+     */
+    async generateSuggestions() {
+        // 如果没有 AI，返回基础建议
+        if (!this.openai) {
+            return this.generateBasicSuggestions();
+        }
+        logger.startSpinner('AI 正在生成测试建议...');
+        try {
+            const prompt = this.buildSuggestionsPrompt();
+            const response = await this.openai.chat.completions.create({
+                model: this.config.ai?.model || 'qwen-vl-plus',
+                messages: [
+                    {
+                        role: 'system',
+                        content: '你是一个专业的测试工程师。根据页面元素和已执行的操作，建议接下来应该执行的测试操作。' +
+                            '请以 JSON 数组格式返回建议，每个建议包含：type（操作类型）、elementIndex（元素索引，-1 表示无需元素）、' +
+                            'description（操作描述）、value（操作值，可选）、priority（优先级 1-5）、reason（理由）。' +
+                            '操作类型包括：fill（填写）、click（点击）、select（选择）、verify（验证）、wait（等待）、finish（结束）。',
+                    },
+                    {
+                        role: 'user',
+                        content: prompt,
+                    },
+                ],
+                temperature: 0.5,
+                response_format: { type: 'json_object' },
+            });
+            const content = response.choices[0]?.message?.content || '{}';
+            const result = JSON.parse(content);
+            // 解析 AI 返回的建议
+            const suggestions = (result.suggestions || []).map((s, index) => ({
+                id: `ai-${this.context.currentStep}-${index}`,
+                type: s.type || 'click',
+                element: s.elementIndex >= 0 ? this.context.elements[s.elementIndex] : undefined,
+                description: s.description || '未知操作',
+                value: s.value,
+                priority: s.priority || 3,
+                reason: s.reason,
+            }));
+            // 始终添加"结束录制"选项
+            suggestions.push({
+                id: 'finish',
+                type: 'finish',
+                description: '结束录制',
+                priority: 1,
+            });
+            logger.succeedSpinner(`生成了 ${suggestions.length - 1} 个测试建议`);
+            return suggestions.sort((a, b) => b.priority - a.priority);
+        }
+        catch (error) {
+            logger.failSpinner('AI 建议生成失败');
+            logger.warn(`将使用基础建议: ${error instanceof Error ? error.message : String(error)}`);
+            return this.generateBasicSuggestions();
+        }
+    }
+    /**
+     * 构建 AI 提示词
+     */
+    buildSuggestionsPrompt() {
+        const elementsInfo = this.context.elements
+            .map((el, idx) => `${idx}. [${el.type}] ${el.description || '未命名元素'} (${el.selector})${el.text ? ` - 文本: "${el.text}"` : ''}`)
+            .join('\n');
+        const actionsInfo = this.context.executedActions.length > 0
+            ? this.context.executedActions
+                .map((a, idx) => `${idx + 1}. ${a.description}${a.value ? ` (值: ${a.value})` : ''}`)
+                .join('\n')
+            : '无';
+        return `
+当前页面 URL: ${this.context.url}
+当前步骤: ${this.context.currentStep + 1}
+
+可操作元素列表:
+${elementsInfo}
+
+已执行的操作:
+${actionsInfo}
+
+请分析当前页面状态，建议接下来应该执行的测试操作。
+要求：
+1. 建议应该符合真实的测试场景（如：填写表单 → 点击提交 → 验证结果）
+2. 不要重复已执行的操作
+3. 优先建议高价值的测试操作
+4. 每次建议 2-4 个操作
+5. 如果已经完成了基本的测试流程，可以建议结束
+
+返回 JSON 格式: {"suggestions": [{"type": "...", "elementIndex": 0, "description": "...", "value": "...", "priority": 5, "reason": "..."}]}
+`;
+    }
+    /**
+     * 生成基础建议（不使用 AI）
+     */
+    generateBasicSuggestions() {
+        const suggestions = [];
+        // 为每个未操作的元素生成建议
+        const executedElements = new Set(this.context.executedActions.map((a) => a.element?.selector).filter(Boolean));
+        this.context.elements
+            .filter((el) => !executedElements.has(el.selector))
+            .slice(0, 5) // 最多显示 5 个
+            .forEach((el, index) => {
+            const suggestion = {
+                id: `basic-${this.context.currentStep}-${index}`,
+                type: el.type === 'input' || el.type === 'textarea' ? 'fill' : 'click',
+                element: el,
+                description: this.getBasicSuggestionDescription(el),
+                priority: 3,
+            };
+            if (suggestion.type === 'fill') {
+                suggestion.value = `测试${el.description || '输入'}`;
+            }
+            suggestions.push(suggestion);
+        });
+        // 添加"结束录制"选项
+        suggestions.push({
+            id: 'finish',
+            type: 'finish',
+            description: '结束录制',
+            priority: 1,
+        });
+        return suggestions;
+    }
+    /**
+     * 获取基础建议描述
+     */
+    getBasicSuggestionDescription(element) {
+        if (element.type === 'input' || element.type === 'textarea') {
+            return `填写 "${element.description || element.selector}"`;
+        }
+        if (element.type === 'button') {
+            return `点击按钮 "${element.description || element.text || element.selector}"`;
+        }
+        if (element.type === 'link') {
+            return `点击链接 "${element.description || element.text || element.selector}"`;
+        }
+        if (element.type === 'select') {
+            return `选择 "${element.description || element.selector}"`;
+        }
+        return `操作 "${element.description || element.selector}"`;
+    }
+    /**
+     * 展示建议并获取用户选择
+     */
+    async displaySuggestions(suggestions) {
+        logger.newLine();
+        logger.info('📋 AI 建议的测试操作：');
+        logger.newLine();
+        // 构建选项列表
+        const choices = suggestions.map((s) => {
+            let name = `${this.getPriorityIcon(s.priority)} ${s.description}`;
+            if (s.reason) {
+                name += `\n   💡 ${s.reason}`;
+            }
+            if (s.value) {
+                name += `\n   ✏️  值: "${s.value}"`;
+            }
+            return {
+                name,
+                value: s.id,
+                short: s.description,
+            };
+        });
+        // 让用户选择
+        const answer = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'action',
+                message: '请选择要执行的操作:',
+                choices,
+                pageSize: 10,
+            },
+        ]);
+        const selected = suggestions.find((s) => s.id === answer.action);
+        if (!selected) {
+            throw new Error('无效的选择');
+        }
+        // 如果是填写操作且没有预设值，询问用户输入
+        if (selected.type === 'fill' && !selected.value) {
+            const inputAnswer = await inquirer.prompt([
+                {
+                    type: 'input',
+                    name: 'value',
+                    message: `请输入要填写的内容:`,
+                    default: selected.value || `测试${selected.element?.description || '输入'}`,
+                },
+            ]);
+            selected.value = inputAnswer.value;
+        }
+        return selected;
+    }
+    /**
+     * 获取优先级图标
+     */
+    getPriorityIcon(priority) {
+        if (priority >= 5)
+            return '⭐⭐⭐';
+        if (priority >= 4)
+            return '⭐⭐';
+        if (priority >= 3)
+            return '⭐';
+        return '◦';
+    }
+    /**
+     * 执行操作
+     */
+    async executeAction(action) {
+        logger.newLine();
+        logger.startSpinner(`执行操作: ${action.description}`);
+        try {
+            switch (action.type) {
+                case 'fill':
+                    if (action.element && action.value) {
+                        await this.page.locator(action.element.selector).fill(action.value);
+                        logger.succeedSpinner(`已填写: "${action.value}"`);
+                    }
+                    break;
+                case 'click':
+                    if (action.element) {
+                        await this.page.locator(action.element.selector).click();
+                        logger.succeedSpinner('点击成功');
+                    }
+                    break;
+                case 'select':
+                    if (action.element && action.value) {
+                        await this.page.locator(action.element.selector).selectOption(action.value);
+                        logger.succeedSpinner(`已选择: "${action.value}"`);
+                    }
+                    break;
+                case 'verify':
+                    if (action.element) {
+                        const isVisible = await this.page.locator(action.element.selector).isVisible();
+                        logger.succeedSpinner(`验证${isVisible ? '成功' : '失败'}`);
+                    }
+                    break;
+                case 'wait':
+                    await this.page.waitForLoadState('networkidle');
+                    logger.succeedSpinner('等待完成');
+                    break;
+                case 'navigate':
+                    if (action.value) {
+                        await this.page.goto(action.value);
+                        logger.succeedSpinner('导航成功');
+                    }
+                    break;
+                case 'finish':
+                    // 不需要执行任何操作
+                    break;
+                default:
+                    logger.warn(`未知的操作类型: ${action.type}`);
+            }
+        }
+        catch (error) {
+            logger.failSpinner(`操作失败: ${error instanceof Error ? error.message : String(error)}`);
+            throw error;
+        }
+    }
+    /**
+     * 获取执行的操作历史
+     */
+    getExecutedActions() {
+        return this.context.executedActions;
+    }
+}
+
+/**
+ * 录制命令
+ */
+async function recordCommand(options) {
+    logger.title('[smart-test] 录制模式 - 生成测试代码');
+    // 加载配置
+    const config = await configLoader.load();
+    // 设置默认值
+    const recordOptions = {
+        ...options,
+        output: options.output || config.output?.helpersDir || './tests/helpers',
+        browser: options.browser || config.playwright?.browser || 'chromium',
+        viewport: options.viewport || config.playwright?.viewport,
+        timeout: options.timeout || 60,
+    };
+    logger.info(`录制 URL: ${recordOptions.url}`);
+    logger.info(`输出目录: ${recordOptions.output}`);
+    logger.info(`浏览器: ${recordOptions.browser}`);
+    // 创建录制器
+    const recorder = new NetworkRecorder();
+    try {
+        // 启动录制
+        await recorder.start(recordOptions);
+        // 根据模式等待用户操作
+        if (options.manual) {
+            logger.newLine();
+            logger.ai('手动操作模式');
+            logger.info('🌐 浏览器已打开，请在浏览器中进行操作');
+            logger.info('📹 所有网络请求都在录制中');
+            logger.prompt('完成操作后，请按 Ctrl+C 停止录制');
+            logger.newLine();
+            // 等待用户操作
+            await recorder.waitForUserInteraction(recordOptions.timeout);
+        }
+        else if (options.interactive) {
+            const page = recorder.getPage();
+            if (!page) {
+                logger.error('无法获取页面实例');
+                throw new Error('无法启动交互式引导模式');
+            }
+            // 启动 AI 交互式引导
+            const interactiveGuide = new InteractiveGuide(page, config);
+            await interactiveGuide.start();
+        }
+        else {
+            logger.newLine();
+            logger.ai('自动录制模式');
+            logger.info('将自动在 5 秒后停止录制');
+            logger.newLine();
+            // 自动模式，等待几秒
+            await new Promise((resolve) => setTimeout(resolve, 5000));
+        }
+        // 提取页面元素（在关闭浏览器前）
+        logger.newLine();
+        logger.startSpinner('正在分析页面结构...');
+        const page = recorder.getPage();
+        const pomGenerator = new POMGenerator(config);
+        let pageElements = [];
+        if (page) {
+            try {
+                pageElements = await pomGenerator.extractElements(page);
+                logger.succeedSpinner(`页面结构分析完成，发现 ${pageElements.length} 个元素`);
+            }
+            catch (error) {
+                logger.failSpinner('页面结构分析失败');
+                logger.warn(`提取元素失败: ${error instanceof Error ? error.message : String(error)}`);
+            }
+        }
+        else {
+            logger.failSpinner('无法获取页面实例');
+        }
+        // 停止录制
+        const requests = await recorder.stop();
+        // 显示统计
+        recorder.displayStats();
+        if (requests.length === 0) {
+            logger.warn('未捕获到任何请求');
+            return;
+        }
+        // 过滤出有响应的请求
+        const validRequests = requests.filter((r) => r.response);
+        logger.info(`有效请求数: ${validRequests.length}`);
+        if (validRequests.length === 0) {
+            logger.warn('没有有效的请求（所有请求都缺少响应）');
+            return;
+        }
+        // 生成文件
+        logger.newLine();
+        logger.startSpinner('正在生成 Mock 代码...');
+        const converter = new HARConverter();
+        // 提取页面名称
+        const pageName = extractPageName(recordOptions.url);
+        logger.debug(`页面名称: ${pageName}`);
+        // 保存 HAR 文件
+        const outputDir = path.resolve(process.cwd(), recordOptions.output);
+        await converter.saveHAR(validRequests, outputDir);
+        // 生成并保存 Mock 代码
+        const mockFileName = `mock-${pageName}`;
+        await converter.saveMockCode(validRequests, outputDir, pageName);
+        logger.succeedSpinner('Mock 代码生成完成');
+        // 生成测试用例
+        logger.newLine();
+        logger.startSpinner('正在生成测试用例...');
+        const testGenerator = new TestGenerator(config);
+        const testCode = await testGenerator.generateTest(recordOptions.url, pageName, validRequests, mockFileName);
+        await testGenerator.saveTest(testCode, outputDir, pageName);
+        logger.succeedSpinner('测试用例生成完成');
+        // 生成 Page Object Model
+        logger.newLine();
+        logger.startSpinner('正在生成 Page Object Model...');
+        const pomCode = await pomGenerator.generatePOM(pageName, recordOptions.url, pageElements);
+        await pomGenerator.savePOM(pomCode, outputDir, pageName);
+        logger.succeedSpinner('POM 代码生成完成');
+        // 下一步提示
+        logger.newLine();
+        logger.success('✅ 录制完成！');
+        logger.newLine();
+        logger.info('生成的文件:');
+        logger.info(`  📄 ${path.join(outputDir, 'recorded.har')}`);
+        logger.info(`  📄 ${path.join(outputDir, `${mockFileName}.ts`)}`);
+        logger.info(`  📄 ${path.join(outputDir, `${pageName}.spec.ts`)}`);
+        logger.info(`  📄 ${path.join(outputDir, `${pageName}-page.po.ts`)}`);
+        logger.newLine();
+        logger.info('下一步:');
+        logger.info(`  1. 查看生成的 Mock 代码: ${path.join(outputDir, `${mockFileName}.ts`)}`);
+        logger.info(`  2. 查看生成的测试用例: ${path.join(outputDir, `${pageName}.spec.ts`)}`);
+        logger.info(`  3. 查看生成的 POM 代码: ${path.join(outputDir, `${pageName}-page.po.ts`)}`);
+        logger.info(`  4. 运行测试: npx playwright test ${path.join(outputDir, `${pageName}.spec.ts`)}`);
+        logger.newLine();
+    }
+    catch (error) {
+        logger.failSpinner('录制失败');
+        throw error;
+    }
+}
+/**
+ * 从 URL 提取页面名称
+ */
+function extractPageName(url) {
+    try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname;
+        // 提取最后一段路径作为页面名称
+        const segments = pathname.split('/').filter((s) => s);
+        const lastSegment = segments[segments.length - 1];
+        // 如果最后一段是文件名（有扩展名），去掉扩展名
+        if (lastSegment && lastSegment.includes('.')) {
+            return lastSegment.split('.')[0];
+        }
+        // 否则返回最后一段，如果为空则返回 'page'
+        return lastSegment || 'page';
+    }
+    catch {
+        return 'page';
+    }
+}
+
 /**
  * 生成命令
  */
@@ -530,28 +1917,38 @@ async function generateCommand(options) {
         mode = 'hybrid';
     }
     logger.info(`生成模式: ${mode}`);
-    // TODO: 实现不同的生成模式
+    logger.newLine();
+    // 实现不同的生成模式
     switch (mode) {
-        case 'record':
-            logger.info('录制模式 - 开发中...');
-            logger.info(`将录制: ${options.url}`);
+        case 'record': {
+            // 录制模式 - 调用 recordCommand
+            const recordOptions = {
+                url: options.url,
+                output: options.output,
+                interactive: options.interactive,
+            };
+            await recordCommand(recordOptions);
             break;
+        }
         case 'analyze':
             logger.info('代码分析模式 - 开发中...');
             logger.info(`将分析: ${options.page}`);
+            logger.newLine();
+            logger.warn('此功能正在开发中，敬请期待！');
             break;
         case 'describe':
             logger.info('描述生成模式 - 开发中...');
             logger.info(`描述: ${options.desc}`);
+            logger.newLine();
+            logger.warn('此功能正在开发中，敬请期待！');
             break;
         case 'hybrid':
             logger.info('混合模式 - 开发中...');
             logger.info('将进入交互式引导...');
+            logger.newLine();
+            logger.warn('此功能正在开发中，敬请期待！');
             break;
     }
-    logger.newLine();
-    logger.warn('此功能正在开发中，敬请期待！');
-    logger.info('当前版本仅支持 smart-test init 命令');
 }
 
 /**
@@ -584,16 +1981,17 @@ function createCLI() {
         .action(withErrorHandling(async (options) => {
         await generateCommand(options);
     }));
-    // ========== record 命令（generate 的别名）==========
+    // ========== record 命令 ==========
     program
         .command('record')
-        .description('录制模式生成测试（generate --url 的别名）')
+        .description('录制模式生成测试')
         .requiredOption('-u, --url <url>', '页面 URL')
         .option('-o, --output <dir>', '输出目录')
         .option('--manual', '手动操作模式')
         .option('--interactive', '交互式引导')
+        .option('--timeout <seconds>', '录制超时时间（秒）', '60')
         .action(withErrorHandling(async (options) => {
-        await generateCommand({ url: options.url, ...options });
+        await recordCommand(options);
     }));
     // ========== config 命令 ==========
     program
@@ -602,7 +2000,7 @@ function createCLI() {
         .action(withErrorHandling(async () => {
         const { configLoader } = await Promise.resolve().then(function () { return configLoader$1; });
         const config = await configLoader.load();
-        logger.title('当前配置');
+        logger.title('[smart-test] 当前配置');
         console.log(JSON.stringify(config, null, 2));
     }));
     return program;