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

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

async function captureMetricsScreenshot() {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

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

        const auth = new AuthHelper(page);
        await auth.ensureAuthenticated();

        console.log('Navigating to metrics...');
        await page.goto('http://127.0.0.1:5000/metrics/', {
            waitUntil: 'domcontentloaded',
            timeout: 30000
        });

        // Wait for content to fully load
        console.log('Waiting for metrics to load...');
        await page.waitForSelector('.ldr-metrics-grid, .metrics-grid', { timeout: 10000 }).catch(() => {});
        await new Promise(resolve => setTimeout(resolve, 5000));

        // Take screenshot
        await page.screenshot({
            path: './metrics-grid-final.png',
            fullPage: true
        });
        console.log('Screenshot saved: ./metrics-grid-final.png');

        // Check grid layout
        const gridInfo = await page.evaluate(() => {
            const grid = document.querySelector('.ldr-metrics-grid');
            if (!grid) return { error: 'Grid not found' };

            const cards = grid.querySelectorAll('.ldr-metric-card');
            const gridStyle = window.getComputedStyle(grid);

            // Check card positions to see if they're side by side
            const cardPositions = Array.from(cards).map(card => ({
                left: card.offsetLeft,
                top: card.offsetTop,
                width: card.offsetWidth,
                height: card.offsetHeight,
                text: card.querySelector('.ldr-metric-label')?.textContent?.trim()
            }));

            // Group cards by row (same top position)
            const rows = {};
            cardPositions.forEach(card => {
                if (!rows[card.top]) rows[card.top] = [];
                rows[card.top].push(card);
            });

            return {
                display: gridStyle.display,
                gridTemplateColumns: gridStyle.gridTemplateColumns,
                gap: gridStyle.gap,
                totalCards: cards.length,
                cardsPerRow: Object.values(rows)[0]?.length || 0,
                rows: Object.keys(rows).length,
                cardPositions
            };
        });

        console.log('Grid Layout Analysis:', JSON.stringify(gridInfo, null, 2));

        if (gridInfo.display === 'grid' && gridInfo.cardsPerRow > 1) {
            console.log('✅ SUCCESS: Metrics are displayed in grid layout (side by side)');
        } else {
            console.log('❌ ISSUE: Metrics are not displayed side by side');
        }

    } finally {
        await browser.close();
    }
}

captureMetricsScreenshot().catch(console.error);