@etus/bhono-app 0.1.1

package/templates/base/.claude/skills/playwright-e2e-testing/scripts/auth-setup.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+
+/**
+ * Authentication Setup Script
+ * 
+ * This script helps set up authentication state for Playwright tests.
+ * It performs a login and saves the authentication state to a file
+ * that can be reused across tests.
+ * 
+ * Usage:
+ *   node auth-setup.js
+ *   node auth-setup.js --email user@example.com --password pass123
+ *   node auth-setup.js --config auth-config.json
+ */
+
+const { chromium } = require('@playwright/test');
+const fs = require('fs');
+const path = require('path');
+
+// Default configuration
+const DEFAULT_CONFIG = {
+  baseURL: process.env.BASE_URL || 'http://localhost:3000',
+  loginPath: '/login',
+  emailSelector: 'input[name="email"], input[type="email"]',
+  passwordSelector: 'input[name="password"], input[type="password"]',
+  submitSelector: 'button[type="submit"]',
+  successURL: '/dashboard',
+  outputPath: 'auth.json',
+  headless: process.env.CI ? true : false
+};
+
+// Parse command line arguments
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const config = { ...DEFAULT_CONFIG };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    
+    if (arg === '--email' && i + 1 < args.length) {
+      config.email = args[++i];
+    } else if (arg === '--password' && i + 1 < args.length) {
+      config.password = args[++i];
+    } else if (arg === '--base-url' && i + 1 < args.length) {
+      config.baseURL = args[++i];
+    } else if (arg === '--output' && i + 1 < args.length) {
+      config.outputPath = args[++i];
+    } else if (arg === '--config' && i + 1 < args.length) {
+      const configFile = args[++i];
+      const fileConfig = JSON.parse(fs.readFileSync(configFile, 'utf-8'));
+      Object.assign(config, fileConfig);
+    } else if (arg === '--help') {
+      printHelp();
+      process.exit(0);
+    }
+  }
+
+  // Read from environment if not provided
+  if (!config.email) {
+    config.email = process.env.TEST_EMAIL || 'test@example.com';
+  }
+  if (!config.password) {
+    config.password = process.env.TEST_PASSWORD || 'password123';
+  }
+
+  return config;
+}
+
+function printHelp() {
+  console.log(`
+Authentication Setup Script
+
+Usage:
+  node auth-setup.js [options]
+
+Options:
+  --email <email>        Email for authentication
+  --password <password>  Password for authentication
+  --base-url <url>       Base URL of the application
+  --output <path>        Output path for auth state (default: auth.json)
+  --config <path>        Path to JSON config file
+  --help                 Show this help message
+
+Environment Variables:
+  BASE_URL              Base URL (default: http://localhost:3000)
+  TEST_EMAIL            Test user email (default: test@example.com)
+  TEST_PASSWORD         Test user password (default: password123)
+  CI                    Run in headless mode if set
+
+Example:
+  node auth-setup.js --email user@test.com --password pass123
+  node auth-setup.js --config auth-config.json
+  
+Example auth-config.json:
+  {
+    "baseURL": "https://staging.example.com",
+    "email": "test@example.com",
+    "password": "password123",
+    "loginPath": "/auth/login",
+    "successURL": "/app/dashboard"
+  }
+`);
+}
+
+async function setupAuth(config) {
+  console.log('Starting authentication setup...');
+  console.log(`📍 Base URL: ${config.baseURL}`);
+  console.log(`📧 Email: ${config.email}`);
+  console.log(`💾 Output: ${config.outputPath}`);
+
+  const browser = await chromium.launch({ 
+    headless: config.headless,
+    slowMo: config.headless ? 0 : 100 
+  });
+  
+  try {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    // Navigate to login page
+    console.log(`\n🌐 Navigating to ${config.baseURL}${config.loginPath}...`);
+    await page.goto(`${config.baseURL}${config.loginPath}`);
+    await page.waitForLoadState('domcontentloaded');
+
+    // Fill in credentials
+    console.log('✍️  Filling in credentials...');
+    
+    // Try to find email input
+    let emailInput = page.locator(config.emailSelector).first();
+    if (await emailInput.count() === 0) {
+      // Fallback to label-based selector
+      emailInput = page.getByLabel(/email/i).first();
+    }
+    await emailInput.fill(config.email);
+
+    // Try to find password input
+    let passwordInput = page.locator(config.passwordSelector).first();
+    if (await passwordInput.count() === 0) {
+      // Fallback to label-based selector
+      passwordInput = page.getByLabel(/password/i).first();
+    }
+    await passwordInput.fill(config.password);
+
+    // Submit form
+    console.log('🔐 Submitting login form...');
+    const submitButton = page.locator(config.submitSelector).first();
+    await submitButton.click();
+
+    // Wait for navigation
+    console.log('⏳ Waiting for authentication...');
+    await page.waitForURL(`**${config.successURL}`, { timeout: 10000 });
+
+    // Save authentication state
+    console.log('💾 Saving authentication state...');
+    await context.storageState({ path: config.outputPath });
+
+    const fullPath = path.resolve(config.outputPath);
+    console.log(`\nAuthentication state saved to: ${fullPath}`);
+    console.log('\n📝 Usage in tests:');
+    console.log(`\n  test.use({ storageState: '${config.outputPath}' });\n`);
+
+    // Verify the saved state
+    const savedState = JSON.parse(fs.readFileSync(config.outputPath, 'utf-8'));
+    console.log('📊 State summary:');
+    console.log(`  - Cookies: ${savedState.cookies.length}`);
+    console.log(`  - Origins: ${savedState.origins.length}`);
+
+  } catch (error) {
+    console.error('\nAuthentication setup failed:');
+    console.error(error.message);
+    
+    // Take screenshot for debugging
+    if (!config.headless) {
+      try {
+        const page = browser.contexts()[0]?.pages()[0];
+        if (page) {
+          await page.screenshot({ path: 'auth-setup-error.png' });
+          console.error('📸 Screenshot saved to: auth-setup-error.png');
+        }
+      } catch (screenshotError) {
+        // Ignore screenshot errors
+      }
+    }
+    
+    process.exit(1);
+  } finally {
+    await browser.close();
+  }
+}
+
+// Main execution
+async function main() {
+  try {
+    const config = parseArgs();
+    await setupAuth(config);
+  } catch (error) {
+    console.error('Error:', error.message);
+    process.exit(1);
+  }
+}
+
+main();

