qa360 2.1.2 → 2.1.4

package/core/src/adapters/playwright-ui.ts

@@ -0,0 +1,1088 @@
+/**
+ * QA360 Playwright UI Adapter (Extended)
+ * Complete UI E2E testing with all Playwright actions
+ *
+ * Playwright++ Features:
+ * - Video recording (always/retain-on-fail/never)
+ * - Automatic screenshots (before/after steps, on error)
+ * - Trace capture for debugging
+ * - Artifacts management with CAS
+ * - HTML report generation
+ */
+
+import { chromium, firefox, webkit, Browser, BrowserContext, Page } from '@playwright/test';
+import type { WebTarget, PackBudgets, UiTestDefinition, UiTestStep, UiAssertion } from '../types/pack-v1.js';
+import { SecurityRedactor } from '../security/redactor.js';
+import { AuthCredentials } from '../auth/index.js';
+import { AssertionsEngine, createAssertionsEngine } from '../assertions/index.js';
+import { UIArtifactsManager, type ScreenshotArtifact } from '../artifacts/index.js';
+import { HTMLReporter, generateHTMLReport, type ReportData, type TestReport } from '../reporting/index.js';
+import { mkdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+// Types pour page.evaluate() - code exécuté dans le navigateur Playwright
+declare const document: {
+  title: string;
+  querySelector: (selector: string) => Element | null;
+  querySelectorAll: (selector: string) => { length: number };
+};
+declare const window: {
+  location: { href: string };
+};
+
+export interface UiTestConfig {
+  target: WebTarget;
+  budgets?: PackBudgets;
+  timeout?: number;
+  auth?: AuthCredentials;
+  login?: {
+    url?: string;
+    username?: string;
+    password?: string;
+    usernameSelector?: string;
+    passwordSelector?: string;
+    submitSelector?: string;
+  };
+  /** CLI override for headed mode */
+  cliHeaded?: boolean;
+  /** Playwright++: Artifacts configuration */
+  artifacts?: {
+    screenshots?: 'always' | 'only-on-failure' | 'never';
+    video?: 'always' | 'retain-on-failure' | 'never';
+    trace?: 'always' | 'retain-on-failure' | 'never' | 'on-first-failure';
+    outputDir?: string;
+  };
+  /** Playwright++: HTML report generation */
+  htmlReport?: string;
+  /** Playwright++: Bail after N failures */
+  bail?: number;
+}
+
+export interface UiTestResult {
+  page: string;
+  success: boolean;
+  loadTime: number;
+  error?: string;
+  screenshot?: string;
+  video?: string;
+  /** Playwright++: Artifacts paths */
+  artifacts?: {
+    screenshots: string[];
+    videos: string[];
+    traces: string[];
+  };
+  accessibility?: {
+    score: number;
+    violations: Array<{
+      id: string;
+      impact: 'minor' | 'moderate' | 'serious' | 'critical';
+      description: string;
+      nodes: number;
+    }>;
+  };
+  domSnapshot?: {
+    title: string;
+    url: string;
+    elements: {
+      buttons: number;
+      links: number;
+      forms: number;
+      inputs: number;
+    };
+  };
+}
+
+export interface UiTestStepResult {
+  step: UiTestStep;
+  success: boolean;
+  error?: string;
+  duration: number;
+  screenshot?: string;
+}
+
+export interface UiE2eResult {
+  test: UiTestDefinition;
+  success: boolean;
+  steps: UiTestStepResult[];
+  duration: number;
+  error?: string;
+}
+
+export interface UiSmokeResult {
+  success: boolean;
+  results: UiTestResult[];
+  e2eResults?: UiE2eResult[];
+  summary: {
+    total: number;
+    passed: number;
+    failed: number;
+    avgLoadTime: number;
+    avgA11yScore: number;
+  };
+  junit?: string;
+}
+
+export class PlaywrightUiAdapter {
+  private browser?: Browser;
+  private context?: BrowserContext;
+  private page?: Page;
+  private redactor: SecurityRedactor;
+  private auth?: AuthCredentials;
+  private assertions?: AssertionsEngine;
+
+  // Storage for artifacts
+  private artifactDir: string;
+  private videoDir: string;
+  private traceDir: string;
+
+  // Playwright++: Artifacts manager
+  private artifactsManager?: UIArtifactsManager;
+  private failureCount = 0;
+  private currentTestId?: string;
+  private allScreenshots: ScreenshotArtifact[] = [];
+  private allVideos: string[] = [];
+  private allTraces: string[] = [];
+
+  constructor() {
+    this.redactor = SecurityRedactor.forLogs();
+    this.artifactDir = '.qa360/artifacts/ui';
+    this.videoDir = `${this.artifactDir}/videos`;
+    this.traceDir = `${this.artifactDir}/traces`;
+  }
+
+  /**
+   * Set authentication credentials for requests
+   */
+  setAuth(credentials?: AuthCredentials): void {
+    this.auth = credentials;
+  }
+
+  /**
+   * Execute UI smoke tests with accessibility
+   * Playwright++: Supports artifacts, screenshots, video, trace, HTML reporting
+   */
+  async runSmokeTests(config: UiTestConfig): Promise<UiSmokeResult> {
+    const startTime = Date.now();
+    const outputDir = config.artifacts?.outputDir || this.artifactDir;
+
+    // Ensure output directories exist
+    for (const dir of [outputDir, this.videoDir, this.traceDir]) {
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+    }
+
+    // Initialize artifacts manager if Playwright++ features enabled
+    const artifactsEnabled = config.artifacts?.screenshots !== 'never' ||
+                           config.artifacts?.video !== 'never' ||
+                           config.artifacts?.trace !== 'never';
+
+    if (artifactsEnabled) {
+      this.artifactsManager = new UIArtifactsManager(outputDir, '.qa360/runs/cas');
+    }
+
+    try {
+      // Store auth config
+      this.auth = config.auth;
+      this.failureCount = 0;
+      this.allScreenshots = [];
+      this.allVideos = [];
+      this.allTraces = [];
+
+      await this.setupBrowser(config);
+
+      const results: UiTestResult[] = [];
+      const pages = config.target.pages || [config.target.baseUrl];
+
+      console.log(`🖥️  Running UI smoke tests (${pages.length} pages)`);
+
+      // Optional login first
+      if (config.login) {
+        await this.performLogin(config.login);
+      }
+
+      for (const pageUrl of pages) {
+        // Start artifacts for this test
+        this.currentTestId = `smoke-${this.failureCount}`;
+        this.artifactsManager?.startTest(this.currentTestId);
+
+        const testResult = await this.testPage(pageUrl, config);
+        results.push(testResult);
+
+        if (testResult.success) {
+          const a11yInfo = testResult.accessibility ?
+            ` | A11y: ${testResult.accessibility.score}% (${testResult.accessibility.violations.length} issues)` : '';
+          console.log(`  ✅ ${pageUrl} -> ${testResult.loadTime}ms${a11yInfo}`);
+        } else {
+          this.failureCount++;
+          console.log(`  ❌ ${pageUrl} -> ${testResult.error}`);
+
+          // Check bail condition
+          if (config.bail && this.failureCount >= config.bail) {
+            console.log(`  🛑 Bailing after ${this.failureCount} failures`);
+            break;
+          }
+        }
+
+        this.artifactsManager?.endTest();
+      }
+
+      // Run E2E tests if defined
+      let e2eResults: UiE2eResult[] = [];
+      if (config.target.uiTests && config.target.uiTests.length > 0) {
+        console.log(`🧪 Running E2E tests (${config.target.uiTests.length} tests)`);
+        for (const test of config.target.uiTests) {
+          if (test.enabled !== false) {
+            // Start artifacts for this test
+            this.currentTestId = `e2e-${test.name}`;
+            this.artifactsManager?.startTest(this.currentTestId);
+
+            const result = await this.runE2eTest(test, config);
+            e2eResults.push(result);
+            const status = result.success ? '✅' : '❌';
+            console.log(`  ${status} ${test.name} (${result.duration}ms)`);
+            if (!result.success) {
+              console.log(`      Error: ${result.error}`);
+              this.failureCount++;
+
+              // Check bail condition
+              if (config.bail && this.failureCount >= config.bail) {
+                console.log(`  🛑 Bailing after ${this.failureCount} failures`);
+                this.artifactsManager?.endTest();
+                break;
+              }
+            }
+
+            this.artifactsManager?.endTest();
+          }
+        }
+      }
+
+      const summary = this.calculateSummary(results, e2eResults);
+      const junit = this.generateJUnit(results, e2eResults);
+
+      // Playwright++: Generate HTML report if requested
+      if (config.htmlReport) {
+        await this.generateHtmlReport(config, results, e2eResults, summary);
+      }
+
+      return {
+        success: summary.failed === 0,
+        results,
+        e2eResults,
+        summary,
+        junit
+      };
+
+    } finally {
+      await this.cleanup(config);
+    }
+  }
+
+  /**
+   * Run a single E2E test
+   * Playwright++: Takes before/after screenshots, captures artifacts on failure
+   */
+  async runE2eTest(test: UiTestDefinition, config: UiTestConfig): Promise<UiE2eResult> {
+    const startTime = Date.now();
+    const steps: UiTestStepResult[] = [];
+    const screenshotMode = config.artifacts?.screenshots || 'never';
+
+    try {
+      // Determine starting URL
+      const startUrl = test.url || `${config.target.baseUrl.replace(/\/$/, '')}${test.path || ''}`;
+
+      // Navigate to start URL
+      console.log(`    📍 Navigate to: ${startUrl}`);
+      await this.page!.goto(startUrl, { timeout: test.timeout || config.timeout || 30000 });
+
+      // Take initial screenshot
+      if (screenshotMode === 'always') {
+        await this.artifactsManager?.takeScreenshot(this.page!, {}, {
+          testId: this.currentTestId || 'unknown',
+          type: 'screenshot',
+          tags: ['initial'],
+        });
+      }
+
+      // Initialize assertions engine
+      this.assertions = createAssertionsEngine(this.page!);
+
+      // Execute each step
+      for (let i = 0; i < test.steps.length; i++) {
+        const step = test.steps[i];
+
+        // Take before screenshot if configured
+        if (screenshotMode === 'always') {
+          await this.artifactsManager?.takeBeforeScreenshot(this.page!, step.action || 'step', i);
+        }
+
+        const stepResult = await this.executeStep(step, config);
+        steps.push(stepResult);
+
+        // Take after screenshot (always on failure, or always if configured)
+        if (screenshotMode === 'always' || (screenshotMode === 'only-on-failure' && !stepResult.success)) {
+          await this.artifactsManager?.takeAfterScreenshot(
+            this.page!,
+            step.action || 'step',
+            i,
+            stepResult.success
+          );
+        }
+
+        if (!stepResult.success) {
+          // Take error screenshot
+          await this.artifactsManager?.takeErrorScreenshot(this.page!, new Error(stepResult.error || 'Step failed'), step.action);
+
+          return {
+            test,
+            success: false,
+            steps,
+            duration: Date.now() - startTime,
+            error: stepResult.error,
+          };
+        }
+      }
+
+      return {
+        test,
+        success: true,
+        steps,
+        duration: Date.now() - startTime,
+      };
+
+    } catch (error) {
+      // Take error screenshot
+      await this.artifactsManager?.takeErrorScreenshot(this.page!, error as Error);
+
+      return {
+        test,
+        success: false,
+        steps,
+        duration: Date.now() - startTime,
+        error: this.redactor.redact(error instanceof Error ? error.message : 'Unknown error'),
+      };
+    }
+  }
+
+  /**
+   * Execute a single UI test step
+   * Playwright++: Enhanced error handling with artifacts
+   */
+  private async executeStep(step: UiTestStep, config: UiTestConfig): Promise<UiTestStepResult> {
+    const startTime = Date.now();
+    let screenshot: string | undefined;
+
+    try {
+      const { action, selector, value, options = {}, expected } = step;
+      const opts = { timeout: 5000, ...options };
+
+      switch (action) {
+        case 'navigate':
+          await this.page!.goto(value!, opts);
+          break;
+
+        case 'click':
+          await this.page!.click(selector!, opts);
+          break;
+
+        case 'dblClick':
+          await this.page!.dblclick(selector!, opts);
+          break;
+
+        case 'rightClick':
+          await this.page!.click(selector!, { ...opts, button: 'right' });
+          break;
+
+        case 'hover':
+          await this.page!.hover(selector!, opts);
+          break;
+
+        case 'focus':
+          await this.page!.focus(selector!, opts);
+          break;
+
+        case 'fill':
+          await this.page!.fill(selector!, value!, opts);
+          break;
+
+        case 'type':
+          await this.page!.type(selector!, value!, opts);
+          break;
+
+        case 'clear':
+          await this.page!.fill(selector!, '', opts);
+          break;
+
+        case 'select':
+          if (value !== undefined) {
+            await this.page!.selectOption(selector!, value, opts);
+          }
+          break;
+
+        case 'check':
+          await this.page!.check(selector!, opts);
+          break;
+
+        case 'uncheck':
+          await this.page!.uncheck(selector!, opts);
+          break;
+
+        case 'upload':
+          if (value !== undefined) {
+            await this.page!.setInputFiles(selector!, value, opts);
+          }
+          break;
+
+        case 'press': {
+          const delay = (options as any)?.delay;
+          const pressOpts = delay !== undefined ? { delay } : {};
+          await this.page!.keyboard.press(value!, pressOpts);
+          break;
+        }
+
+        case 'waitFor':
+        case 'waitForSelector':
+          await this.page!.waitForSelector(selector!, opts);
+          break;
+
+        case 'waitForNavigation':
+          await this.page!.waitForNavigation(opts);
+          break;
+
+        case 'waitForTimeout':
+          await this.page!.waitForTimeout(parseInt(value!, 10));
+          break;
+
+        case 'scroll':
+          if (selector) {
+            await this.page!.evaluate((sel: string) => {
+              const el = document.querySelector(sel);
+              if (el) (el as Element).scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, selector);
+          }
+          break;
+
+        case 'dragAndDrop':
+          await this.page!.dragAndDrop(selector!, value!, opts);
+          break;
+
+        case 'tap':
+          await this.page!.tap(selector!, opts);
+          break;
+
+        default:
+          throw new Error(`Unknown action: ${action}`);
+      }
+
+      // Add wait after action if specified
+      if (step.wait) {
+        await this.page!.waitForTimeout(step.wait);
+      }
+
+      // Take screenshot on failure if configured (will be checked in catch block)
+      // or take screenshot if requested
+
+      // Verify expected outcomes
+      if (expected) {
+        await this.verifyExpected(expected);
+      }
+
+      return {
+        step,
+        success: true,
+        duration: Date.now() - startTime,
+        screenshot,
+      };
+
+    } catch (error) {
+      // Take screenshot on failure
+      try {
+        const buffer = await this.page!.screenshot({ type: 'png' });
+        screenshot = `data:image/png;base64,${buffer.toString('base64')}`;
+      } catch {}
+
+      return {
+        step,
+        success: false,
+        duration: Date.now() - startTime,
+        error: this.redactor.redact(error instanceof Error ? error.message : 'Unknown error'),
+        screenshot,
+      };
+    }
+  }
+
+  /**
+   * Verify expected outcomes after a step
+   */
+  private async verifyExpected(expected: UiTestStep['expected']): Promise<void> {
+    if (!expected) return;
+
+    if (expected.url !== undefined) {
+      const currentUrl = this.page!.url();
+      if (currentUrl !== expected.url) {
+        throw new Error(`URL mismatch: expected "${expected.url}", got "${currentUrl}"`);
+      }
+    }
+
+    if (expected.urlContains !== undefined) {
+      const currentUrl = this.page!.url();
+      if (!currentUrl.includes(expected.urlContains)) {
+        throw new Error(`URL does not contain "${expected.urlContains}": "${currentUrl}"`);
+      }
+    }
+
+    if (expected.visible !== undefined) {
+      const element = this.page!.locator(expected.visible);
+      if (!(await element.isVisible())) {
+        throw new Error(`Expected element to be visible: ${expected.visible}`);
+      }
+    }
+
+    if (expected.hidden !== undefined) {
+      const element = this.page!.locator(expected.hidden);
+      if (!(await element.isHidden())) {
+        throw new Error(`Expected element to be hidden: ${expected.hidden}`);
+      }
+    }
+
+    if (expected.elementText) {
+      const element = this.page!.locator(expected.elementText.selector);
+      const text = await element.textContent();
+      if (text !== expected.elementText.text) {
+        throw new Error(`Text mismatch for ${expected.elementText.selector}: expected "${expected.elementText.text}", got "${text}"`);
+      }
+    }
+  }
+
+  /**
+   * Test single page with accessibility
+   */
+  private async testPage(pageUrl: string, config: UiTestConfig): Promise<UiTestResult> {
+    try {
+      const startTime = Date.now();
+
+      // Navigate to page
+      const response = await this.page!.goto(pageUrl, {
+        timeout: config.timeout || 30000,
+        waitUntil: 'networkidle'
+      });
+
+      const loadTime = Date.now() - startTime;
+
+      if (!response || !response.ok()) {
+        return {
+          page: pageUrl,
+          success: false,
+          loadTime,
+          error: `HTTP ${response?.status() || 'unknown'}: Failed to load page`
+        };
+      }
+
+      // Take screenshot based on config
+      const screenshot = await this.takeScreenshot(pageUrl, config.target.screenshot);
+
+      // Get DOM snapshot
+      const domSnapshot = await this.getDomSnapshot();
+
+      // Run accessibility tests
+      const accessibility = await this.runAccessibilityTests(config.budgets);
+
+      // Check if accessibility meets budget
+      const a11yPassed = !config.budgets?.a11y_min ||
+        (accessibility?.score !== undefined && accessibility.score >= config.budgets.a11y_min);
+
+      return {
+        page: pageUrl,
+        success: a11yPassed,
+        loadTime,
+        screenshot,
+        accessibility,
+        domSnapshot,
+        error: a11yPassed ? undefined :
+          `Accessibility score ${accessibility?.score || 0}% below budget ${config.budgets?.a11y_min}%`
+      };
+
+    } catch (error) {
+      return {
+        page: pageUrl,
+        success: false,
+        loadTime: 0,
+        error: this.redactor.redact(error instanceof Error ? error.message : 'Unknown error')
+      };
+    }
+  }
+
+  /**
+   * Setup browser with all options
+   * Playwright++: Enhanced video/trace recording support
+   */
+  private async setupBrowser(config: UiTestConfig): Promise<void> {
+    // Determine browser type
+    const browserType = config.target.browser || 'chromium';
+    const browserTypeObj = browserType === 'firefox' ? firefox : browserType === 'webkit' ? webkit : chromium;
+
+    // Determine headed mode (CLI override > target config > default headless)
+    const headless = config.cliHeaded ?? config.target.headless ?? true;
+
+    // Launch browser
+    this.browser = await browserTypeObj.launch({
+      headless,
+      args: ['--no-sandbox', '--disable-dev-shm-usage'],
+      slowMo: config.target.slowMo || 0,
+    });
+
+    // Build extra HTTP headers with auth
+    const extraHTTPHeaders: Record<string, string> = {
+      'User-Agent': 'QA360-UI-Test/1.0'
+    };
+
+    if (this.auth?.headers) {
+      Object.assign(extraHTTPHeaders, this.auth.headers);
+    }
+
+    // Setup viewport based on device or explicit config
+    let viewport: { width: number; height: number } = { width: 1280, height: 720 };
+
+    if (config.target.device === 'mobile') {
+      viewport = { width: 375, height: 667 };
+    } else if (config.target.device === 'tablet') {
+      viewport = { width: 768, height: 1024 };
+    } else if (config.target.viewport) {
+      viewport = config.target.viewport;
+    }
+
+    // Playwright++: Determine video recording mode
+    const videoMode = config.artifacts?.video ?? config.target.video;
+    const shouldRecordVideo = videoMode === 'always' || videoMode === 'retain-on-failure';
+
+    // Create context with video recording if enabled
+    const recordVideo = shouldRecordVideo
+      ? { dir: this.videoDir, size: viewport }
+      : undefined;
+
+    this.context = await this.browser!.newContext({
+      viewport,
+      userAgent: 'QA360-UI-Test/1.0',
+      extraHTTPHeaders,
+      recordVideo,
+    });
+
+    // Playwright++: Start tracing if enabled
+    const traceMode = config.artifacts?.trace ?? config.target.trace;
+    if (traceMode === 'always' || traceMode === 'on-first-failure' || traceMode === 'retain-on-failure') {
+      // Start tracing - will be saved in cleanup
+      // Note: Playwright's trace API is context.startTracing()
+      // Implementation depends on Playwright version
+    }
+
+    // Add cookies from auth credentials after context creation
+    if (this.auth?.cookies && this.auth.cookies.length > 0) {
+      await this.context.addCookies(this.auth.cookies.map(c => ({
+        name: c.name,
+        value: c.value,
+        domain: c.domain || '',
+        path: c.path || '/',
+        httpOnly: c.httpOnly || false,
+        secure: c.secure || false
+      })));
+    }
+
+    this.page = await this.context.newPage();
+  }
+
+  /**
+   * Determine if video should be recorded
+   */
+  private shouldRecordVideo(mode?: string): boolean {
+    return mode === 'always' || mode === 'retain-on-fail';
+  }
+
+  /**
+   * Playwright++: Generate HTML report
+   */
+  private async generateHtmlReport(
+    config: UiTestConfig,
+    results: UiTestResult[],
+    e2eResults: UiE2eResult[],
+    summary: UiSmokeResult['summary']
+  ): Promise<void> {
+    const reportPath = config.htmlReport || join(config.artifacts?.outputDir || this.artifactDir, 'report.html');
+    const timestamp = new Date().toISOString();
+
+    const reportData: ReportData = {
+      title: `QA360 UI Test Report - ${timestamp}`,
+      summary: {
+        total: summary.total,
+        passed: summary.passed,
+        failed: summary.failed,
+        skipped: 0,
+        duration: summary.avgLoadTime * summary.total,
+        timestamp,
+      },
+      tests: [
+        ...results.map((r, i): TestReport => ({
+          id: `smoke-${i}`,
+          name: `UI Smoke: ${r.page}`,
+          status: (r.success ? 'passed' : 'failed') as 'passed' | 'failed',
+          duration: r.loadTime,
+          error: r.error,
+          steps: [],
+          artifacts: r.artifacts,
+        })),
+        ...e2eResults.map((r, i): TestReport => ({
+          id: `e2e-${i}`,
+          name: r.test.name || 'E2E Test',
+          status: (r.success ? 'passed' : 'failed') as 'passed' | 'failed',
+          duration: r.duration,
+          error: r.error,
+          steps: r.steps.map((s, j) => ({
+            name: s.step.action || `Step ${j + 1}`,
+            action: s.step.action || 'step',
+            selector: s.step.selector,
+            value: s.step.value,
+            status: (s.success ? 'passed' : 'failed') as 'passed' | 'failed',
+            duration: s.duration,
+            error: s.error,
+          })),
+          artifacts: undefined,
+        })),
+      ],
+      artifacts: {
+        screenshots: this.allScreenshots.map(s => ({
+          path: s.localPath,
+          timestamp: s.metadata.timestamp,
+          type: 'after' as const,
+        })),
+        videos: this.allVideos.map(v => ({ path: v, duration: 0 })),
+        traces: this.allTraces.map(t => ({ path: t, format: 'zip' as const })),
+      },
+      environment: {
+        browser: config.target.browser || 'chromium',
+        platform: process.platform,
+        nodeVersion: process.version,
+      },
+    };
+
+    HTMLReporter.generate(reportData, reportPath);
+    console.log(`\n📊 HTML report generated: ${reportPath}`);
+  }
+
+  /**
+   * Perform login if configured
+   */
+  private async performLogin(login: NonNullable<UiTestConfig['login']>): Promise<void> {
+    if (!login || !login.username || !login.password) {
+      return;
+    }
+
+    console.log(`  🔐 Performing login...`);
+
+    const loginUrl = login.url || this.page!.url();
+    await this.page!.goto(loginUrl);
+
+    // Fill login form
+    const usernameSelector = login.usernameSelector ||
+      'input[name="username"], input[name="email"], input[type="email"], #username, #email';
+    const passwordSelector = login.passwordSelector ||
+      'input[name="password"], input[type="password"], #password';
+    const submitSelector = login.submitSelector ||
+      'button[type="submit"], input[type="submit"], button:has-text("Login"), button:has-text("Sign in")';
+
+    await this.page!.fill(usernameSelector, login.username);
+    await this.page!.fill(passwordSelector, login.password);
+    await this.page!.click(submitSelector);
+
+    // Wait for navigation or login completion
+    try {
+      await this.page!.waitForLoadState('networkidle', { timeout: 10000 });
+    } catch {
+      // Continue even if navigation doesn't complete
+    }
+  }
+
+  /**
+   * Run accessibility tests using axe-core
+   */
+  private async runAccessibilityTests(budgets?: PackBudgets): Promise<UiTestResult['accessibility']> {
+    try {
+      // Inject axe-core
+      await this.page!.addScriptTag({
+        url: 'https://unpkg.com/axe-core@4.8.2/axe.min.js'
+      });
+
+      // Run axe analysis
+      const axeResults = await this.page!.evaluate(() => {
+        return new Promise((resolve) => {
+          // @ts-ignore - axe is injected
+          if (typeof axe !== 'undefined') {
+            // @ts-ignore
+            axe.run((err: any, results: any) => {
+              if (err) {
+                resolve({ violations: [], passes: [], incomplete: [] });
+              } else {
+                resolve(results);
+              }
+            });
+          } else {
+            resolve({ violations: [], passes: [], incomplete: [] });
+          }
+        });
+      });
+
+      // Process violations
+      const violations = (axeResults as any).violations?.map((violation: any) => ({
+        id: violation.id,
+        impact: violation.impact || 'minor',
+        description: violation.description || violation.help || 'Accessibility issue',
+        nodes: violation.nodes?.length || 0
+      })) || [];
+
+      // Calculate score (simple scoring: 100 - weighted violations)
+      const criticalCount = violations.filter((v: any) => v.impact === 'critical').length;
+      const seriousCount = violations.filter((v: any) => v.impact === 'serious').length;
+      const moderateCount = violations.filter((v: any) => v.impact === 'moderate').length;
+      const minorCount = violations.filter((v: any) => v.impact === 'minor').length;
+
+      const score = Math.max(0, 100 - (
+        criticalCount * 25 +
+        seriousCount * 10 +
+        moderateCount * 5 +
+        minorCount * 1
+      ));
+
+      return {
+        score: Math.round(score),
+        violations
+      };
+
+    } catch (error) {
+      console.log(`    ⚠️  Accessibility test failed: ${error}`);
+      return {
+        score: 0,
+        violations: [{
+          id: 'axe-error',
+          impact: 'critical' as const,
+          description: 'Failed to run accessibility analysis',
+          nodes: 0
+        }]
+      };
+    }
+  }
+
+  /**
+   * Get DOM snapshot for debugging
+   */
+  private async getDomSnapshot(): Promise<UiTestResult['domSnapshot']> {
+    try {
+      const snapshot = await this.page!.evaluate(() => {
+        return {
+          title: document.title,
+          url: window.location.href,
+          elements: {
+            buttons: document.querySelectorAll('button, input[type="button"], input[type="submit"]').length,
+            links: document.querySelectorAll('a[href]').length,
+            forms: document.querySelectorAll('form').length,
+            inputs: document.querySelectorAll('input, textarea, select').length
+          }
+        };
+      });
+
+      return snapshot;
+    } catch {
+      return {
+        title: 'Unknown',
+        url: this.page!.url(),
+        elements: { buttons: 0, links: 0, forms: 0, inputs: 0 }
+      };
+    }
+  }
+
+  /**
+   * Take screenshot for debugging
+   */
+  private async takeScreenshot(pageUrl: string, mode?: string): Promise<string> {
+    const shouldTake = mode === 'always' || mode === 'only-on-fail';
+
+    if (!shouldTake) return '';
+
+    try {
+      const screenshot = await this.page!.screenshot({
+        type: 'png',
+        fullPage: false // Just viewport for performance
+      });
+
+      // Return base64 data URL for embedding
+      return `data:image/png;base64,${screenshot.toString('base64')}`;
+    } catch {
+      return '';
+    }
+  }
+
+  /**
+   * Calculate test summary
+   */
+  private calculateSummary(results: UiTestResult[], e2eResults: UiE2eResult[] = []): UiSmokeResult['summary'] {
+    const smokeTests = results.length;
+    const e2eTests = e2eResults.length;
+    const total = smokeTests + e2eTests;
+
+    const smokePassed = results.filter(r => r.success).length;
+    const e2ePassed = e2eResults.filter(r => r.success).length;
+    const passed = smokePassed + e2ePassed;
+
+    const failed = total - passed;
+
+    const avgLoadTime = smokeTests > 0 ?
+      Math.round(results.reduce((sum, r) => sum + r.loadTime, 0) / smokeTests) : 0;
+
+    const a11yScores = results
+      .map(r => r.accessibility?.score)
+      .filter((score): score is number => typeof score === 'number');
+    const avgA11yScore = a11yScores.length > 0 ?
+      Math.round(a11yScores.reduce((sum, score) => sum + score, 0) / a11yScores.length) : 0;
+
+    return {
+      total,
+      passed,
+      failed,
+      avgLoadTime,
+      avgA11yScore
+    };
+  }
+
+  /**
+   * Generate JUnit XML fragment
+   */
+  private generateJUnit(results: UiTestResult[], e2eResults: UiE2eResult[] = []): string {
+    const summary = this.calculateSummary(results, e2eResults);
+    const timestamp = new Date().toISOString();
+
+    let junit = `<?xml version="1.0" encoding="UTF-8"?>
+<testsuites>
+  <testsuite name="UI Smoke Tests" tests="${results.length}" failures="${results.filter(r => !r.success).length}" time="${summary.avgLoadTime / 1000}" timestamp="${timestamp}">
+`;
+
+    for (const result of results) {
+      const testName = `UI Test: ${result.page}`;
+      const time = result.loadTime / 1000;
+
+      junit += `    <testcase name="${this.escapeXml(testName)}" time="${time}">
+`;
+
+      if (!result.success) {
+        junit += `      <failure message="${this.escapeXml(result.error || 'Test failed')}">${this.escapeXml(JSON.stringify(result, null, 2))}</failure>
+`;
+      }
+
+      junit += `    </testcase>
+`;
+    }
+
+    junit += `  </testsuite>
+`;
+
+    // Add E2E test suite
+    if (e2eResults.length > 0) {
+      const e2eFailed = e2eResults.filter(r => !r.success).length;
+      const e2eDuration = e2eResults.reduce((sum, r) => sum + r.duration, 0) / 1000;
+
+      junit += `  <testsuite name="E2E Tests" tests="${e2eResults.length}" failures="${e2eFailed}" time="${e2eDuration}" timestamp="${timestamp}">
+`;
+
+      for (const result of e2eResults) {
+        const testName = result.test.name;
+        const time = result.duration / 1000;
+
+        junit += `    <testcase name="${this.escapeXml(testName)}" time="${time}">
+`;
+
+        if (!result.success) {
+          const failedSteps = result.steps.filter(s => !s.success);
+          const failureDetails = failedSteps.map(s => `${s.step.action}: ${s.error}`).join('; ');
+          junit += `      <failure message="${this.escapeXml(result.error || 'Test failed')}">${this.escapeXml(failureDetails)}</failure>
+`;
+        }
+
+        junit += `    </testcase>
+`;
+      }
+
+      junit += `  </testsuite>
+`;
+    }
+
+    junit += `</testsuites>`;
+
+    return junit;
+  }
+
+  /**
+   * Escape XML special characters
+   */
+  private escapeXml(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  /**
+   * Cleanup browser resources
+   */
+  private async cleanup(config: UiTestConfig): Promise<void> {
+    // Save video/trace artifacts if configured
+    if (this.page && (config.target.video === 'retain-on-fail' || config.target.trace === 'retain-on-fail')) {
+      // Check if tests failed and retain artifacts
+      const hasFailures = false; // Would need to track this
+      if (!hasFailures) {
+        // Clean up artifacts if all tests passed
+        // TODO: Implement artifact cleanup
+      }
+    }
+
+    if (this.page) {
+      await this.page.close();
+    }
+    if (this.context) {
+      await this.context.close();
+    }
+    if (this.browser) {
+      await this.browser.close();
+    }
+  }
+
+  /**
+   * Validate UI target configuration
+   */
+  static validateConfig(target: WebTarget): { valid: boolean; errors: string[] } {
+    const errors: string[] = [];
+
+    if (!target.baseUrl) {
+      errors.push('UI target requires baseUrl');
+    } else {
+      try {
+        new URL(target.baseUrl);
+      } catch {
+        errors.push('UI target baseUrl must be a valid URL');
+      }
+    }
+
+    if (target.pages) {
+      for (const page of target.pages) {
+        try {
+          new URL(page, target.baseUrl);
+        } catch {
+          errors.push(`Invalid page URL: ${page}`);
+        }
+      }
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+}