Add Comprehensive Playwright E2E Testing Suite for Multi-Framework Monorepo

🎯 What

Implement a comprehensive end-to-end testing suite using Playwright that covers all four frontend frameworks (Angular, React, Vue, Svelte) and their API integrations in the shopathome monorepo.

🤔 Why

• Quality Assurance: Ensure consistent functionality across all four frontend implementations
• Regression Prevention: Catch breaking changes before they reach production
• Cross-Framework Validation: Verify that all apps implement the same business logic correctly
• API Integration Testing: Ensure frontend-backend communication works reliably
• Mobile Compatibility: Validate responsive design across all frameworks
• Performance Monitoring: Track load times and performance metrics
• CI/CD Confidence: Enable automated testing in deployment pipelines

🛠️ How

Project Structure

shopathome/
├── e2e-tests/
│   ├── specs/
│   │   ├── cross-framework/
│   │   │   ├── product-management.spec.ts
│   │   │   ├── discount-functionality.spec.ts
│   │   │   ├── mobile-responsiveness.spec.ts
│   │   │   └── performance.spec.ts
│   │   ├── framework-specific/
│   │   │   ├── angular.spec.ts
│   │   │   ├── react.spec.ts
│   │   │   ├── vue.spec.ts
│   │   │   └── svelte.spec.ts
│   │   ├── api/
│   │   │   ├── azure-functions.spec.ts
│   │   │   └── fastify-api.spec.ts
│   │   └── integration/
│   │       └── end-to-end-flows.spec.ts
│   ├── fixtures/
│   │   ├── test-data.ts
│   │   └── mock-responses.ts
│   ├── utils/
│   │   ├── test-helpers.ts
│   │   └── page-objects.ts
│   └── config/
│       └── test-config.ts
├── playwright.config.ts
└── package.json (updated with test scripts)

1. Setup & Configuration

Dependencies to Install

{
  "devDependencies": {
    "@playwright/test": "^1.40.0",
    "typescript": "^5.0.0"
  }
}

Playwright Configuration (playwright.config.ts)

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e-tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'mobile-safari',
      use: { ...devices['iPhone 12'] },
    },
  ],
  webServer: [
    {
      command: 'npm run start --prefix angular-app',
      port: 4200,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run start --prefix react-app',
      port: 3000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run dev --prefix vue-app',
      port: 8080,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run dev --prefix svelte-app',
      port: 5000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run start --prefix fastify-api-server',
      port: 3001,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'func start --prefix api',
      port: 7071,
      reuseExistingServer: !process.env.CI,
    },
  ],
});

2. Test Specifications

A. Cross-Framework Product Management Tests

File: e2e-tests/specs/cross-framework/product-management.spec.ts

Requirements:

• Test CRUD operations across all 4 frameworks
• Verify data consistency between apps
• Test product listing, creation, editing, deletion
• Validate form validations work consistently
• Ensure API integration works the same way

B. Discount Functionality Tests

File: e2e-tests/specs/cross-framework/discount-functionality.spec.ts

Requirements:

• Test discount service integration across all apps
• Verify discount display consistency
• Test discount application logic
• Validate discount calculations
• Test discount code functionality

C. API Integration Tests

Files:

• e2e-tests/specs/api/azure-functions.spec.ts
• e2e-tests/specs/api/fastify-api.spec.ts

Requirements:

• Test all Azure Functions endpoints (products-get, products-post, products-put, products-delete, discounts-get)
• Test Fastify API server endpoints
• Validate HTTP status codes
• Test error handling scenarios
• Verify CORS configuration
• Test request/response formats

D. Mobile Responsiveness Tests

File: e2e-tests/specs/cross-framework/mobile-responsiveness.spec.ts

Requirements:

• Test all frameworks on mobile viewports (320px, 768px, 1024px)
• Verify touch interactions work
• Test mobile navigation patterns
• Validate responsive layout adjustments
• Ensure accessibility on mobile devices

E. Framework-Specific Tests

Angular Tests (angular.spec.ts):

• Test Angular routing and lazy loading
• Verify Angular services and dependency injection
• Test Angular reactive forms
• Validate component lifecycle hooks

React Tests (react.spec.ts):

• Test React hooks and state management
• Verify React router navigation
• Test component re-rendering
• Validate context providers

Vue Tests (vue.spec.ts):

• Test Vue router and navigation guards
• Verify Composition API functionality
• Test Vue reactive data
• Validate component communication

Svelte Tests (svelte.spec.ts):

• Test Svelte stores and reactivity
• Verify Svelte routing
• Test component binding
• Validate Svelte animations/transitions

F. Performance Tests

File: e2e-tests/specs/cross-framework/performance.spec.ts

Requirements:

• Measure initial page load times for all frameworks
• Test bundle size impact
• Verify time to interactive (TTI)
• Test network request optimization
• Validate caching strategies

3. Test Data & Utilities

Test Data (fixtures/test-data.ts)

export const testProducts = [
  { id: 1, name: 'Test Laptop', price: 999.99, category: 'Electronics' },
  { id: 2, name: 'Test Book', price: 29.99, category: 'Education' },
];

export const testDiscounts = [
  { code: 'TEST10', percentage: 10, description: 'Test 10% off' },
  { code: 'SAVE20', percentage: 20, description: 'Test 20% off' },
];

Page Objects (utils/page-objects.ts)

export class ProductPage {
  constructor(private page: Page) {}
  
  async navigateToProducts() { /* implementation */ }
  async addProduct(product: Product) { /* implementation */ }
  async editProduct(id: string, updates: Partial<Product>) { /* implementation */ }
  async deleteProduct(id: string) { /* implementation */ }
}

4. Implementation Requirements

Data Test IDs

Add consistent data-testid attributes across all frameworks:

• data-testid="product-list"
• data-testid="product-item"
• data-testid="add-product-btn"
• data-testid="product-name-input"
• data-testid="product-price-input"
• data-testid="save-product-btn"
• data-testid="delete-product-btn"
• data-testid="discount-list"
• data-testid="discount-item"
• data-testid="mobile-menu-toggle"

Test Scripts

Update package.json with test scripts:

{
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:report": "playwright show-report",
    "test:setup": "playwright install"
  }
}

5. Success Criteria

✅ All tests pass consistently
✅ Cross-framework functionality is identical
✅ API integration works reliably
✅ Mobile responsiveness is validated
✅ Performance benchmarks are met
✅ CI/CD integration is successful
✅ Test coverage is comprehensive
✅ Documentation is complete

6. Additional Considerations

• Environment Variables: Set up test environment configuration
• Test Isolation: Ensure tests don't interfere with each other
• Parallel Execution: Configure safe parallel test execution
• Flaky Test Prevention: Add proper waits and assertions
• Screenshot/Video Recording: Configure for failed test debugging
• Accessibility Testing: Include a11y checks in tests
• Security Testing: Validate input sanitization and XSS prevention

7. Documentation

Create e2e-tests/README.md with:

• How to run tests locally
• Test structure explanation
• Adding new tests guidelines
• Troubleshooting common issues
• CI/CD integration instructions

Acceptance Criteria:

• All frameworks can be tested consistently
• API endpoints are fully covered
• Mobile responsiveness is validated
• Performance metrics are tracked
• Tests pass in CI environment
• Documentation is complete and clear

Estimated Effort: 3-5 days
Priority: High