ci: improve e2e tests

Author: shijistar

.github/workflows/reusable-test.yml

@@ -40,6 +40,29 @@ jobs:
         if: steps.node_modules_cache.outputs.cache-hit != 'true'
         run: npm ci
 
+      - name: Check if artifact exists
+        id: check_node_modules_artifact
+        run: |
+          ARTIFACT_NAME="modern-node-modules-${{ hashFiles('**/package-lock.json') }}"
+          ARTIFACT_EXISTS=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            "https://api.github.com/repos/${{ github.repository }}/actions/artifacts" | \
+            jq --arg name "$ARTIFACT_NAME" '.artifacts[] | select(.name == $name) | .id' | wc -l)
+
+          echo "artifact_exists=$ARTIFACT_EXISTS" >> $GITHUB_ENV
+
+          if [ "$ARTIFACT_EXISTS" -gt "0" ]; then
+            echo "artifact_exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "artifact_exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Upload node_modules to artifacts
+        if: steps.check_node_modules_artifact.outputs.artifact_exists == 'false'
+        uses: actions/upload-artifact@v4
+        with:
+          name: modern-node-modules-${{ hashFiles('**/package-lock.json') }}
+          path: node_modules
+
   # This job is used to run tests on modern Node.js versions
   # 1. Use default Node.js
   # 2. Install latest dependencies
@@ -77,6 +100,17 @@ jobs:
             umd
           key: ${{ runner.os }}-modern-build-output-${{ github.sha }}
 
+      - name: Upload build output to artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ runner.os }}-modern-build-output-${{ github.sha }}
+          path: |
+            tslib
+            lib
+            es
+            es-legacy
+            umd
+
   build-legacy-node:
     if: ${{ inputs.use-matrix == true }}
     runs-on: ubuntu-latest
@@ -203,11 +237,15 @@ jobs:
   run-e2e-tests:
     if: ${{ inputs.use-matrix == true }}
     runs-on: ubuntu-latest
+    # needs: build-modern-node
     # Use Playwright container for E2E tests, which has all dependencies and all browsers installed
-    container: mcr.microsoft.com/playwright:v1.52.0-jammy
-    env:
-      # fix Firefox permission issue (Firefox is unable to launch if the $HOME folder isn't owned by the current user)
-      HOME: /root
+    # container: mcr.microsoft.com/playwright:v1.52.0-jammy
+    # env:
+    #   # fix Firefox permission issue (Firefox is unable to launch if the $HOME folder isn't owned by the current user)
+    #   HOME: /root
+    # strategy:
+    #   matrix:
+    #     browser: [chrome, firefox, webkit, edge]
     steps:
       - uses: actions/checkout@v4
 
@@ -216,16 +254,36 @@ jobs:
         with:
           node-version: ${{ vars.DEFAULT_NODE_VERSION }}
           cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
+
+      - name: Install Playwright dependencies
+        run: npx playwright install-deps webkit
+
+      # - name: Restore modern node_modules cache
+      #   uses: actions/cache@v4
+      #   with:
+      #     path: |
+      #       node_modules
+      #     key: ${{ runner.os }}-modern-node-modules-${{ hashFiles('**/package-lock.json') }}
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Install playwright browsers
+        run: npx playwright install
+
+      # - name: Download build output from artifacts
+      #   id: download_build_output
+      #   uses: actions/download-artifact@v4
+      #   continue-on-error: true
+      #   with:
+      #     name: ${{ runner.os }}-modern-build-output-${{ github.sha }}
+
       - name: Build package
+        # if: steps.download_build_output.outcome != 'success'
         run: npm run build
 
       - name: Run e2e tests
-        run: npm run e2e
+        run: npm run task:run-e2e
 
   # Run tests on single specified Node.js version
   run-jest-single:

.github/workflows/test-on-commit.yml

@@ -18,4 +18,4 @@ jobs:
   test:
     uses: ./.github/workflows/reusable-test.yml
     with:
-      use-matrix: false
+      use-matrix: true

e2e/fixtures/EnumPage.ts

