adserver-dashboard 1.0.0

package/e2e/explore-sso.spec.ts

@@ -0,0 +1,149 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * SSO Flow Exploration Script
+ *
+ * Run this with: npm run test:e2e:headed explore-sso.spec.ts
+ * This will show you the actual flow and help understand the selectors
+ */
+
+test('Explore SSO Login Flow', async ({ page }) => {
+  // Enable slow motion to see what's happening
+  await page.goto('/login', { waitUntil: 'networkidle' });
+
+  console.log('\n=== STEP 1: Login Page ===');
+  console.log('URL:', page.url());
+
+  // Take screenshot
+  await page.screenshot({ path: 'explore-01-login-page.png', fullPage: true });
+  console.log('Screenshot saved: explore-01-login-page.png');
+
+  // Find all buttons on the page
+  const buttons = await page.locator('button').all();
+  console.log(`\nFound ${buttons.length} buttons:`);
+  for (let i = 0; i < buttons.length; i++) {
+    const text = await buttons[i].textContent();
+    const isVisible = await buttons[i].isVisible();
+    console.log(`  Button ${i + 1}: "${text}" (visible: ${isVisible})`);
+  }
+
+  // Look for SSO button
+  const ssoButton = page.locator('button:has-text("Sign in with MW ID")');
+  const ssoExists = await ssoButton.count();
+  console.log(`\nSSO Button exists: ${ssoExists > 0}`);
+
+  if (ssoExists > 0) {
+    console.log('\n=== STEP 2: Clicking SSO Button ===');
+    await ssoButton.click();
+
+    // Wait for navigation
+    await page.waitForLoadState('networkidle');
+    console.log('After SSO click URL:', page.url());
+
+    // Take screenshot
+    await page.screenshot({ path: 'explore-02-sso-provider.png', fullPage: true });
+    console.log('Screenshot saved: explore-02-sso-provider.png');
+
+    // Find all input fields
+    console.log('\n=== STEP 3: Analyzing SSO Form ===');
+    const inputs = await page.locator('input').all();
+    console.log(`Found ${inputs.length} input fields:`);
+    for (let i = 0; i < inputs.length; i++) {
+      const type = await inputs[i].getAttribute('type');
+      const name = await inputs[i].getAttribute('name');
+      const placeholder = await inputs[i].getAttribute('placeholder');
+      const isVisible = await inputs[i].isVisible();
+      console.log(`  Input ${i + 1}: type="${type}", name="${name}", placeholder="${placeholder}", visible=${isVisible}`);
+    }
+
+    // Find email input
+    const emailInput = page.locator('input[type="email"]').first();
+    const emailExists = await emailInput.count();
+    console.log(`\nEmail input exists: ${emailExists > 0}`);
+
+    if (emailExists > 0) {
+      console.log('\n=== STEP 4: Filling Form ===');
+
+      // Get credentials from env
+      const testEmail = process.env.SSO_TEST_USER || 'jeki@jeki.com';
+      const testPassword = process.env.SSO_TEST_PASSWORD || 'jeki@123';
+
+      console.log(`Using email: ${testEmail}`);
+
+      // Try different methods to fill
+      const passwordInput = page.locator('input[type="password"]').first();
+
+      // Method 1: Direct fill
+      await emailInput.click();
+      await emailInput.fill(testEmail);
+      await page.waitForTimeout(500);
+
+      await passwordInput.click();
+      await passwordInput.fill(testPassword);
+      await page.waitForTimeout(500);
+
+      // Check if filled
+      const emailValue = await emailInput.inputValue();
+      const passwordValue = await passwordInput.inputValue();
+      console.log(`Email filled: "${emailValue}" (length: ${emailValue.length})`);
+      console.log(`Password filled: ${passwordValue.length} characters`);
+
+      // Take screenshot
+      await page.screenshot({ path: 'explore-03-form-filled.png', fullPage: true });
+      console.log('Screenshot saved: explore-03-form-filled.png');
+
+      // Find submit button
+      const submitButtons = await page.locator('button[type="submit"], button:has-text("Sign in")').all();
+      console.log(`\nFound ${submitButtons.length} submit buttons`);
+      for (let i = 0; i < submitButtons.length; i++) {
+        const text = await submitButtons[i].textContent();
+        console.log(`  Submit button ${i + 1}: "${text}"`);
+      }
+
+      if (emailValue && passwordValue) {
+        console.log('\n=== STEP 5: Submitting Form ===');
+        const submitButton = page.locator('button[type="submit"]').first();
+        await submitButton.click();
+        console.log('Form submitted!');
+
+        // Wait for navigation
+        await page.waitForTimeout(3000);
+        console.log('After submit URL:', page.url());
+
+        // Take screenshot
+        await page.screenshot({ path: 'explore-04-after-submit.png', fullPage: true });
+        console.log('Screenshot saved: explore-04-after-submit.png');
+
+        // Check if we're authenticated
+        const isAuthenticated = !page.url().includes('login');
+        console.log(`\nAuthentication successful: ${isAuthenticated}`);
+
+        if (isAuthenticated) {
+          console.log('\n✅ SSO LOGIN SUCCESSFUL!');
+          console.log('Final URL:', page.url());
+        } else {
+          console.log('\n❌ Still on login page');
+
+          // Check for errors
+          const errorMessages = await page.locator('.error, [role="alert"], .text-red-500').all();
+          if (errorMessages.length > 0) {
+            console.log('\nError messages found:');
+            for (const error of errorMessages) {
+              const text = await error.textContent();
+              console.log(`  - ${text}`);
+            }
+          }
+        }
+      } else {
+        console.log('\n❌ Form fields not filled properly!');
+        console.log('This is a React form - we need to use different methods');
+      }
+    }
+  }
+
+  // Keep browser open for inspection
+  await page.waitForTimeout(5000);
+
+  console.log('\n=== EXPLORATION COMPLETE ===');
+  console.log('Check the screenshots to understand the flow');
+});

