specweave 1.0.239 → 1.0.241

package/plugins/specweave-testing/commands/test-init.md

@@ -1,413 +0,0 @@
----
-description: Initialize comprehensive testing infrastructure with Vitest, Playwright, and testing best practices.
----
-
-# /sw-testing:test-init
-
-Initialize comprehensive testing infrastructure with Vitest, Playwright, and testing best practices.
-
-You are an expert testing engineer who sets up production-ready test infrastructure.
-
-## Your Task
-
-Set up a complete testing framework covering unit tests, integration tests, and E2E tests.
-
-### 1. Testing Stack
-
-**Unit Testing (Vitest)**:
-- Fast, Vite-powered test runner
-- Compatible with Jest API
-- Built-in coverage (c8/istanbul)
-- ESM and TypeScript support
-- Watch mode for TDD
-
-**E2E Testing (Playwright)**:
-- Cross-browser testing (Chromium, Firefox, WebKit)
-- Reliable auto-wait mechanisms
-- Powerful selectors and assertions
-- Parallel test execution
-- Screenshots and video recording
-
-**Component Testing**:
-- React Testing Library
-- Vue Testing Library
-- User-centric testing approach
-- Accessibility testing integration
-
-### 2. Vitest Configuration
-
-**vitest.config.ts**:
-```typescript
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./tests/setup.ts'],
-    include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html', 'lcov'],
-      exclude: [
-        'node_modules/',
-        'tests/',
-        '**/*.d.ts',
-        '**/*.config.*',
-        '**/mockData',
-      ],
-      all: true,
-      lines: 80,
-      functions: 80,
-      branches: 80,
-      statements: 80,
-    },
-    testTimeout: 10000,
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-});
-```
-
-**tests/setup.ts**:
-```typescript
-import '@testing-library/jest-dom';
-import { cleanup } from '@testing-library/react';
-import { afterEach, vi } from 'vitest';
-
-// Cleanup after each test
-afterEach(() => {
-  cleanup();
-});
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-// Mock IntersectionObserver
-global.IntersectionObserver = class IntersectionObserver {
-  constructor() {}
-  disconnect() {}
-  observe() {}
-  takeRecords() {
-    return [];
-  }
-  unobserve() {}
-} as any;
-```
-
-### 3. Playwright Configuration
-
-**playwright.config.ts**:
-```typescript
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
-  use: {
-    baseURL: 'http://localhost:3000',
-    trace: 'on-first-retry',
-    screenshot: 'only-on-failure',
-    video: 'retain-on-failure',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-    // Mobile viewports
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-  ],
-  webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
-  },
-});
-```
-
-### 4. Test Utilities
-
-**tests/utils/test-utils.tsx** (React):
-```typescript
-import { render, RenderOptions } from '@testing-library/react';
-import { ReactElement } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: { retry: false },
-    mutations: { retry: false },
-  },
-});
-
-function AllTheProviders({ children }: { children: React.ReactNode }) {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        {children}
-      </BrowserRouter>
-    </QueryClientProvider>
-  );
-}
-
-function customRender(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) {
-  return render(ui, { wrapper: AllTheProviders, ...options });
-}
-
-export * from '@testing-library/react';
-export { customRender as render };
-```
-
-**tests/utils/mocks/handlers.ts** (MSW):
-```typescript
-import { http, HttpResponse } from 'msw';
-
-export const handlers = [
-  http.get('/api/users', () => {
-    return HttpResponse.json([
-      { id: '1', name: 'John Doe' },
-      { id: '2', name: 'Jane Smith' },
-    ]);
-  }),
-
-  http.post('/api/login', async ({ request }) => {
-    const { email, password } = await request.json();
-
-    if (email === 'test@example.com' && password === 'password') {
-      return HttpResponse.json({
-        token: 'mock-jwt-token',
-        user: { id: '1', email },
-      });
-    }
-
-    return HttpResponse.json(
-      { error: 'Invalid credentials' },
-      { status: 401 }
-    );
-  }),
-];
-```
-
-**tests/utils/mocks/server.ts**:
-```typescript
-import { setupServer } from 'msw/node';
-import { handlers } from './handlers';
-
-export const server = setupServer(...handlers);
-```
-
-### 5. Package Dependencies
-
-```json
-{
-  "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "@vitest/coverage-v8": "^1.0.4",
-    "@vitest/ui": "^1.0.4",
-    "jsdom": "^23.0.1",
-    "msw": "^2.0.0",
-    "vitest": "^1.0.4"
-  }
-}
-```
-
-### 6. NPM Scripts
-
-```json
-{
-  "scripts": {
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:all": "npm run test:coverage && npm run test:e2e"
-  }
-}
-```
-
-### 7. CI/CD Configuration
-
-**GitHub Actions (.github/workflows/test.yml)**:
-```yaml
-name: Tests
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run unit tests
-        run: npm run test:coverage
-
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-
-      - name: Run E2E tests
-        run: npm run test:e2e
-
-      - name: Upload coverage
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage/lcov.info
-
-      - name: Upload test results
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: playwright-report
-          path: playwright-report/
-```
-
-### 8. Testing Best Practices
-
-**Unit Test Example**:
-```typescript
-import { render, screen, fireEvent } from './utils/test-utils';
-import { LoginForm } from '@/components/LoginForm';
-
-describe('LoginForm', () => {
-  it('renders login form correctly', () => {
-    render(<LoginForm />);
-    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
-  });
-
-  it('shows validation errors for empty fields', async () => {
-    render(<LoginForm />);
-    fireEvent.click(screen.getByRole('button', { name: /login/i }));
-
-    expect(await screen.findByText(/email is required/i)).toBeInTheDocument();
-    expect(await screen.findByText(/password is required/i)).toBeInTheDocument();
-  });
-
-  it('submits form with valid data', async () => {
-    const onSubmit = vi.fn();
-    render(<LoginForm onSubmit={onSubmit} />);
-
-    fireEvent.change(screen.getByLabelText(/email/i), {
-      target: { value: 'test@example.com' },
-    });
-    fireEvent.change(screen.getByLabelText(/password/i), {
-      target: { value: 'password123' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: /login/i }));
-
-    await waitFor(() => {
-      expect(onSubmit).toHaveBeenCalledWith({
-        email: 'test@example.com',
-        password: 'password123',
-      });
-    });
-  });
-});
-```
-
-**E2E Test Example**:
-```typescript
-import { test, expect } from '@playwright/test';
-
-test.describe('Authentication Flow', () => {
-  test('should allow user to login', async ({ page }) => {
-    await page.goto('/login');
-
-    await page.fill('input[name="email"]', 'test@example.com');
-    await page.fill('input[name="password"]', 'password123');
-    await page.click('button[type="submit"]');
-
-    await expect(page).toHaveURL('/dashboard');
-    await expect(page.locator('h1')).toContainText('Dashboard');
-  });
-
-  test('should show error for invalid credentials', async ({ page }) => {
-    await page.goto('/login');
-
-    await page.fill('input[name="email"]', 'wrong@example.com');
-    await page.fill('input[name="password"]', 'wrongpassword');
-    await page.click('button[type="submit"]');
-
-    await expect(page.locator('[role="alert"]')).toContainText(
-      'Invalid credentials'
-    );
-  });
-});
-```
-
-## Workflow
-
-1. Ask about testing requirements and existing setup
-2. Install testing dependencies (Vitest, Playwright, Testing Library)
-3. Create Vitest configuration
-4. Create Playwright configuration
-5. Set up test utilities and helpers
-6. Configure MSW for API mocking
-7. Add test scripts to package.json
-8. Create example tests
-9. Set up CI/CD workflow
-10. Provide testing guidelines and best practices
-
-## When to Use
-
-- Starting new projects with testing
-- Migrating from Jest to Vitest
-- Adding E2E testing to existing projects
-- Setting up CI/CD testing pipeline
-- Improving test coverage
-- Implementing TDD workflow
-
-Initialize production-ready testing infrastructure with modern tools!