@@ -4,12 +4,13 @@ export default class EnumPage {
   constructor(public readonly page: Page) {}
 
   async gotoModern() {
-    await this.page.goto('/modern.html');
+    await this.page.goto('/modern.html', { waitUntil: 'domcontentloaded' });
   }
   async gotoLegacy() {
-    await this.page.goto('/legacy.html');
+    await this.page.goto('/legacy.html', { waitUntil: 'domcontentloaded' });
   }
   async setupLang() {
+    await this.page.waitForLoadState('domcontentloaded');
     await this.page.evaluate(() => {
       const {
         EnumPlus: { Enum, defaultLocalize },
@@ -20,6 +21,7 @@ export default class EnumPage {
     });
   }
   async resetLang() {
+    await this.page.waitForLoadState('domcontentloaded');
     await this.page.evaluate(() => {
       const {
         EnumPlus: { Enum },

e2e/fixtures/EnumTest.ts

@@ -9,7 +9,8 @@ export const test = base.extend<{
   enumPage: async ({ page }, use) => {
     const enumPage = new EnumPage(page);
     await enumPage.gotoModern();
-
+    // delay to ensure the page is fully loaded
+    await page.waitForLoadState('domcontentloaded');
     await use(enumPage);
   },
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enum-plus",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.1",
   "description": "A drop-in replacement for native enum. Like native enum but much better!",
   "keywords": [
     "enum",
@@ -107,6 +107,11 @@
     "task:run-e2e": "playwright test",
     "task:run-e2e-debug": "playwright test --debug",
     "task:run-e2e-ui": "playwright test --ui",
+    "task:run-e2e:chrome": "playwright test --project=chrome",
+    "task:run-e2e:chromium-legacy": "playwright test --project=chromium-legacy",
+    "task:run-e2e:edge": "playwright test --project=edge",
+    "task:run-e2e:firefox": "playwright test --project=firefox",
+    "task:run-e2e:webkit": "playwright test --project=webkit",
     "test": "npm run task:jest",
     "test-lib": "run-s ts2lib task:jest:lib",
     "ts2lib": "tsc -p tsconfig.lib.json"

playwright.config.ts

@@ -1,50 +1,58 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
-// todo: 支持legacy浏览器的测试
+const port = 7080;
+
 const config: PlaywrightTestConfig = {
   testDir: './e2e/specs',
   testMatch: '**/*.spec.ts',
   outputDir: './e2e/test-results',
   globalSetup: require.resolve('./e2e/global.setup.ts'),
   globalTeardown: require.resolve('./e2e/global.teardown.ts'),
-  workers: 16,
   forbidOnly: !!process.env.CI,
   retries: 2,
   use: {
-    baseURL: 'http://localhost:7080',
+    baseURL: `http://localhost:${port}`,
     headless: true,
   },
   projects: [
     // Modern browsers
     {
-      name: 'chromium',
+      name: 'chrome',
       use: devices['Desktop Chrome'],
+      workers: 1,
     },
     {
       name: 'firefox',
       use: devices['Desktop Firefox'],
+      workers: 1,
     },
     {
       name: 'webkit',
       use: devices['Desktop Safari'],
+      workers: 1,
     },
-    // Legacy browsers (simulated)
     {
-      name: 'chromium-legacy',
-      use: {
-        browserName: 'chromium',
-        // Use specific flags to simulate legacy browser behavior
-        launchOptions: {
-          args: ['--js-flags=--noturbo'],
-        },
-      },
+      name: 'edge',
+      use: devices['Desktop Edge'],
+      workers: 1,
     },
+    // Legacy browsers (simulated)
+    // {
+    //   name: 'chromium-legacy',
+    //   use: {
+    //     browserName: 'chromium',
+    //     // Use specific flags to simulate legacy browser behavior
+    //     launchOptions: {
+    //       args: ['--js-flags=--noturbo'],
+    //     },
+    //   },
+    // },
   ],
   webServer: {
-    command: 'npx http-server ./e2e/fixtures -p 7080',
+    command: `npx http-server ./e2e/fixtures -p ${port}`,
     port: 7080,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: false,
   },
 };
 

test/engines/playwright.ts

@@ -30,7 +30,7 @@ export class PlaywrightEngine extends TestEngineBase {
           WeekData,
           SerializeJavascript,
         };
-        console.log('window', runtimeContext);
+        // console.log('window', runtimeContext);
         const { serializeJavascript: serialize, deserializeJavascript: deserialize } = SerializeJavascript;
         const args = deserialize(contextStr) as { evaluateFn: typeof evaluate };
         const { evaluateFn, ...rest } = args;