package/e2e/fixtures/auth.ts

@@ -0,0 +1,26 @@
+import { test as base, Page } from '@playwright/test';
+
+/**
+ * Authentication fixture for tests
+ * Handles login and maintains authenticated state
+ */
+export const test = base.extend<{ authenticatedPage: Page }>({
+  authenticatedPage: async ({ page }, use) => {
+    // Navigate to login page
+    await page.goto('/login');
+
+    // TODO: Add your authentication logic here
+    // For now, we'll just wait for navigation to complete
+    // You'll need to update this with actual login credentials
+
+    // Example login flow (update with your actual selectors):
+    // await page.fill('input[name="email"]', 'test@example.com');
+    // await page.fill('input[name="password"]', 'password');
+    // await page.click('button[type="submit"]');
+    // await page.waitForURL('/');
+
+    await use(page);
+  },
+});
+
+export { expect } from '@playwright/test';

package/e2e/fixtures/enhanced-test.ts

@@ -0,0 +1,331 @@
+import { test as base, expect, Page } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Enhanced test fixture with:
+ * - Automatic screenshot capture
+ * - Console log collection
+ * - Network monitoring
+ * - DOM snapshots
+ * - SSO authentication
+ */
+
+interface EnhancedTestFixtures {
+  authenticatedPage: Page;
+  testInfo: {
+    screenshotDir: string;
+    logDir: string;
+    consoleLogs: string[];
+    networkLogs: Array<{ url: string; status: number; method: string }>;
+    errors: string[];
+  };
+}
+
+export const test = base.extend<EnhancedTestFixtures>({
+  testInfo: async ({}, use, testInfo) => {
+    // Create directories for test artifacts
+    const testDir = path.join('test-results', testInfo.titlePath.join('-').replace(/[^a-z0-9]/gi, '_'));
+    const screenshotDir = path.join(testDir, 'screenshots');
+    const logDir = path.join(testDir, 'logs');
+
+    fs.mkdirSync(screenshotDir, { recursive: true });
+    fs.mkdirSync(logDir, { recursive: true });
+
+    const info = {
+      screenshotDir,
+      logDir,
+      consoleLogs: [] as string[],
+      networkLogs: [] as Array<{ url: string; status: number; method: string }>,
+      errors: [] as string[],
+    };
+
+    await use(info);
+
+    // Save logs at the end of the test
+    fs.writeFileSync(
+      path.join(logDir, 'console.log'),
+      info.consoleLogs.join('\n')
+    );
+    fs.writeFileSync(
+      path.join(logDir, 'network.json'),
+      JSON.stringify(info.networkLogs, null, 2)
+    );
+    if (info.errors.length > 0) {
+      fs.writeFileSync(
+        path.join(logDir, 'errors.log'),
+        info.errors.join('\n')
+      );
+    }
+  },
+
+  authenticatedPage: async ({ page, testInfo: info }, use) => {
+    // Set up console log capture
+    page.on('console', (msg) => {
+      const logMessage = `[${msg.type()}] ${msg.text()}`;
+      info.consoleLogs.push(logMessage);
+      console.log('🖥️  Console:', logMessage);
+    });
+
+    // Set up error capture
+    page.on('pageerror', (error) => {
+      const errorMessage = `[Page Error] ${error.message}\n${error.stack}`;
+      info.errors.push(errorMessage);
+      console.error('❌ Page Error:', error.message);
+    });
+
+    // Set up network monitoring
+    page.on('request', (request) => {
+      console.log('🌐 Request:', request.method(), request.url());
+    });
+
+    page.on('response', async (response) => {
+      const url = response.url();
+      const status = response.status();
+      const method = response.request().method();
+
+      info.networkLogs.push({ url, status, method });
+
+      if (status >= 400) {
+        console.error(`❌ HTTP ${status}:`, method, url);
+        try {
+          const body = await response.text();
+          info.errors.push(`[HTTP ${status}] ${method} ${url}\nResponse: ${body}`);
+        } catch (e) {
+          // Some responses can't be read
+        }
+      } else {
+        console.log(`✅ HTTP ${status}:`, method, url);
+      }
+    });
+
+    // Navigate to login page
+    console.log('\n🔐 Starting authentication flow...');
+    await page.goto('/login', { waitUntil: 'networkidle' });
+
+    // Take screenshot of login page
+    await page.screenshot({
+      path: path.join(info.screenshotDir, '01-login-page.png'),
+      fullPage: true,
+    });
+    console.log('📸 Screenshot: login page');
+
+    // Check if we're already logged in (redirect to home)
+    const currentUrl = page.url();
+    if (!currentUrl.includes('/login')) {
+      console.log('✅ Already authenticated, skipping login');
+      await use(page);
+      return;
+    }
+
+    // Look for SSO login button or form
+    console.log('🔍 Looking for login form...');
+
+    // Get SSO credentials from environment
+    const ssoUser = process.env.SSO_TEST_USER || process.env.TEST_EMAIL || '';
+    const ssoPassword = process.env.SSO_TEST_PASSWORD || process.env.TEST_PASSWORD || '';
+    const ssoProvider = process.env.SSO_PROVIDER || 'Sign in with MW ID';
+
+    // Check for different login scenarios
+    const ssoButton = page.locator(`button:has-text("${ssoProvider}")`);
+    const emailInput = page.locator('input[name="email"], input[type="email"]');
+    const passwordInput = page.locator('input[name="password"], input[type="password"]');
+
+    // Scenario 1: SSO Button (primary method)
+    if (await ssoButton.isVisible({ timeout: 5000 }).catch(() => false)) {
+      console.log(`🎯 SSO button found: "${ssoProvider}", clicking...`);
+
+      // Click SSO button and wait for navigation to SSO provider
+      await ssoButton.click();
+      console.log('⏳ Waiting for SSO provider page...');
+      await page.waitForLoadState('networkidle', { timeout: 15000 });
+
+      await page.screenshot({
+        path: path.join(info.screenshotDir, '02-after-sso-click.png'),
+        fullPage: true,
+      });
+      console.log('📸 Screenshot: SSO provider page');
+
+      // Now on SSO provider page - enter credentials
+      console.log('🔍 Looking for SSO login form...');
+      const ssoEmailInput = page.locator('input[name="email"], input[type="email"], input[name="username"]').first();
+      const ssoPasswordInput = page.locator('input[name="password"], input[type="password"]').first();
+
+      if (await ssoEmailInput.isVisible({ timeout: 5000 }).catch(() => false)) {
+        console.log('📝 Filling SSO credentials...');
+
+        // Fill email field using pressSequentially for React forms
+        await ssoEmailInput.click();
+        await page.waitForTimeout(100);
+        await ssoEmailInput.clear();
+        await page.waitForTimeout(100);
+
+        // Type character by character for React forms
+        await ssoEmailInput.pressSequentially(ssoUser, { delay: 50 });
+        await page.waitForTimeout(200);
+        console.log(`   Email filled: ${ssoUser}`);
+
+        // Fill password field using pressSequentially for React forms
+        await ssoPasswordInput.click();
+        await page.waitForTimeout(100);
+        await ssoPasswordInput.clear();
+        await page.waitForTimeout(100);
+
+        // Type character by character for React forms
+        await ssoPasswordInput.pressSequentially(ssoPassword, { delay: 50 });
+        await page.waitForTimeout(200);
+        console.log('   Password filled');
+
+        // Wait for form validation
+        await page.waitForTimeout(500);
+
+        await page.screenshot({
+          path: path.join(info.screenshotDir, '02-sso-form-filled.png'),
+          fullPage: true,
+        });
+        console.log('📸 Screenshot: SSO form filled');
+
+        // Verify fields are filled
+        const emailValue = await ssoEmailInput.inputValue();
+        const passwordValue = await ssoPasswordInput.inputValue();
+        console.log(`   Email value: ${emailValue}`);
+        console.log(`   Password length: ${passwordValue.length}`);
+
+        if (!emailValue || !passwordValue) {
+          console.error('❌ Form fields not properly filled!');
+          await page.screenshot({
+            path: path.join(info.screenshotDir, '02-sso-form-fill-failed.png'),
+            fullPage: true,
+          });
+          throw new Error('SSO form fields not properly filled');
+        }
+
+        // Find and click SSO submit button
+        const ssoSubmitButton = page.locator('button[type="submit"], button:has-text("Login"), button:has-text("Sign in"), button:has-text("Continue")').first();
+        console.log('🔍 Clicking submit button...');
+        await ssoSubmitButton.click();
+        console.log('🚀 SSO login form submitted');
+
+        // Wait for redirect back to application
+        console.log('⏳ Waiting for redirect back to application...');
+
+        // Wait for navigation with a more flexible condition
+        try {
+          await page.waitForNavigation({ timeout: 30000, waitUntil: 'networkidle' });
+          console.log('✅ Navigation detected');
+        } catch (e) {
+          console.log('⚠️  Navigation timeout, checking current URL...');
+        }
+
+        // Verify we're no longer on login page
+        const currentUrl = page.url();
+        console.log(`   Current URL: ${currentUrl}`);
+
+        if (currentUrl.includes('login') || currentUrl.includes('sign')) {
+          console.error('❌ Still on login page after submit');
+          await page.screenshot({
+            path: path.join(info.screenshotDir, '02-sso-submit-failed.png'),
+            fullPage: true,
+          });
+          throw new Error('SSO authentication failed - still on login page');
+        }
+
+        console.log('✅ SSO authentication successful');
+      } else {
+        console.log('⚠️  SSO form not found on provider page');
+      }
+    }
+    // Scenario 2: Direct Email/Password form (no SSO)
+    else if (await emailInput.isVisible({ timeout: 5000 }).catch(() => false)) {
+      console.log('📝 Direct email/password form found');
+
+      await emailInput.fill(ssoUser);
+      await passwordInput.fill(ssoPassword);
+
+      await page.screenshot({
+        path: path.join(info.screenshotDir, '02-login-form-filled.png'),
+        fullPage: true,
+      });
+
+      // Find and click submit button
+      const submitButton = page.locator('button[type="submit"], button:has-text("Login"), button:has-text("Sign in")').first();
+      await submitButton.click();
+      console.log('🚀 Login form submitted');
+
+      // Wait for navigation to complete
+      await page.waitForLoadState('networkidle', { timeout: 15000 }).catch(() => {});
+      await page.waitForURL((url) => !url.toString().includes('login'), { timeout: 10000 }).catch(() => {});
+    }
+    // Scenario 3: No login required (dev mode)
+    else {
+      console.log('⚠️  No login form found - might be in dev mode');
+      await page.goto('/');
+    }
+
+    // Take screenshot after login
+    await page.screenshot({
+      path: path.join(info.screenshotDir, '03-authenticated-home.png'),
+      fullPage: true,
+    });
+    console.log('✅ Authentication complete\n');
+
+    await use(page);
+  },
+});
+
+export { expect };
+
+/**
+ * Helper function to take annotated screenshots
+ */
+export async function takeScreenshot(page: Page, name: string, info: EnhancedTestFixtures['testInfo']) {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const filename = `${timestamp}-${name}.png`;
+  const filepath = path.join(info.screenshotDir, filename);
+
+  await page.screenshot({ path: filepath, fullPage: true });
+  console.log(`📸 Screenshot: ${name}`);
+  return filepath;
+}
+
+/**
+ * Helper function to save DOM snapshot
+ */
+export async function saveDOMSnapshot(page: Page, name: string, info: EnhancedTestFixtures['testInfo']) {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const filename = `${timestamp}-${name}.html`;
+  const filepath = path.join(info.logDir, filename);
+
+  const html = await page.content();
+  fs.writeFileSync(filepath, html);
+  console.log(`💾 DOM Snapshot: ${name}`);
+  return filepath;
+}
+
+/**
+ * Helper to wait and log network idle
+ */
+export async function waitForNetworkIdle(page: Page) {
+  console.log('⏳ Waiting for network idle...');
+  await page.waitForLoadState('networkidle');
+  console.log('✅ Network idle');
+}
+
+/**
+ * Helper to check for specific API responses
+ */
+export async function waitForAPIResponse(page: Page, urlPattern: string | RegExp) {
+  console.log(`⏳ Waiting for API response: ${urlPattern}`);
+  const response = await page.waitForResponse(
+    (resp) => {
+      const url = resp.url();
+      if (typeof urlPattern === 'string') {
+        return url.includes(urlPattern);
+      }
+      return urlPattern.test(url);
+    },
+    { timeout: 30000 }
+  );
+  console.log(`✅ API response received: ${response.status()}`);
+  return response;
+}