learningcircuit--local-deep-research/tests/ui_tests/test_ui_screenshots.js

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');
const AuthHelper = require('./auth_helper');

async function captureUIScreenshots() {
    const browser = await puppeteer.launch({
        headless: process.env.HEADLESS === 'true',
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 720 });

    // Create screenshots directory
    const screenshotDir = path.join(__dirname, 'ui-review-screenshots');
    if (!fs.existsSync(screenshotDir)) {
        fs.mkdirSync(screenshotDir, { recursive: true });
    }

    try {
        console.log('🔐 Authenticating...');
        const auth = new AuthHelper(page);
        await auth.ensureAuthenticated();
        console.log('✅ Authentication successful');

        // Pages to capture
        const pages = [
            { name: 'home', url: 'http://127.0.0.1:5000/', description: 'Research Home' },
            { name: 'settings', url: 'http://127.0.0.1:5000/settings/', description: 'Settings' },
            { name: 'metrics', url: 'http://127.0.0.1:5000/metrics/', description: 'Metrics' },
            { name: 'history', url: 'http://127.0.0.1:5000/history/', description: 'History' },
            { name: 'news', url: 'http://127.0.0.1:5000/news/', description: 'News Feed' },
            { name: 'benchmark', url: 'http://127.0.0.1:5000/benchmark/', description: 'Benchmark' }
        ];

        for (const pageInfo of pages) {
            console.log(`📸 Capturing ${pageInfo.description}...`);
            await page.goto(pageInfo.url, { waitUntil: 'domcontentloaded' });
            await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for any animations

            const screenshotPath = path.join(screenshotDir, `${pageInfo.name}.png`);
            await page.screenshot({
                path: screenshotPath,
                fullPage: true
            });
            console.log(`✅ Saved: ${screenshotPath}`);

            // Also capture mobile view
            await page.setViewport({ width: 375, height: 667 });
            await new Promise(resolve => setTimeout(resolve, 500));

            const mobileScreenshotPath = path.join(screenshotDir, `${pageInfo.name}_mobile.png`);
            await page.screenshot({
                path: mobileScreenshotPath,
                fullPage: true
            });
            console.log(`📱 Saved mobile: ${mobileScreenshotPath}`);

            // Reset to desktop
            await page.setViewport({ width: 1280, height: 720 });
        }

        console.log('\n✅ All screenshots captured successfully!');
        console.log(`📁 Screenshots saved to: ${screenshotDir}`);

    } catch (error) {
        console.error('❌ Error capturing screenshots:', error.message);
        throw error;
    } finally {
        await browser.close();
    }
}

// Run the test
captureUIScreenshots().catch(console.error);