feat(ci): e2e add vue2 (#1398)

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

@@ -0,0 +1,51 @@
+name: test-e2e-pr-comment
+
+on:
+  workflow_run:
+    workflows: ['E2E Test PR']
+    types:
+      - completed
+
+jobs:
+  comment:
+    name: Comment User Tip
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Pr Artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: pr
+          if_no_artifact_found: success
+      - name: Save PR Id
+        id: pr
+        run: |
+          if [ -f user-tip.txt ]; then
+            echo "id=$(cat pr-id.txt)" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Download user-tip.txt
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: user-tip
+          if_no_artifact_found: success
+
+      - id: txtToOutput
+        run: |
+          if [ -f user-tip.txt ]; then
+            echo 'text<<EOF' >> $GITHUB_OUTPUT
+            cat user-tip.txt >> $GITHUB_OUTPUT
+            echo 'EOF' >> $GITHUB_OUTPUT
+          fi
+      - run: |
+          echo  ${{ steps.txtToOutput.outputs.text }}
+      - run: |
+          echo  ${{ steps.pr.outputs.id }}
+      - uses: thollander/actions-comment-pull-request@v2
+        if: ${{ steps.txtToOutput.outputs.text && steps.pr.outputs.id }}
+        with:
+          message: |
+            ${{ steps.txtToOutput.outputs.text }}
+          comment_tag: e2e-tip
+          pr_number: ${{ steps.pr.outputs.id }}

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

@@ -14,6 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       testComponents: ${{ steps.parseTitle.outputs.testComponents }}
+      testclis: ${{ steps.parsetestCli.outputs.testClis }}
     steps:
       - name: Parse Title
         id: parseTitle
@@ -32,17 +33,53 @@ jobs:
               components = [...new Set(components)].slice(0, 3).join(' ')
               core.setOutput('testComponents', components)
             } else {
-              const warningString =`
+              const warningString =`**[e2e-test-warn]**
               The component to be tested is missing.
 
               The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".
               
               Please make sure you've read our [contributing guide](https://github.com/opentiny/tiny-vue/blob/dev/CONTRIBUTING.md)
               `
+              core.setOutput('tip', warningString)
               core.warning(warningString)
             }
+      - name: generate user-tip.txt
+        if: ${{ steps.parseTitle.outputs.tip }}
+        run: |
+          cat << EOF > user-tip.txt
+          ${{ steps.parseTitle.outputs.tip }}
+          EOF
+      - name: Upload User Tip
+        if: ${{ steps.parseTitle.outputs.tip }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: user-tip
+          path: user-tip.txt
+          retention-days: 1
+      - name: Save PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        run: echo ${{ github.event.number }} > ./pr-id.txt
+
+      - name: Upload PR number
+        if: ${{ steps.parseTitle.outputs.tip }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: pr
+          path: ./pr-id.txt
+      - name: Parse Test Cli
+        id: parsetestCli
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const testClis = '${{ vars.PLAYWRIGHT_CLIS }}' ? '${{ vars.PLAYWRIGHT_CLIS }}'.split(',') : ['pnpm test:e2e3']
+            core.setOutput('testclis', JSON.stringify(testClis))
+
   pr-test:
     if: ${{ needs.parse-components.outputs.testComponents }}
+    strategy:
+      matrix:
+        testcli: ${{ fromJson(needs.parse-components.outputs.testclis) }}
+
     name: PR E2E Test
     needs: parse-components
     runs-on: ubuntu-latest
@@ -78,11 +115,8 @@ jobs:
       - name: Install dependencies
         run: pnpm i --no-frozen-lockfile
 
-      - name: dev start
-        run: pnpm site & 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 --retries=1 --workers=2
+        run: ${{ matrix.testcli }} ${{ env.TEST_COMPONENTS }} --retries=1 --workers=2

examples/vue2/playwright.config.js

@@ -1,6 +1,11 @@
 import Config from '@opentiny-internal/playwright-config'
 
+const origin = 'http://localhost:7126'
+const baseURL = `${origin}/pc/`
+const devServerCommon = 'pnpm run -w dev2'
+
 export default Config({
-  testDir: '../docs/resources',
+  testDir: '../sites/demos',
-  port: 7126
+  baseURL,
+  devServerCommon
 })

examples/vue3/playwright.config.js

@@ -3,6 +3,7 @@ import Config from '@opentiny-internal/playwright-config'
 const origin = 'http://localhost:3101'
 // or 'http://localhost:7130/pc/'
 const baseURL = `${origin}/tiny-vue/zh-CN/os-theme/components/`
+const devServerCommon = 'pnpm run -w site'
 
 export default Config({
   testDir: '../sites/demos',
@@ -17,5 +18,6 @@ export default Config({
         ]
       }
     ]
-  }
+  },
+  devServerCommon
 })

internals/playwright-config/src/index.js

@@ -1,5 +1,5 @@
 // import type { PlaywrightTestConfig } from '@playwright/test'
-import { devices } from '@playwright/test'
+import { devices, defineConfig } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,8 @@ import { devices } from '@playwright/test'
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const Config = ({ testDir, baseURL, storageState }) => ({
+const Config = ({ testDir, baseURL, storageState, devServerCommon }) =>
+  defineConfig({
     testDir,
     /* 每个 test 用例最长时间。 */
     timeout: 20 * 1000,
@@ -45,7 +46,12 @@ const Config = ({ testDir, baseURL, storageState }) => ({
       /* Emulates the user timezone */
       timezoneId: 'Asia/Shanghai'
     },
-
+    webServer: {
+      command: devServerCommon,
+      url: baseURL,
+      reuseExistingServer: !process.env.CI,
+      stdout: 'pipe'
+    },
     projects: [
       {
         name: 'chromium',