snippet-pastebin/NEXT_STEPS_PHASE2.md

Phase 2: CI/CD Batching Setup

Now that Phase 1 optimizations are complete, here's your roadmap for Phase 2 to achieve 3x overall speedup.

Phase 2 Overview

Goal: Parallelize e2e tests across GitHub Actions jobs
Expected speedup: Additional 2-2.5x (combined with Phase 1 = 3x total)
Total execution time: 8-10 minutes (down from 25-30 min baseline)

Implementation Steps

Step 1: Create GitHub Actions Workflow (.github/workflows/e2e-tests.yml)

name: E2E Tests - Batched

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  # Batch 1: Core Functionality
  e2e-batch-1:
    name: E2E - Functionality & Components
    runs-on: ubuntu-latest
    timeout-minutes: 15
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx playwright install
      - run: npx playwright test --grep "Functionality Tests|Component-Specific Tests"
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: batch-1-report
          path: blob-report
          retention-days: 30

  # Batch 2: Responsive & Mobile
  e2e-batch-2:
    name: E2E - Responsive & Mobile
    runs-on: ubuntu-latest
    timeout-minutes: 15
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx playwright install
      - run: npx playwright test --grep "Mobile|Responsive"
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: batch-2-report
          path: blob-report
          retention-days: 30

  # Batch 3: Visual & Styling
  e2e-batch-3:
    name: E2E - Visual & Styling
    runs-on: ubuntu-latest
    timeout-minutes: 15
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx playwright install
      - run: npx playwright test --grep "Visual|CSS|Styling"
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: batch-3-report
          path: blob-report
          retention-days: 30

  # Batch 4: Cross-Platform
  e2e-batch-4:
    name: E2E - Cross-Platform
    runs-on: ubuntu-latest
    timeout-minutes: 15
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx playwright install
      - run: npx playwright test --grep "Cross-Platform"
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: batch-4-report
          path: blob-report
          retention-days: 30

  # Summary job
  e2e-results:
    name: E2E Results
    runs-on: ubuntu-latest
    needs: [e2e-batch-1, e2e-batch-2, e2e-batch-3, e2e-batch-4]
    if: always()
    steps:
      - name: Download artifacts
        uses: actions/download-artifact@v4
      - name: Merge reports
        run: |
          npx playwright merge-reports --reporter html ./batch-*-report
      - name: Upload merged report
        uses: actions/upload-artifact@v4
        with:
          name: html-report
          path: playwright-report
          retention-days: 30

Step 2: Test Batch Distribution

Batch 1 (Core Functionality - ~5 min):

• Functionality Tests - Core Features
• Component-Specific Tests

Batch 2 (Responsive & Mobile - ~8 min):

• Mobile-responsive tests
• Cross-Platform mobile tests

Batch 3 (Visual & Styling - ~12 min):

• Visual regression tests
• CSS styling tests

Batch 4 (Cross-Platform - ~6 min):

• Desktop-specific cross-platform tests
• Error handling tests
• Home page tests

Step 3: Run Tests Locally to Verify

Before pushing to CI, run each batch locally:

# Batch 1
npx playwright test --grep "Functionality Tests|Component-Specific Tests"

# Batch 2
npx playwright test --grep "Mobile|Responsive"

# Batch 3
npx playwright test --grep "Visual|CSS|Styling"

# Batch 4
npx playwright test --grep "Cross-Platform"

Step 4: Configure Playwright for CI

Ensure playwright.config.ts is CI-ready:

// Already configured - verify:
export default defineConfig({
  fullyParallel: true,  // ✅ Ensures max parallelization
  retries: process.env.CI ? 2 : 0,  // ✅ CI retries
  timeout: 60 * 1000,  // ✅ 60s per test
  expect: {
    timeout: 10 * 1000,  // ✅ 10s expectations
  },
  // ... rest of config
})

Expected Timeline

Phase	Action	Time	Total
Baseline	Run full suite serially	25-30 min	25-30 min
Phase 1	Apply optimizations	Done	18-20 min
Phase 2	Set up 4 parallel jobs	15 min config	~12 min actual
Total	Phase 1 + Phase 2	-	8-10 min

Performance Breakdown

Phase 1 Impact (Completed)

• Removed 242 seconds of arbitrary waits → -15-20%
• Split 21 multi-context tests → -30-40% per test
• Optimized error tracking → -5-10%
• Result: 25-30 min → 18-20 min

Phase 2 Impact (Upcoming)

• Run 4 batches in parallel
• Batch 1 + 2 + 3 + 4 run simultaneously
• Critical path: longest batch (~12 min)
• Result: 18-20 min → 8-10 min

Combined Impact

• Overall speedup: 3x
• Time saved: ~20 minutes per test run
• Cost: Same infrastructure, just parallel jobs
• Reliability: Pre-existing errors fixed in Phase 1

Monitoring & Validation

Once Phase 2 is deployed:

1. Check GitHub Actions: All 4 batches should complete in parallel
2. Monitor timing: Should see ~12-15 minutes total time per PR
3. Validate coverage: All 127 tests should run
4. Review reports: Merged HTML report in artifacts

Rollback Plan

If Phase 2 has issues:

# Fall back to serial execution
npm run test:e2e  # Uses Phase 1 optimizations only

Questions?

• Phase 1 achieved 30-40% speedup with code changes only
• Phase 2 achieves 2-2.5x more with CI/CD parallelization
• Combined: 3x total speedup with no infrastructure changes

Go from 25-30 min → 8-10 min with these two phases!