cross-browser-tests.yml

name: Cross-Browser Compatibility Tests

on:
  push:
    branches: [main, develop]
    paths:
      - 'packages/leptos/**'
      - 'tests/e2e/**'
      - '.github/workflows/cross-browser-tests.yml'
      - 'playwright.config.ts'
      - 'tests/e2e/cross-browser.config.ts'
  pull_request:
    branches: [main, develop]
    paths:
      - 'packages/leptos/**'
      - 'tests/e2e/**'
      - '.github/workflows/cross-browser-tests.yml'
      - 'playwright.config.ts'
      - 'tests/e2e/cross-browser.config.ts'
  schedule:
    # Run cross-browser tests weekly on Sundays at 2 AM UTC
    - cron: '0 2 * * 0'
  workflow_dispatch:
    inputs:
      browser:
        description: 'Browser to test (all, chrome, firefox, safari, edge, mobile)'
        required: false
        default: 'all'
        type: choice
        options:
          - all
          - chrome
          - firefox
          - safari
          - edge
          - mobile

env:
  NODE_VERSION: '20'
  RUST_VERSION: 'stable'
  RUSTFLAGS: "-D warnings"

jobs:
  cross-browser-tests:
    name: Cross-Browser Tests - ${{ matrix.browser }}
    runs-on: ubuntu-latest
    timeout-minutes: 60

    strategy:
      fail-fast: false
      matrix:
        browser:
          - chromium
          - firefox
          - webkit
        include:
          - browser: chromium
            display-name: Chrome
            project: chromium
          - browser: firefox
            display-name: Firefox
            project: firefox
          - browser: webkit
            display-name: Safari
            project: webkit

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Setup Rust
        uses: dtolnay/rust-toolchain@stable
        with:
          toolchain: ${{ env.RUST_VERSION }}
          targets: wasm32-unknown-unknown

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10

      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Install Playwright browsers
        run: pnpm exec playwright install --with-deps ${{ matrix.browser }}

      - name: Cache Cargo build
        uses: actions/cache@v3
        with:
          path: |
            target/
            ~/.cargo/registry/
          key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
          restore-keys: |
            ${{ runner.os }}-cargo-

      - name: Build demo application
        run: |
          cd examples/comprehensive-demo
          trunk build --public-url /comprehensive-demo

      - name: Start test server
        run: |
          cd examples/comprehensive-demo
          python3 -m http.server 8001 &
          echo $! > /tmp/test-server.pid

      - name: Wait for server
        run: |
          for i in {1..30}; do
            if curl -s http://localhost:8001 > /dev/null; then
              echo "Server is ready"
              exit 0
            fi
            echo "Waiting for server... ($i/30)"
            sleep 2
          done
          echo "Server failed to start"
          exit 1

      - name: Run ${{ matrix.display-name }} cross-browser tests
        run: |
          pnpm exec playwright test \
            --config=tests/e2e/cross-browser.config.ts \
            --project=${{ matrix.project }} \
            --reporter=json \
            --reporter=html \
            --reporter=line
        env:
          CI: true
          HEADLESS: true

      - name: Upload ${{ matrix.display-name }} test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: cross-browser-results-${{ matrix.browser }}
          path: |
            test-results/cross-browser/
            playwright-report/
          retention-days: 30

      - name: Upload ${{ matrix.display-name }} screenshots
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: cross-browser-screenshots-${{ matrix.browser }}
          path: test-results/cross-browser/
          retention-days: 30

      - name: Stop test server
        if: always()
        run: |
          if [ -f /tmp/test-server.pid ]; then
            kill $(cat /tmp/test-server.pid) || true
          fi

  edge-tests:
    name: Cross-Browser Tests - Edge
    runs-on: windows-latest
    timeout-minutes: 60

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Setup Rust
        uses: dtolnay/rust-toolchain@stable
        with:
          toolchain: ${{ env.RUST_VERSION }}
          targets: wasm32-unknown-unknown

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10

      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Install Playwright browsers
        run: pnpm exec playwright install --with-deps msedge

      - name: Build demo application
        run: |
          cd examples/comprehensive-demo
          trunk build --public-url /comprehensive-demo

      - name: Start test server
        run: |
          cd examples/comprehensive-demo
          python -m http.server 8001
        continue-on-error: true

      - name: Wait for server
        run: |
          for i in {1..30}; do
            if curl -s http://localhost:8001 > /dev/null; then
              echo "Server is ready"
              exit 0
            fi
            echo "Waiting for server... ($i/30)"
            sleep 2
          done

      - name: Run Edge cross-browser tests
        run: |
          pnpm exec playwright test \
            --config=tests/e2e/cross-browser.config.ts \
            --project=edge \
            --reporter=json \
            --reporter=html
        env:
          CI: true
          HEADLESS: true

      - name: Upload Edge test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: cross-browser-results-edge
          path: |
            test-results/cross-browser/
            playwright-report/
          retention-days: 30

  mobile-tests:
    name: Cross-Browser Tests - Mobile (${{ matrix.mobile-browser }})
    runs-on: ubuntu-latest
    timeout-minutes: 45

    strategy:
      fail-fast: false
      matrix:
        mobile-browser:
          - mobile-chrome
          - mobile-safari
        include:
          - mobile-browser: mobile-chrome
            display-name: Android Chrome
          - mobile-browser: mobile-safari
            display-name: iOS Safari

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Install Playwright browsers
        run: pnpm exec playwright install --with-deps chromium webkit

      - name: Cache Cargo build
        uses: actions/cache@v3
        with:
          path: |
            target/
            ~/.cargo/registry/
          key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
          restore-keys: |
            ${{ runner.os }}-cargo-

      - name: Build demo application
        run: |
          cd examples/comprehensive-demo
          trunk build --public-url /comprehensive-demo

      - name: Start test server
        run: |
          cd examples/comprehensive-demo
          python3 -m http.server 8001 &
          echo $! > /tmp/test-server.pid

      - name: Wait for server
        run: |
          for i in {1..30}; do
            if curl -s http://localhost:8001 > /dev/null; then
              echo "Server is ready"
              exit 0
            fi
            echo "Waiting for server... ($i/30)"
            sleep 2
          done

      - name: Run ${{ matrix.display-name }} tests
        run: |
          pnpm exec playwright test \
            --config=tests/e2e/cross-browser.config.ts \
            --project=${{ matrix.mobile-browser }} \
            --reporter=line
        env:
          CI: true
          HEADLESS: true

      - name: Upload ${{ matrix.display-name }} test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: cross-browser-results-${{ matrix.mobile-browser }}
          path: |
            test-results/cross-browser/
            playwright-report/
          retention-days: 30

      - name: Stop test server
        if: always()
        run: |
          if [ -f /tmp/test-server.pid ]; then
            kill $(cat /tmp/test-server.pid) || true
          fi

  test-summary:
    name: Test Summary
    runs-on: ubuntu-latest
    needs: [cross-browser-tests, edge-tests, mobile-tests]
    if: always()

    steps:
      - name: Download all test results
        uses: actions/download-artifact@v3
        with:
          path: test-results/all

      - name: Generate cross-browser test summary
        run: |
          echo "# Cross-Browser Compatibility Test Summary" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "## Browser Coverage" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ Chromium (Chrome)" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ Firefox" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ WebKit (Safari)" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ Edge" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ Mobile Chrome" >> $GITHUB_STEP_SUMMARY
          echo "- ✅ Mobile Safari" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "## Components Tested" >> $GITHUB_STEP_SUMMARY
          echo "All 41+ components tested across all browsers:" >> $GITHUB_STEP_SUMMARY
          echo "- Basic: button, input, checkbox, switch, etc." >> $GITHUB_STEP_SUMMARY
          echo "- Interactive: tabs, accordion, dialog, etc." >> $GITHUB_STEP_SUMMARY
          echo "- Layout: card, separator, scroll-area, etc." >> $GITHUB_STEP_SUMMARY
          echo "- Complex: form, calendar, date-picker, etc." >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "## Feature Detection" >> $GITHUB_STEP_SUMMARY
          echo "- CSS Variables support" >> $GITHUB_STEP_SUMMARY
          echo "- Flexbox and Grid support" >> $GITHUB_STEP_SUMMARY
          echo "- WASM module loading" >> $GITHUB_STEP_SUMMARY
          echo "- Accessibility features" >> $GITHUB_STEP_SUMMARY
          echo "- Viewport responsiveness" >> $GITHUB_STEP_SUMMARY

      - name: Check test results
        run: |
          if [ -d "test-results/all" ]; then
            echo "Test results downloaded successfully"
            ls -la test-results/all
          else
            echo "No test results found"
          fi