testgenius-ai/dist/framework/core/VisualTestGenerator.js

🚀 TestGenius AI - The Ultimate E2E Testing Framework for Everyone | No Coding Required • AI-Powered Automation • Beautiful Reports • Zero Complexity

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VisualTestGenerator = void 0;
const openai_1 = require("@langchain/openai");
const fs_extra_1 = __importDefault(require("fs-extra"));
const path_1 = __importDefault(require("path"));
const chalk_1 = __importDefault(require("chalk"));
class VisualTestGenerator {
    constructor() {
        this.llm = new openai_1.ChatOpenAI({
            openAIApiKey: process.env.OPENAI_API_KEY,
            modelName: process.env.OPENAI_MODEL || 'gpt-4o',
            temperature: 0.1,
            maxTokens: 4000
        });
    }
    /**
     * 👁️ Generate test from screenshot analysis
     */
    async generateFromScreenshot(screenshotPath, additionalDescription) {
        console.log(chalk_1.default.blue('👁️ Analyzing screenshot and generating test...'));
        try {
            // Check if screenshot exists
            if (!await fs_extra_1.default.pathExists(screenshotPath)) {
                throw new Error(`Screenshot not found: ${screenshotPath}`);
            }
            // Read screenshot as base64
            const screenshotBuffer = await fs_extra_1.default.readFile(screenshotPath);
            const base64Image = screenshotBuffer.toString('base64');
            const systemPrompt = `You are an expert UI testing engineer. Your task is to analyze a screenshot and generate a comprehensive test case.

Analyze the screenshot to identify:
1. UI elements present (buttons, forms, links, etc.)
2. Page layout and structure
3. User interactions possible
4. Expected user flows
5. Potential test scenarios

Generate a realistic test case that could be executed on this UI.`;
            const userPrompt = `Analyze this screenshot and generate a test case:

${additionalDescription ? `Additional context: ${additionalDescription}\n` : ''}

Generate a test case that:
1. Describes what the user sees
2. Identifies interactive elements
3. Suggests realistic user actions
4. Includes verification steps

Return as JSON with this structure:
{
  "id": "visual-test-id",
  "name": "Test name based on screenshot",
  "description": "Detailed description of what the test does",
  "priority": "High|Medium|Low",
  "tags": ["visual", "ui", "screenshot"],
  "site": "https://example.com",
  "task": "Specific task description",
  "testData": {},
  "steps": [
    {
      "action": "action-type",
      "description": "step description",
      "expectedResult": "expected outcome"
    }
  ]
}`;
            const response = await this.llm.invoke([
                { role: 'system', content: systemPrompt },
                {
                    role: 'user',
                    content: [
                        { type: 'text', text: userPrompt },
                        { type: 'image_url', image_url: { url: `data:image/png;base64,${base64Image}` } }
                    ]
                }
            ]);
            const content = response.content;
            let test;
            try {
                const jsonMatch = content.match(/\{[\s\S]*\}/);
                if (jsonMatch) {
                    test = JSON.parse(jsonMatch[0]);
                }
                else {
                    throw new Error('No valid JSON found in response');
                }
            }
            catch (parseError) {
                console.log(chalk_1.default.yellow('⚠️ Could not parse AI response, creating fallback test'));
                test = this.createFallbackVisualTest(screenshotPath, additionalDescription);
            }
            // Validate and enhance test
            test = this.validateAndEnhanceVisualTest(test, screenshotPath);
            console.log(chalk_1.default.green('✅ Visual test generated successfully'));
            return test;
        }
        catch (error) {
            console.log(chalk_1.default.yellow('⚠️ Visual analysis failed, creating fallback test'));
            return this.createFallbackVisualTest(screenshotPath, additionalDescription);
        }
    }
    /**
     * 💾 Save visual test to file
     */
    async saveTest(test, outputPath) {
        try {
            await fs_extra_1.default.ensureDir(path_1.default.dirname(outputPath));
            const content = `// Visual test generated by TestGenius AI
// Generated from screenshot analysis
// Generated on: ${new Date().toISOString()}

module.exports = {
  id: '${test.id}',
  name: '${test.name}',
  description: '${test.description}',
  priority: '${test.priority}',
  tags: ${JSON.stringify(test.tags)},
  site: '${test.site}',
  task: '${test.task}',
  testData: ${JSON.stringify(test.testData || {}, null, 2)},
  steps: ${JSON.stringify(test.steps || [], null, 2)}
};`;
            await fs_extra_1.default.writeFile(outputPath, content);
            console.log(chalk_1.default.green(`✅ Visual test saved to ${outputPath}`));
        }
        catch (error) {
            console.error(chalk_1.default.red('❌ Failed to save visual test:'), error.message);
            throw error;
        }
    }
    /**
     * 🔧 Validate and enhance visual test
     */
    validateAndEnhanceVisualTest(test, screenshotPath) {
        return {
            id: test.id || `visual-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
            name: test.name || 'Visual Analysis Test',
            description: test.description || `Test generated from screenshot analysis of ${path_1.default.basename(screenshotPath)}`,
            priority: test.priority || 'Medium',
            tags: Array.isArray(test.tags) ? [...test.tags, 'visual'] : ['visual', 'screenshot'],
            site: test.site || 'https://example.com',
            task: test.task || 'Execute visual test scenario',
            testData: {
                ...test.testData,
                screenshotPath: screenshotPath
            },
            steps: Array.isArray(test.steps) ? test.steps : [],
            // Support new async properties
            data: test.data,
            setup: test.setup
        };
    }
    /**
     * 🛠️ Create fallback visual test when AI analysis fails
     */
    createFallbackVisualTest(screenshotPath, additionalDescription) {
        return {
            id: `fallback-visual-${Date.now()}`,
            name: 'Visual Analysis Test',
            description: `Basic test generated from screenshot: ${path_1.default.basename(screenshotPath)}${additionalDescription ? ` - ${additionalDescription}` : ''}`,
            priority: 'Medium',
            tags: ['fallback', 'visual', 'screenshot'],
            site: 'https://example.com',
            task: 'Execute basic visual test',
            testData: {
                screenshotPath: screenshotPath,
                description: additionalDescription || 'No additional description provided'
            },
            steps: [
                {
                    action: 'navigate',
                    description: 'Navigate to the website',
                    expectedResult: 'Page loads successfully'
                },
                {
                    action: 'verify',
                    description: 'Verify page matches screenshot',
                    expectedResult: 'Page elements match expected layout'
                },
                {
                    action: 'screenshot',
                    description: 'Take screenshot for comparison',
                    expectedResult: 'Screenshot captured successfully'
                }
            ]
        };
    }
}
exports.VisualTestGenerator = VisualTestGenerator;
//# sourceMappingURL=VisualTestGenerator.js.map