test-frontend-core.js

import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // Listen for console logs and errors
  page.on('console', msg => console.log('CONSOLE:', msg.text()));
  page.on('pageerror', error => console.log('ERROR:', error.message));

  try {
    console.log('Testing core frontend functionality...');
    await page.goto('http://localhost:5174/tenant/user0001_project0001/dashboard', { waitUntil: 'networkidle' });

    await page.waitForTimeout(3000);
    console.log('Page loaded, title:', await page.title());
    console.log('URL:', page.url());

    // Test navigation elements
    const navCount = await page.locator('nav').count();
    const dashboardCount = await page.getByText('Dashboard').count();
    const productsCount = await page.getByText('Products').count();
    const categoriesCount = await page.getByText('Categories').count();
    const customersCount = await page.getByText('Customers').count();
    const ordersCount = await page.getByText('Orders').count();

    console.log('Navigation elements:', {
      nav: navCount,
      dashboard: dashboardCount,
      products: productsCount,
      categories: categoriesCount,
      customers: customersCount,
      orders: ordersCount
    });

    // Test navigation to Products page
    console.log('\nTesting Products page navigation...');
    await page.getByText('Products').first().click();
    await page.waitForTimeout(2000);

    const currentUrl = page.url();
    console.log('Products page URL:', currentUrl);

    // Check for products table/grid
    const productsTable = await page.locator('table, [data-testid="products-grid"], .products-container').count();
    console.log('Products display elements:', productsTable);

    // Check for product data or loading state
    const productRows = await page.locator('table tbody tr, [data-testid="product-item"]').count();
    console.log('Product rows found:', productRows);

    // Test search functionality if present
    const searchInput = page.getByPlaceholder(/search/i).first();
    const searchVisible = await searchInput.isVisible().catch(() => false);
    console.log('Search input visible:', searchVisible);

    if (searchVisible) {
      await searchInput.fill('test');
      await page.waitForTimeout(1000);
      console.log('Search executed successfully');
    }

    // Take final screenshot
    await page.screenshot({ path: 'frontend-core-test.png' });
    console.log('Screenshot saved as frontend-core-test.png');

    console.log('\n✅ Core frontend functionality test completed successfully');

  } catch (error) {
    console.error('❌ Error during frontend test:', error);
    await page.screenshot({ path: 'frontend-error.png' });
  }

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