ci(e2e): add github actions for E2E Testing (#671)

.github/workflows/test-e2e-all.yml

@@ -0,0 +1,89 @@
+name: E2E Test ALL
+run-name: E2E Test All
+on:
+  workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  dispatch-test-all:
+    name: Dispatch All Test
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 8/8]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm i --no-frozen-lockfile
+
+      - name: dev start
+        run: pnpm dev & sleep 5
+      - name: update playwright
+        run: pnpm recursive update @playwright/test
+      - name: Install Playwright browsers
+        run: pnpm install:browser --with-deps chromium
+      - name: Run Playwright tests
+        run: pnpm test:e2e3 --shard=${{ matrix.shard }} --reporter=blob
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: all-blob-reports
+          path: examples/vue3/blob-report
+          retention-days: 0.5
+
+  dispatch-test-all-merge-reports:
+    name: 'Merge Reports After Dispatch All Test'
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: always()
+    needs: [dispatch-test-all]
+
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install dependencies
+        run: |
+          npm install -g @playwright/test
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: all-blob-reports
+          path: all-blob-reports
+
+      - name: Merge into HTML Report
+        run: playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v3
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 7

.github/workflows/test-e2e-dispatch.yml

@@ -0,0 +1,55 @@
+name: E2E Test Dispatch
+run-name: E2E Test Dispatch--${{ inputs.testDemos }}--
+on:
+  workflow_dispatch:
+    inputs:
+      testDemos:
+        description: |
+          Name of directory from "examples/sites/demos/pc/app",
+          such as `input, alert`.
+        required: true
+        type: string
+concurrency:
+  group: ${{ github.workflow }}-${{ github.sha }}
+  cancel-in-progress: true
+jobs:
+  dispatch-tests:
+    name: Dispatch Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm i --no-frozen-lockfile
+
+      - name: dev start
+        run: pnpm dev & sleep 5
+
+      - name: Install Playwright browsers
+        run: pnpm install:browser --with-deps chromium
+
+      - name: Run Playwright tests
+        run: |
+          testDemos="${{ inputs.testDemos }}"
+          components=${testDemos//,/' '}
+          pnpm test:e2e3 $components --reporter=line

.github/workflows/test-e2e-pr.yml

@@ -0,0 +1,69 @@
+name: E2E Test PR
+run-name: E2E Test PR--${{ github.event.pull_request.title }}
+on:
+  pull_request:
+    branches: [dev, release, main]
+    types: [opened, reopened, synchronize, edited]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  pr-test:
+    name: PR E2E Test
+    runs-on: ubuntu-latest
+    env:
+      TEST_COMPONENTS: ''
+    steps:
+      - name: Parse Title
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const prTitle = '${{ github.event.pull_request.title }}'
+            const regex = /\[(.*?)\]/
+            const matches = prTitle.match(regex)
+            if (matches && matches.length > 1 && matches[1]) {
+              let components = matches[1].split(',').map(c => `${c.trim()}/`).filter(c => c)
+              components = [...new Set(components)].slice(0, 3).join(' ')
+              core.exportVariable('TEST_COMPONENTS', components)
+            } else {
+              core.setFailed('Missing components to be tested. Title must be like "fix(components): [input, alert] fix xxx bug", component name comes from "examples/sites/demos/pc/app". Please read our contributing guide')
+            }
+      - uses: actions/checkout@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Cache Playwright Installation
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm i --no-frozen-lockfile
+
+      - name: dev start
+        run: pnpm dev & sleep 5
+
+      - name: Install Playwright browsers
+        run: pnpm install:browser --with-deps chromium
+
+      - name: E2E Test
+        run: pnpm test:e2e3 ${{ env.TEST_COMPONENTS }} --reporter=line