@wundr.io/cli 1.0.0

package/test-suites/helpers/test-config.ts

@@ -0,0 +1,84 @@
+/**
+ * Portable test configuration
+ * Can be customized via wundr-test.config.js in the target project
+ */
+
+export interface TestConfig {
+  baseURL: string;
+  timeout: number;
+  retries: number;
+  headless: boolean;
+  slowMo?: number;
+  screenshot: 'off' | 'on' | 'only-on-failure';
+  video: 'off' | 'on' | 'retain-on-failure';
+  trace: 'off' | 'on' | 'on-first-retry';
+  
+  // Custom selectors for specific apps
+  selectors?: {
+    navigation?: string;
+    mainContent?: string;
+    footer?: string;
+    searchInput?: string;
+    loginButton?: string;
+  };
+  
+  // API configuration
+  api?: {
+    baseURL?: string;
+    headers?: Record<string, string>;
+    timeout?: number;
+  };
+  
+  // Test data
+  testData?: {
+    validUser?: {
+      username: string;
+      password: string;
+    };
+    searchTerms?: string[];
+  };
+}
+
+export const defaultConfig: TestConfig = {
+  baseURL: process.env.TEST_BASE_URL || 'http://localhost:3000',
+  timeout: 30000,
+  retries: 2,
+  headless: true,
+  screenshot: 'only-on-failure',
+  video: 'retain-on-failure',
+  trace: 'on-first-retry',
+  
+  selectors: {
+    navigation: 'nav, [role="navigation"], header',
+    mainContent: 'main, [role="main"], #content',
+    footer: 'footer, [role="contentinfo"]',
+    searchInput: 'input[type="search"], input[placeholder*="search" i]',
+    loginButton: 'button[type="submit"], button:has-text("Login"), button:has-text("Sign in")'
+  },
+  
+  api: {
+    timeout: 10000
+  }
+};
+
+/**
+ * Load configuration from project or use defaults
+ */
+export function loadConfig(customConfig?: Partial<TestConfig>): TestConfig {
+  return {
+    ...defaultConfig,
+    ...customConfig,
+    selectors: {
+      ...defaultConfig.selectors,
+      ...customConfig?.selectors
+    },
+    api: {
+      ...defaultConfig.api,
+      ...customConfig?.api
+    },
+    testData: {
+      ...defaultConfig.testData,
+      ...customConfig?.testData
+    }
+  };
+}

package/test-suites/ui/accessibility.spec.ts