package/templates/base/.claude/skills/playwright-e2e-testing/scripts/performance-analyzer.js

@@ -0,0 +1,240 @@
+#!/usr/bin/env node
+
+/**
+ * performance-analyzer.js
+ *
+ * Analyze Playwright Test run duration and identify slow tests/files.
+ *
+ * Supports:
+ * - Playwright JSON reporter output (recommended)
+ *
+ * Usage:
+ *   # Generate JSON results
+ *   PLAYWRIGHT_JSON_OUTPUT_NAME=test-results/results.json npx playwright test --reporter=json
+ *
+ *   # Analyze
+ *   node scripts/performance-analyzer.js
+ *   node scripts/performance-analyzer.js --report-path ./test-results/results.json --threshold 5000
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const DEFAULT_CONFIG = {
+  reportPath: './test-results/results.json',
+  threshold: 5000, // ms
+  outputPath: './test-results/performance-report.json',
+};
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const config = { ...DEFAULT_CONFIG };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--report-path' && i + 1 < args.length) config.reportPath = args[++i];
+    else if (arg === '--threshold' && i + 1 < args.length) config.threshold = parseInt(args[++i], 10);
+    else if (arg === '--output' && i + 1 < args.length) config.outputPath = args[++i];
+    else if (arg === '--help') {
+      printHelp();
+      process.exit(0);
+    }
+  }
+
+  return config;
+}
+
+function printHelp() {
+  console.log(`
+Playwright Performance Analyzer
+
+Defaults:
+  --report-path ${DEFAULT_CONFIG.reportPath}
+  --threshold   ${DEFAULT_CONFIG.threshold} (ms)
+  --output      ${DEFAULT_CONFIG.outputPath}
+
+Examples:
+  node scripts/performance-analyzer.js
+  node scripts/performance-analyzer.js --threshold 3000
+  node scripts/performance-analyzer.js --report-path ./custom-results.json
+`);
+}
+
+function readJson(filePath) {
+  const abs = path.resolve(filePath);
+  if (!fs.existsSync(abs)) {
+    throw new Error(`Report file not found: ${abs}`);
+  }
+  return JSON.parse(fs.readFileSync(abs, 'utf-8'));
+}
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`;
+  return `${Math.floor(ms / 60000)}m ${((ms % 60000) / 1000).toFixed(0)}s`;
+}
+
+/**
+ * Extract test cases from Playwright JSON reporter output.
+ * We keep this defensive because JSON schema can evolve.
+ */
+function extractTests(json) {
+  const out = [];
+
+  const suites = Array.isArray(json?.suites) ? json.suites : [];
+  for (const suite of suites) walkSuite(suite, out, []);
+
+  return out;
+
+  function walkSuite(suiteNode, acc, titlePath) {
+    const nextPath = appendIfTruthy(titlePath, suiteNode?.title);
+    const file = suiteNode?.file;
+
+    const specs = Array.isArray(suiteNode?.specs) ? suiteNode.specs : [];
+    for (const spec of specs) {
+      const specPath = appendIfTruthy(nextPath, spec?.title);
+      const tests = Array.isArray(spec?.tests) ? spec.tests : [];
+      for (const t of tests) {
+        const results = Array.isArray(t?.results) ? t.results : [];
+        const last = results.length ? results[results.length - 1] : null;
+
+        const duration = last?.duration ?? t?.duration ?? 0;
+        const status = last?.status ?? t?.status ?? 'unknown';
+        const projectName = t?.projectName ?? last?.projectName ?? '';
+
+        acc.push({
+          title: appendIfTruthy(specPath, t?.title).join(' › '),
+          file: file || spec?.file || '',
+          project: projectName,
+          status,
+          duration,
+          retries: results.length ? results.length - 1 : 0,
+        });
+      }
+    }
+
+    const childSuites = Array.isArray(suiteNode?.suites) ? suiteNode.suites : [];
+    for (const child of childSuites) walkSuite(child, acc, nextPath);
+  }
+
+  function appendIfTruthy(pathArr, v) {
+    if (typeof v === 'string' && v.trim()) return [...pathArr, v.trim()];
+    return [...pathArr];
+  }
+}
+
+function analyzeTests(tests, threshold) {
+  const totalDuration = tests.reduce((sum, t) => sum + (t.duration || 0), 0);
+
+  const durations = tests.map(t => t.duration || 0).filter(d => d > 0).sort((a, b) => a - b);
+  const avg = durations.length ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+  const median = durations.length ? durations[Math.floor(durations.length / 2)] : 0;
+
+  const slowTests = tests
+    .filter(t => (t.duration || 0) > threshold)
+    .sort((a, b) => (b.duration || 0) - (a.duration || 0))
+    .slice(0, 50);
+
+  const byFile = new Map();
+  for (const t of tests) {
+    const k = t.file || '(unknown)';
+    const v = byFile.get(k) || { file: k, count: 0, duration: 0, slowCount: 0 };
+    v.count += 1;
+    v.duration += t.duration || 0;
+    if ((t.duration || 0) > threshold) v.slowCount += 1;
+    byFile.set(k, v);
+  }
+
+  const slowFiles = Array.from(byFile.values())
+    .sort((a, b) => b.duration - a.duration)
+    .slice(0, 30);
+
+  return {
+    summary: {
+      tests: tests.length,
+      totalDurationMs: totalDuration,
+      totalDuration: formatDuration(totalDuration),
+      averageDurationMs: Math.round(avg),
+      averageDuration: formatDuration(Math.round(avg)),
+      medianDurationMs: median,
+      medianDuration: formatDuration(median),
+      slowThresholdMs: threshold,
+      slowTestsCount: slowTests.length,
+    },
+    slowTests,
+    slowFiles,
+    recommendations: buildRecommendations(slowTests, slowFiles),
+  };
+}
+
+function buildRecommendations(slowTests, slowFiles) {
+  const recs = [];
+
+  if (slowTests.length) {
+    recs.push('Reduce slow tests by using API setup (APIRequestContext) instead of repeating UI setup flows.');
+    recs.push('Prefer storageState for authenticated journeys; avoid logging in via UI in every test.');
+    recs.push('Move stable common setup into fixtures; keep assertions user-visible and minimal.');
+  }
+
+  if (slowFiles.length) {
+    recs.push('Split oversized spec files into smaller, focused specs to improve parallelism.');
+  }
+
+  recs.push('Use trace: on-first-retry and open traces to find the true wait bottleneck (network vs main thread vs selector).');
+  recs.push('If CI is slow: shard + blob reports + merge-reports for a single HTML report.');
+
+  return recs;
+}
+
+function printConsoleReport(analysis) {
+  console.log('\nPlaywright Performance Summary');
+  console.log('--------------------------------');
+  console.log(`Total tests:         ${analysis.summary.tests}`);
+  console.log(`Total duration:      ${analysis.summary.totalDuration}`);
+  console.log(`Average duration:    ${analysis.summary.averageDuration}`);
+  console.log(`Median duration:     ${analysis.summary.medianDuration}`);
+  console.log(`Slow threshold:      ${analysis.summary.slowThresholdMs}ms`);
+  console.log(`Slow tests (top 50): ${analysis.summary.slowTestsCount}`);
+
+  if (analysis.slowTests.length) {
+    console.log('\nSlowest Tests');
+    console.log('----------------');
+    for (const t of analysis.slowTests.slice(0, 10)) {
+      const where = t.project ? ` [${t.project}]` : '';
+      console.log(`${formatDuration(t.duration)}${where}  ${t.title}`);
+    }
+  }
+
+  console.log('\nRecommendations');
+  console.log('------------------');
+  analysis.recommendations.forEach((r, idx) => console.log(`${idx + 1}. ${r}`));
+}
+
+async function main() {
+  const cfg = parseArgs();
+
+  const json = readJson(cfg.reportPath);
+  const tests = extractTests(json);
+
+  if (!tests.length) {
+    console.error('No tests found in report. Make sure you are using the Playwright JSON reporter output.');
+    process.exit(2);
+  }
+
+  const analysis = analyzeTests(tests, cfg.threshold);
+
+  // Write JSON output
+  const outPath = path.resolve(cfg.outputPath);
+  fs.mkdirSync(path.dirname(outPath), { recursive: true });
+  fs.writeFileSync(outPath, JSON.stringify(analysis, null, 2));
+
+  // Print console summary
+  printConsoleReport(analysis);
+
+  console.log(`\nJSON report written to: ${outPath}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/templates/base/.claude/skills/playwright-e2e-testing/scripts/trace-url.js

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+
+/**
+ * trace-url.js
+ *
+ * Capture a Playwright trace for a URL using Chromium with optional mobile emulation and throttling.
+ *
+ * Why:
+ * - Produces a trace.zip you can open with: `npx playwright show-trace trace.zip`
+ * - Useful for debugging flakiness and performance regressions in a controlled way.
+ *
+ * Usage:
+ *   node scripts/trace-url.js --url https://example.com/path
+ *   node scripts/trace-url.js --url https://example.com --device "Pixel 5" --out ./artifacts
+ *   node scripts/trace-url.js --url https://example.com --throttle lighthouse-mobile --cpu 4
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { chromium, devices } = require('@playwright/test');
+
+function printHelp() {
+  console.log(`
+Playwright Trace Recorder
+
+Required:
+  --url <url>
+
+Optional:
+  --device <deviceName>           Playwright device descriptor, e.g. "Pixel 5", "iPhone 13"
+  --out <dir>                     Output directory (default: ./artifacts)
+  --wait <ms>                     Extra wait after navigation (default: 0)
+  --throttle <preset>             Network preset: none | lighthouse-mobile | fast-3g | slow-3g (Chromium only)
+  --cpu <rate>                    CPU throttling rate (1 = none, 4 = 4x slower) (Chromium only)
+  --disable-cache                 Disable HTTP cache (Chromium only)
+  --bypass-sw                     Bypass service worker (Chromium only)
+
+Examples:
+  node scripts/trace-url.js --url https://example.com --device "Pixel 5" --disable-cache --bypass-sw --throttle lighthouse-mobile --cpu 4
+`);
+}
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const out = { url: null, device: null, outDir: './artifacts', wait: 0, throttle: 'none', cpu: null, disableCache: false, bypassSW: false };
+
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === '--url' && args[i + 1]) out.url = args[++i];
+    else if (a === '--device' && args[i + 1]) out.device = args[++i];
+    else if (a === '--out' && args[i + 1]) out.outDir = args[++i];
+    else if (a === '--wait' && args[i + 1]) out.wait = parseInt(args[++i], 10);
+    else if (a === '--throttle' && args[i + 1]) out.throttle = args[++i];
+    else if (a === '--cpu' && args[i + 1]) out.cpu = parseFloat(args[++i]);
+    else if (a === '--disable-cache') out.disableCache = true;
+    else if (a === '--bypass-sw') out.bypassSW = true;
+    else if (a === '--help') { printHelp(); process.exit(0); }
+  }
+
+  if (!out.url) {
+    printHelp();
+    process.exit(1);
+  }
+
+  return out;
+}
+
+function mbpsToBytesPerSec(mbps) {
+  return Math.floor((mbps * 1024 * 1024) / 8);
+}
+function kbpsToBytesPerSec(kbps) {
+  return Math.floor((kbps * 1024) / 8);
+}
+
+function networkConditions(preset) {
+  switch (preset) {
+    case 'lighthouse-mobile':
+      return { offline: false, latency: 150, downloadThroughput: mbpsToBytesPerSec(1.6), uploadThroughput: kbpsToBytesPerSec(750), connectionType: 'cellular4g' };
+    case 'fast-3g':
+      return { offline: false, latency: 150, downloadThroughput: mbpsToBytesPerSec(1.5), uploadThroughput: kbpsToBytesPerSec(750), connectionType: 'cellular3g' };
+    case 'slow-3g':
+      return { offline: false, latency: 400, downloadThroughput: kbpsToBytesPerSec(400), uploadThroughput: kbpsToBytesPerSec(400), connectionType: 'cellular3g' };
+    default:
+      return null;
+  }
+}
+
+async function main() {
+  const cfg = parseArgs();
+  fs.mkdirSync(cfg.outDir, { recursive: true });
+
+  const device = cfg.device ? devices[cfg.device] : null;
+
+  const browser = await chromium.launch();
+  const context = await browser.newContext({
+    ...(device || {}),
+  });
+
+  const page = await context.newPage();
+
+  // Optional: Chromium-only CDP controls
+  if (cfg.disableCache || cfg.bypassSW || cfg.throttle !== 'none' || cfg.cpu) {
+    const cdp = await context.newCDPSession(page);
+    await cdp.send('Network.enable');
+
+    if (cfg.disableCache) await cdp.send('Network.setCacheDisabled', { cacheDisabled: true });
+    if (cfg.bypassSW) await cdp.send('Network.setBypassServiceWorker', { bypass: true });
+
+    const net = networkConditions(cfg.throttle);
+    if (net) await cdp.send('Network.emulateNetworkConditions', net);
+    if (cfg.cpu) await cdp.send('Emulation.setCPUThrottlingRate', { rate: cfg.cpu });
+  }
+
+  const tracePath = path.join(cfg.outDir, 'trace.zip');
+  await context.tracing.start({ screenshots: true, snapshots: true, sources: true });
+
+  await page.goto(cfg.url, { waitUntil: 'load' });
+
+  if (cfg.wait > 0) await page.waitForTimeout(cfg.wait);
+
+  await context.tracing.stop({ path: tracePath });
+
+  await browser.close();
+
+  console.log(`Trace written to: ${tracePath}`);
+  console.log(`Open with: npx playwright show-trace ${tracePath}`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/templates/base/.claude/skills/playwright-e2e-testing/templates/ci/github-actions.playwright.yml

@@ -0,0 +1,78 @@
+name: Playwright Tests (sharded)
+
+on:
+  pull_request:
+  push:
+    branches: [ main, master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      # Choose ONE package manager strategy.
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      # Use blob reporter for merge-reports.
+      - name: Run Playwright (blob report)
+        env:
+          CI: true
+          BASE_URL: ${{ secrets.E2E_BASE_URL }}
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+
+      - name: Upload blob report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 14
+
+  merge-report:
+    runs-on: ubuntu-latest
+    needs: [test]
+    if: always()
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download blob reports
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML report
+        run: npx playwright merge-reports --reporter=html ./all-blob-reports
+
+      - name: Upload HTML report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-html-report
+          path: playwright-report
+          retention-days: 14

package/templates/base/.claude/skills/playwright-e2e-testing/templates/fixtures.ts

@@ -0,0 +1,44 @@
+import { test as base, expect, type Page, type BrowserContext } from '@playwright/test';
+import { installGPTObserver, waitForFirstGPTEvent } from './helpers/ad-gpt-observer';
+import { applyChromiumMobileProfile } from './helpers/chromium-mobile-profile';
+
+type Fixtures = {
+  authedPage: Page;
+  ads: {
+    install: () => Promise<void>;
+    waitForFirstRender: (timeoutMs?: number) => Promise<unknown>;
+    waitForFirstViewable: (timeoutMs?: number) => Promise<unknown>;
+  };
+};
+
+export const test = base.extend<Fixtures>({
+  authedPage: async ({ page }, use) => {
+    // If storageState is configured in the project, this page is already authenticated.
+    await use(page);
+  },
+
+  ads: async ({ page, context }, use) => {
+    await use({
+      install: async () => {
+        await installGPTObserver(page);
+      },
+      waitForFirstRender: async (timeoutMs = 15_000) => waitForFirstGPTEvent(page, 'slotRenderEnded', timeoutMs),
+      waitForFirstViewable: async (timeoutMs = 20_000) => waitForFirstGPTEvent(page, 'impressionViewable', timeoutMs),
+    });
+  },
+});
+
+export { expect };
+
+/**
+ * Optional: call this at the start of a test to simulate a more realistic mid-tier mobile profile.
+ * NOTE: CDP throttling only works on Chromium projects.
+ */
+export async function enableMobileRealism(context: BrowserContext, page: Page) {
+  await applyChromiumMobileProfile(context, page, {
+    cpuThrottlingRate: 4,
+    network: 'lighthouse-mobile',
+    disableCache: true,
+    bypassServiceWorker: true,
+  });
+}