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

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

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

    try {
        const page = await browser.newPage();

        // Set mobile viewport (iPhone 12 Pro)
        await page.setViewport({
            width: 390,
            height: 844,
            isMobile: true,
            hasTouch: true
        });

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

        // Pages to test on mobile
        const pages = [
            { url: 'http://127.0.0.1:5000/metrics/', name: 'metrics-main-mobile' },
            { url: 'http://127.0.0.1:5000/metrics/context-overflow', name: 'context-overflow-mobile' },
            { url: 'http://127.0.0.1:5000/metrics/star-reviews', name: 'star-reviews-mobile' },
            { url: 'http://127.0.0.1:5000/settings/', name: 'settings-mobile' }
        ];

        for (const pageInfo of pages) {
            console.log(`\nTesting ${pageInfo.name}...`);

            await page.goto(pageInfo.url, {
                waitUntil: 'domcontentloaded',
                timeout: 30000
            });

            // Wait for content to load
            await new Promise(resolve => setTimeout(resolve, 3000));

            // Take full page screenshot
            await page.screenshot({
                path: `./${pageInfo.name}.png`,
                fullPage: true
            });
            console.log(`📱 Screenshot saved: ${pageInfo.name}.png`);

            // Check viewport and scroll info
            const mobileInfo = await page.evaluate(() => {
                const body = document.body;
                const html = document.documentElement;

                return {
                    viewportWidth: window.innerWidth,
                    viewportHeight: window.innerHeight,
                    scrollWidth: body.scrollWidth,
                    scrollHeight: Math.max(
                        body.scrollHeight,
                        body.offsetHeight,
                        html.clientHeight,
                        html.scrollHeight,
                        html.offsetHeight
                    ),
                    hasHorizontalScroll: body.scrollWidth > window.innerWidth,
                    bodyHeight: body.offsetHeight,
                    overflow: window.getComputedStyle(body).overflow
                };
            });

            console.log(`Mobile dimensions for ${pageInfo.name}:`, mobileInfo);

            if (mobileInfo.hasHorizontalScroll) {
                console.log(`⚠️  WARNING: Horizontal scroll detected on ${pageInfo.name}`);
            }

            if (mobileInfo.scrollHeight > 10000) {
                console.log(`⚠️  WARNING: Excessive height (${mobileInfo.scrollHeight}px) on ${pageInfo.name}`);
            }
        }

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

testMobileMetrics().catch(console.error);