@@ -0,0 +1,102 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+/**
+ * Portable accessibility tests using axe-core
+ */
+
+test.describe('Accessibility Tests', () => {
+  test('homepage meets WCAG standards', async ({ page }) => {
+    await page.goto('/');
+    
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+      .analyze();
+    
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('all images have alt text', async ({ page }) => {
+    await page.goto('/');
+    
+    const images = await page.locator('img').all();
+    
+    for (const img of images) {
+      const alt = await img.getAttribute('alt');
+      const role = await img.getAttribute('role');
+      
+      // Images should have alt text or be marked as decorative
+      expect(alt !== null || role === 'presentation').toBeTruthy();
+    }
+  });
+
+  test('forms have proper labels', async ({ page }) => {
+    await page.goto('/');
+    
+    const inputs = await page.locator('input, select, textarea').all();
+    
+    for (const input of inputs) {
+      const id = await input.getAttribute('id');
+      const ariaLabel = await input.getAttribute('aria-label');
+      const ariaLabelledBy = await input.getAttribute('aria-labelledby');
+      
+      if (id) {
+        // Check for associated label
+        const label = await page.locator(`label[for="${id}"]`).count();
+        const hasLabel = label > 0 || ariaLabel !== null || ariaLabelledBy !== null;
+        expect(hasLabel).toBeTruthy();
+      }
+    }
+  });
+
+  test('focus is visible and logical', async ({ page }) => {
+    await page.goto('/');
+    
+    // Tab through interactive elements
+    await page.keyboard.press('Tab');
+    
+    // Check if focused element has visible outline
+    const focusedElement = await page.evaluateHandle(() => document.activeElement);
+    const hasOutline = await focusedElement.evaluate((el) => {
+      if (!el) return false;
+      const styles = window.getComputedStyle(el as Element);
+      return styles.outlineStyle !== 'none' || styles.boxShadow !== 'none';
+    });
+    
+    expect(hasOutline).toBeTruthy();
+  });
+
+  test('color contrast meets standards', async ({ page }) => {
+    await page.goto('/');
+    
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['color-contrast'])
+      .analyze();
+    
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('page has proper heading structure', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check for h1
+    const h1Count = await page.locator('h1').count();
+    expect(h1Count).toBeGreaterThan(0);
+    
+    // Check heading hierarchy
+    const headings = await page.evaluate(() => {
+      const headingElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+      return Array.from(headingElements).map(h => ({
+        level: parseInt(h.tagName[1]),
+        text: h.textContent
+      }));
+    });
+    
+    // Verify no skipped heading levels
+    let previousLevel = 0;
+    for (const heading of headings) {
+      expect(heading.level - previousLevel).toBeLessThanOrEqual(1);
+      previousLevel = heading.level;
+    }
+  });
+});

package/test-suites/ui/smoke.spec.ts

@@ -0,0 +1,92 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Portable smoke tests that can be run against any web application
+ * These tests are generic and work with most web apps
+ */
+
+test.describe('Portable Smoke Tests', () => {
+  test('homepage loads without errors', async ({ page }) => {
+    const jsErrors: string[] = [];
+    
+    page.on('pageerror', (error) => {
+      jsErrors.push(error.message);
+    });
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Basic structure should be present
+    await expect(page.locator('body')).toBeVisible();
+    
+    // Should not have critical JavaScript errors
+    const criticalErrors = jsErrors.filter(error => 
+      error.includes('Cannot read') || 
+      error.includes('undefined is not') ||
+      error.includes('Uncaught')
+    );
+    
+    expect(criticalErrors.length).toBe(0);
+  });
+
+  test('navigation elements are present', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check for common navigation patterns
+    const hasNavigation = await page.locator('nav, [role="navigation"], header').count() > 0;
+    expect(hasNavigation).toBeTruthy();
+  });
+
+  test('interactive elements are clickable', async ({ page }) => {
+    await page.goto('/');
+    
+    // Find clickable elements
+    const buttons = await page.locator('button:visible, a:visible').all();
+    
+    if (buttons.length > 0) {
+      // Test first button/link
+      const firstElement = buttons[0];
+      await expect(firstElement).toBeEnabled();
+    }
+  });
+
+  test('forms accept input', async ({ page }) => {
+    await page.goto('/');
+    
+    // Look for form inputs
+    const inputs = await page.locator('input:visible, textarea:visible').all();
+    
+    if (inputs.length > 0) {
+      const firstInput = inputs[0];
+      await firstInput.fill('test');
+      const value = await firstInput.inputValue();
+      expect(value).toBe('test');
+    }
+  });
+
+  test('responsive layout works', async ({ page }) => {
+    await page.goto('/');
+    
+    // Test mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+    
+    // Should not have horizontal scroll
+    const hasHorizontalScroll = await page.evaluate(() => {
+      return document.documentElement.scrollWidth > document.documentElement.clientWidth;
+    });
+    
+    expect(hasHorizontalScroll).toBeFalsy();
+  });
+
+  test('page has proper metadata', async ({ page }) => {
+    await page.goto('/');
+    
+    // Check for title
+    const title = await page.title();
+    expect(title).toBeTruthy();
+    
+    // Check for language attribute
+    const lang = await page.locator('html').getAttribute('lang');
+    expect(lang).toBeTruthy();
+  });
+});