upskill-event-manager/wordpress-dev/tests/e2e/ui-styling-analysis.test.ts

import { test, expect } from '@playwright/test';

test.describe('UI Styling Analysis', () => {
  test('WordPress Homepage and Theme Analysis', async ({ page }) => {
    console.log('=== Analyzing WordPress Theme ===');
    
    // Capture homepage
    await page.goto('https://upskill-staging.measurequick.com/', { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);
    
    await page.screenshot({ 
      path: 'test-results/ui-review-wordpress-homepage.png',
      fullPage: true 
    });
    
    // Extract theme styling information
    const themeAnalysis = await page.evaluate(() => {
      const body = document.body;
      const bodyStyle = getComputedStyle(body);
      const header = document.querySelector('h1, .site-title, header h1, .wp-block-site-title') || body;
      const headerStyle = getComputedStyle(header);
      const link = document.querySelector('a') || body;
      const linkStyle = getComputedStyle(link);
      const button = document.querySelector('button, .wp-block-button__link') || body;
      const buttonStyle = getComputedStyle(button);
      
      // Try to get CSS custom properties
      const root = document.documentElement;
      const rootStyle = getComputedStyle(root);
      
      return {
        // Typography
        bodyFont: bodyStyle.fontFamily,
        bodyFontSize: bodyStyle.fontSize,
        bodyLineHeight: bodyStyle.lineHeight,
        bodyFontWeight: bodyStyle.fontWeight,
        
        // Colors
        bodyColor: bodyStyle.color,
        bodyBackground: bodyStyle.backgroundColor,
        headerColor: headerStyle.color,
        linkColor: linkStyle.color,
        linkHoverColor: getComputedStyle(link, ':hover').color,
        buttonColor: buttonStyle.color,
        buttonBackground: buttonStyle.backgroundColor,
        
        // Layout
        bodyMargin: bodyStyle.margin,
        bodyPadding: bodyStyle.padding,
        containerMaxWidth: getComputedStyle(document.querySelector('.container, .wp-site-blocks, main') || body).maxWidth,
        
        // WordPress specific
        primaryColor: rootStyle.getPropertyValue('--wp--preset--color--primary').trim(),
        secondaryColor: rootStyle.getPropertyValue('--wp--preset--color--secondary').trim(),
        accentColor: rootStyle.getPropertyValue('--wp--preset--color--accent').trim(),
        
        // Theme name detection
        themeClasses: document.body.className,
        stylesheets: Array.from(document.styleSheets).map(sheet => {
          try {
            return sheet.href || 'inline';
          } catch (e) {
            return 'cross-origin';
          }
        }).filter(href => href.includes('theme') || href.includes('style'))
      };
    });
    
    console.log('🎨 WordPress Theme Analysis:', JSON.stringify(themeAnalysis, null, 2));
    
    // Save theme analysis to file
    await page.evaluate((analysis) => {
      const blob = new Blob([JSON.stringify(analysis, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'theme-analysis.json';
      a.click();
    }, themeAnalysis);
  });
  
  test('Event Summary Page - Direct Access', async ({ page }) => {
    console.log('=== Capturing Event Summary Page ===');
    
    // Login first
    await page.goto('https://upskill-staging.measurequick.com/community-login');
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    await page.waitForURL('**/hvac-dashboard/**');
    await page.waitForLoadState('networkidle');
    
    // Try to access an event summary directly with a known event ID
    await page.goto('https://upskill-staging.measurequick.com/event-summary/?event_id=5443', { 
      waitUntil: 'networkidle' 
    });
    await page.waitForTimeout(2000);
    
    await page.screenshot({ 
      path: 'test-results/ui-review-event-summary-direct.png',
      fullPage: true 
    });
    
    console.log('✅ Event Summary captured');
  });
  
  test('Mobile Responsiveness Analysis', async ({ page }) => {
    console.log('=== Mobile Responsiveness Analysis ===');
    
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE
    
    // Login
    await page.goto('https://upskill-staging.measurequick.com/community-login');
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    await page.waitForURL('**/hvac-dashboard/**');
    await page.waitForLoadState('networkidle');
    
    // Key pages for mobile testing
    const mobilePages = [
      { name: 'dashboard', url: '/hvac-dashboard' },
      { name: 'generate-certificates', url: '/generate-certificates' },
      { name: 'certificate-reports', url: '/certificate-reports' },
      { name: 'my-events', url: '/my-events' }
    ];
    
    for (const pageInfo of mobilePages) {
      console.log(`📱 Mobile: ${pageInfo.name}`);
      
      await page.goto(`https://upskill-staging.measurequick.com${pageInfo.url}`, { 
        waitUntil: 'networkidle' 
      });
      await page.waitForTimeout(2000);
      
      await page.screenshot({ 
        path: `test-results/ui-review-${pageInfo.name}-mobile.png`,
        fullPage: true 
      });
    }
    
    console.log('✅ Mobile screenshots complete');
  });
});