1. GitHub Actions Workflow Example

name: Frontend CI/CD Pipeline

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    
    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18
        
    - name: Install dependencies
      run: npm ci
      
    - name: Run unit tests
      run: npm test -- --coverage
      
    - name: Run integration tests
      run: npm run test:integration
      
    - name: Run E2E tests
      uses: cypress-io/github-action@v5
      with:
        start: npm start
        wait-on: 'http://localhost:3000'
        
  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
    - uses: actions/checkout@v3
    - run: npm run build
    - uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_TOKEN }}

2. Testing Serverless Functions

Test API endpoints with mocks:

// API test using Jest and node-mocks-http
import handler from '../api/users';
import { createMocks } from 'node-mocks-http';

test('GET /api/users returns 200', async () => {
  const { req, res } = createMocks({
    method: 'GET'
  });

  await handler(req, res);
  expect(res._getStatusCode()).toBe(200);
  
  const data = JSON.parse(res._getData());
  expect(data).toHaveProperty('users');
});

test('POST /api/users creates new user', async () => {
  const { req, res } = createMocks({
    method: 'POST',
    body: { name: 'Alice', email: 'alice@example.com' }
  });

  await handler(req, res);
  expect(res._getStatusCode()).toBe(201);
});

Test Optimization Techniques

• Parallel execution: Run tests concurrently across CI workers
• Test splitting: Distribute E2E tests across multiple machines
• Caching dependencies: Reuse node_modules between runs
• Flaky test management: Automatically retry failed tests
• Test data management: Use isolated databases per test run

Progressive Deployment Strategies

// Canary deployment configuration
steps:
  - name: Deploy to 10% of users
    uses: vercel-action@v3
    with:
      project-id: ${{ secrets.VERCEL_PROJECT_ID }}
      token: ${{ secrets.VERCEL_TOKEN }}
      targets: production
      production: false
      scope: 10%
      
  - name: Run smoke tests
    run: npm run test:smoke
    
  - name: Full rollout
    if: success()
    uses: vercel-action@v3
    with:
      project-id: ${{ secrets.VERCEL_PROJECT_ID }}
      token: ${{ secrets.VERCEL_TOKEN }}
      targets: production
      production: true