package/plugins/specweave-testing/commands/ui-automate.md

@@ -1,182 +0,0 @@
----
-description: Create and execute automated browser workflows using Playwright for testing, web scraping, form automation, and UI interaction sequences.
----
-
-# UI Automate - Browser Automation Workflows
-
-Create and execute automated browser workflows using Playwright. Generate scripts for testing, web scraping, form automation, and UI interaction sequences.
-
-## Usage
-
-```
-/sw-ui:ui-automate <workflow-name> [options]
-```
-
-## What I Do
-
-1. **Workflow Planning**: Define step-by-step browser automation sequences
-2. **Script Generation**: Create Playwright TypeScript/JavaScript code (code-first approach)
-3. **Error Handling**: Add retry logic, timeouts, and fallbacks
-4. **Output Collection**: Capture screenshots, data, and validation results
-
-> **Why Code-First?** Anthropic research shows [code execution beats MCP tool calls](https://www.anthropic.com/engineering/code-execution-with-mcp) with 98% token reduction. Playwright code is reusable, committable, CI-runnable, and deterministic.
-
-> **CLI Mode Available**: When `@playwright/cli` is installed, this command routes to the CLI by default for maximum token efficiency (~250 chars per interaction vs ~5K+ via MCP). The CLI keeps browser state external and returns file references instead of inline DOM trees. Install: `npm install -g @playwright/cli@latest`
-
-## Workflow Types
-
-### 1. Form Automation
-```bash
-/sw-ui:ui-automate form-fill --url https://example.com/form \
-  --fields "email=test@example.com,name=John Doe"
-```
-
-### 2. Data Extraction
-```bash
-/sw-ui:ui-automate scrape --url https://example.com/products \
-  --selectors "title=h1.product-title,price=.price"
-```
-
-### 3. UI Testing Sequence
-```bash
-/sw-ui:ui-automate test-login --url https://example.com/login \
-  --steps "fill:email,fill:password,click:submit,wait:dashboard"
-```
-
-### 4. Screenshot Capture
-```bash
-/sw-ui:ui-automate screenshot --url https://example.com \
-  --fullPage --output screenshots/homepage.png
-```
-
-### 5. Multi-Page Navigation
-```bash
-/sw-ui:ui-automate navigate --start https://example.com \
-  --flow "home>products>cart>checkout"
-```
-
-## Options
-
-### General Options
-- `--url <url>` - Starting URL for automation
-- `--browser <browser>` - chromium, firefox, webkit (default: chromium)
-- `--headless` - Run in headless mode (default: true)
-- `--output <path>` - Output directory for artifacts
-
-### Workflow Options
-- `--steps <steps>` - Comma-separated list of actions
-- `--selectors <selectors>` - CSS selectors for elements
-- `--fields <fields>` - Form field values (key=value pairs)
-- `--wait <selector>` - Wait for element before proceeding
-- `--timeout <ms>` - Max time to wait for operations (default: 30000)
-
-### Data Collection
-- `--screenshot` - Capture screenshots at each step
-- `--extract <selector>` - Extract text/attributes from elements
-- `--save-html` - Save page HTML at key steps
-
-## Generated Script Features
-
-### TypeScript Example
-```typescript
-import { chromium, Browser, Page } from 'playwright';
-
-async function automateWorkflow() {
-  const browser: Browser = await chromium.launch({ headless: true });
-  const page: Page = await browser.newPage();
-
-  try {
-    // Step 1: Navigate
-    await page.goto('https://example.com', { waitUntil: 'networkidle' });
-
-    // Step 2: Fill form
-    await page.fill('#email', 'test@example.com');
-    await page.fill('#password', 'secure-password');
-
-    // Step 3: Submit
-    await page.click('button[type="submit"]');
-
-    // Step 4: Wait for navigation
-    await page.waitForSelector('.dashboard', { timeout: 5000 });
-
-    // Step 5: Capture result
-    await page.screenshot({ path: 'result.png', fullPage: true });
-
-    console.log('✓ Automation completed successfully');
-  } catch (error) {
-    console.error('✗ Automation failed:', error.message);
-    await page.screenshot({ path: 'error.png' });
-    throw error;
-  } finally {
-    await browser.close();
-  }
-}
-
-automateWorkflow();
-```
-
-## Use Cases
-
-### 1. Regression Testing
-Automate critical user flows to catch UI regressions early.
-
-### 2. Data Collection
-Extract product information, prices, availability from multiple pages.
-
-### 3. Load Testing
-Simulate multiple users interacting with the application.
-
-### 4. Visual Regression
-Capture screenshots across environments to detect visual changes.
-
-### 5. Form Submission
-Bulk-fill forms with test data for QA purposes.
-
-## Error Handling
-
-### Retry Logic
-```typescript
-await page.click('button', { timeout: 5000 })
-  .catch(async () => {
-    console.log('Retrying click...');
-    await page.click('button', { force: true });
-  });
-```
-
-### Fallback Selectors
-```typescript
-const selectors = ['#submit', '.submit-btn', 'button[type="submit"]'];
-for (const selector of selectors) {
-  if (await page.locator(selector).count() > 0) {
-    await page.click(selector);
-    break;
-  }
-}
-```
-
-## Best Practices
-
-1. **Use Stable Selectors**: Prefer data-testid attributes over CSS classes
-2. **Add Explicit Waits**: Don't rely on implicit timeouts
-3. **Handle Errors Gracefully**: Capture screenshots on failures
-4. **Clean Up Resources**: Always close browsers in finally blocks
-5. **Avoid Hardcoded Delays**: Use waitForSelector instead of setTimeout
-
-## Limitations
-
-- Requires Playwright installation
-- Cannot bypass CAPTCHAs or bot detection
-- May fail on dynamically loaded content without proper waits
-- Performance depends on network speed and page complexity
-
-## Related Commands
-
-- `/sw-ui:ui-inspect` - Inspect page elements for selectors
-- `/sw-testing:e2e-setup` - Set up full E2E testing framework
-- `/sw-testing:test-generate` - Generate test files from automation scripts
-
-## Environment Variables
-
-- `PLAYWRIGHT_BROWSERS_PATH` - Custom browser binaries location
-- `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` - Skip browser download on install
-- `HEADLESS` - Default headless mode (true/false)

package/plugins/specweave-testing/commands/ui-inspect.md

@@ -1,82 +0,0 @@
----
-description: Inspect web page elements using browser automation to identify selectors, attributes, and structure for testing and scraping.
----
-
-# UI Inspect - Browser Element Inspection
-
-Inspect web page elements using browser automation tools. Helps identify selectors, attributes, and structure for automated testing and web scraping.
-
-## Usage
-
-```
-/sw-ui:ui-inspect <url> [options]
-```
-
-## What I Do
-
-1. **Load Target Page**: Launch browser and navigate to the specified URL
-2. **Interactive Inspection**: Use browser DevTools to inspect elements
-3. **Extract Selectors**: Generate CSS/XPath selectors for identified elements
-4. **Element Properties**: Show attributes, text content, styles, and position
-5. **Accessibility Info**: Check ARIA labels, roles, and screen reader compatibility
-
-## Options
-
-- `--selector <selector>` - Target a specific CSS selector
-- `--screenshot` - Capture screenshot of the inspected page
-- `--headless` - Run browser in headless mode (default: true)
-- `--browser <browser>` - Choose browser: chromium, firefox, webkit (default: chromium)
-
-## Examples
-
-### Inspect a specific element
-
-```bash
-/sw-ui:ui-inspect https://example.com --selector "button.submit"
-```
-
-### Capture full-page screenshot
-
-```bash
-/sw-ui:ui-inspect https://example.com --screenshot
-```
-
-### Inspect with visible browser
-
-```bash
-/sw-ui:ui-inspect https://example.com --headless=false
-```
-
-## Output
-
-Provides:
-- **Element Details**: Tag, classes, IDs, data attributes
-- **Selectors**: Multiple selector strategies (CSS, XPath, text-based)
-- **Accessibility**: ARIA attributes, semantic HTML usage
-- **Visual Info**: Dimensions, position, visibility status
-- **Screenshot**: Optional full-page or element screenshot
-
-## Use Cases
-
-- **Test Automation**: Find reliable selectors for Playwright/Selenium tests
-- **Web Scraping**: Identify data extraction points
-- **Accessibility Audit**: Check element accessibility
-- **Bug Investigation**: Debug element behavior and properties
-
-## Browser Mode
-
-This command **prefers MCP mode** for rich DOM introspection. When the Playwright MCP plugin provides inline accessibility tree snapshots, the AI can reason about page structure and find optimal selectors.
-
-If MCP is unavailable, falls back to `@playwright/cli snapshot` which saves the accessibility tree to a file (`.playwright-cli/*.yml`). The AI can then read the file, but loses the ability to iterate on snapshots without re-reading.
-
-**Recommended**: Keep the Playwright MCP plugin installed for best `ui-inspect` experience.
-
-## Requirements
-
-- Playwright browser binaries (auto-installed on first use)
-- Network access to target URL
-
-## Related Commands
-
-- `/sw-ui:ui-automate` - Create automated browser workflows
-- `/sw-testing:e2e-setup` - Set up E2E testing framework