playwright-inspect.ts

import { chromium } from 'playwright';

async function inspectUI() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
  const page = await context.newPage();

  try {
    await page.goto('http://localhost:5173', { waitUntil: 'networkidle', timeout: 10000 });

    // Take screenshot
    await page.screenshot({ path: 'ui-screenshot.png', fullPage: true });

    // Get page structure
    const bodyHTML = await page.evaluate(() => document.body.innerHTML);
    console.log('\n=== Page Structure ===');
    console.log(bodyHTML.substring(0, 2000)); // First 2000 chars

    // Check for console errors
    const errors: string[] = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });

    // Get computed styles of main elements
    const styles = await page.evaluate(() => {
      const elements = {
        body: document.body,
        main: document.querySelector('main'),
        header: document.querySelector('header'),
        chatBox: document.querySelector('[class*="ChatBox"]') || document.querySelector('div[class*="flex"]'),
      };

      const results: any = {};
      for (const [key, el] of Object.entries(elements)) {
        if (el) {
          const computed = window.getComputedStyle(el as Element);
          results[key] = {
            display: computed.display,
            backgroundColor: computed.backgroundColor,
            padding: computed.padding,
            margin: computed.margin,
          };
        }
      }
      return results;
    });

    console.log('\n=== Computed Styles ===');
    console.log(JSON.stringify(styles, null, 2));

    // Check accessibility
    const accessibilityIssues = await page.evaluate(() => {
      const issues: string[] = [];

      // Check for buttons without accessible names
      document.querySelectorAll('button').forEach((btn, i) => {
        if (!btn.textContent?.trim() && !btn.getAttribute('aria-label')) {
          issues.push(`Button ${i} has no accessible name`);
        }
      });

      // Check for inputs without labels
      document.querySelectorAll('input, textarea').forEach((input, i) => {
        const id = input.getAttribute('id');
        if (id && !document.querySelector(`label[for="${id}"]`)) {
          issues.push(`Input/Textarea ${i} has no associated label`);
        }
      });

      return issues;
    });

    console.log('\n=== Accessibility Issues ===');
    console.log(accessibilityIssues.length > 0 ? accessibilityIssues.join('\n') : 'No major issues found');

    // Get text content analysis
    const textContent = await page.evaluate(() => {
      return {
        headings: Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')).map(h => ({
          tag: h.tagName,
          text: h.textContent?.trim()
        })),
        buttons: Array.from(document.querySelectorAll('button')).map(b => b.textContent?.trim()),
        inputs: Array.from(document.querySelectorAll('input, textarea')).map(i => ({
          type: i.getAttribute('type') || 'textarea',
          placeholder: i.getAttribute('placeholder')
        }))
      };
    });

    console.log('\n=== Page Content ===');
    console.log(JSON.stringify(textContent, null, 2));

    console.log('\n✅ Screenshot saved to ui-screenshot.png');

  } catch (error) {
    console.error('Error inspecting UI:', error);
  } finally {
    await browser.close();
  }
}

inspectUI();