ci: split playwright tests, preempt more CPUs

.github/workflows/test.yml

@@ -82,31 +82,31 @@ jobs:
     uses: ./.github/workflows/workflow-test.yml
     secrets:
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-    name: Playwright (${{ matrix.config.name }})
+    name: Playwright (${{ matrix.thread }}-${{ matrix.render }}) ${{ matrix.shard }}/4
     strategy:
       fail-fast: false
       matrix:
-        config:
-          - name: Default
-            env: []
-          - name: MULTI_THREAD
-            env:
-              - ENABLE_MULTI_THREAD=true
-          - name: FP only
-            env:
-              - ENABLE_SSR=true
-              - TEST_FP_ONLY=true
-          - name: SSR-ALL-ON-UI
-            env:
-              - ENABLE_SSR=true
+        thread: [ALL_ON_UI, MULTI_THREAD]
+        render: [CSR, SSR]
+        shard: [1, 2, 3]
+        exclude:
+          - thread: MULTI_THREAD
+            render: SSR
     with:
       runs-on: lynx-custom-container
       is-web: true
+      web-report-name: "playwright-${{ matrix.thread }}-${{ matrix.render }}-shard${{ matrix.shard }}"
       codecov-flags: "e2e"
       run: |
-        export NODE_OPTIONS="--max-old-space-size=32768" ${{ join(matrix.config.env, ' ') }}
+        if [ "${{ matrix.thread }}" = "MULTI_THREAD" ]; then
+          export ENABLE_MULTI_THREAD=true
+        fi
+        if [ "${{ matrix.render }}" = "SSR" ]; then
+          export ENABLE_SSR=true
+        fi
+        export NODE_OPTIONS="--max-old-space-size=32768"
         export PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-report.junit.xml
-        pnpm --filter @lynx-js/web-tests run test --reporter='github,dot,junit,html'
+        pnpm --filter @lynx-js/web-tests run test --reporter='github,dot,junit,html' --shard=${{ matrix.shard }}/3
         pnpm --filter @lynx-js/web-tests run coverage:ci
   test-api:
     needs: build

.github/workflows/workflow-test.yml

@@ -17,6 +17,10 @@ on:
         required: false
         type: boolean
         default: false
+      web-report-name:
+        required: false
+        type: string
+        default: "playwright-report"
       codecov-flags:
         required: false
         type: string
@@ -88,7 +92,7 @@ jobs:
         if: ${{ inputs.is-web && failure() }}
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
-          name: playwright-report
+          name: ${{ inputs.web-report-name }}
           path: packages/web-platform/web-tests/playwright-report
           if-no-files-found: error
           retention-days: 1

packages/web-platform/web-tests/playwright.config.ts

@@ -8,40 +8,24 @@ import os from 'node:os';
 process.env['LIBGL_ALWAYS_SOFTWARE'] = 'true'; // https://github.com/microsoft/playwright/issues/32151
 process.env['GALLIUM_HUD_SCALE'] = '1';
 const isCI = !!process.env.CI;
-const enableMultiThread = !!process.env.ENABLE_MULTI_THREAD;
-const enableSSR = !!process.env.ENABLE_SSR;
-const testFPOnly = !!process.env.TEST_FP_ONLY;
 const port = process.env.PORT ?? 3080;
 const workerLimit = Math.floor(((cpuCount, envCPULimit) => {
-  if (envCPULimit) {
-    return envCPULimit / 2;
-  } else {
-    if (cpuCount <= 32) {
-      return cpuCount / 2;
+  if (isCI) {
+    if (envCPULimit) {
+      return envCPULimit / 2;
     } else {
-      return 16 + (cpuCount - 32) / 6;
+      if (cpuCount <= 32) {
+        return 8;
+      } else {
+        return 8 + (cpuCount - 32) / 6;
+      }
     }
   }
+  return cpuCount / 2;
 })(os.cpus().length, parseFloat(process.env['cpu_limit'] ?? '0')));
 
-const testMatch: string | undefined = (() => {
-  if (testFPOnly) {
-    return '**/fp-only.spec.ts';
-  }
-  if (enableSSR) {
-    return '**/react.{test,spec}.ts';
-  }
-  if (enableMultiThread) {
-    return '**/{react,web-core,main-thread-apis}.{test,spec}.ts';
-  }
-  return undefined;
-})();
-
 const testIgnore: string[] = (() => {
   const ignore = ['**vitest**'];
-  if (isCI && !testFPOnly) {
-    ignore.push('**/fp-only.spec.ts'); // fp-only tests has its own test steps
-  }
   return ignore;
 })();
 
@@ -58,7 +42,7 @@ export default defineConfig({
   /** global timeout https://playwright.dev/docs/test-timeouts#global-timeout */
   globalTimeout: 20 * 60 * 1000,
   testDir: './tests',
-  testMatch,
+  // testMatch,
   testIgnore,
   /* Run tests in files in parallel */
   fullyParallel: true,

packages/web-platform/web-tests/rspack.config.js

@@ -205,7 +205,7 @@ const config = {
     },
     watchFiles: isCI
       ? []
-      : ['./node_modules/@lynx-js/**/*'],
+      : ['./node_modules/@lynx-js/**/*.js'],
     static: [
       {
         directory: path.join(__dirname, 'resources'),
@@ -236,6 +236,9 @@ const config = {
     hot: false,
   },
   watch: false,
+  watchOptions: {
+    ignored: isCI ? /.*/ : undefined,
+  },
   module: {
     rules: [
       {

packages/web-platform/web-tests/tests/coverage-fixture.ts

@@ -10,6 +10,8 @@ const __dirname = fileURLToPath(import.meta.url);
 
 export const test: typeof base = base.extend({
   context: async ({ browserName, context }, use, testInfo) => {
+    const dir = path.join(__dirname, '..', '..', '..', '.nyc_output');
+    await fs.mkdir(dir, { recursive: true });
     if (browserName !== 'chromium') {
       // Coverage is not supported on non-chromium browsers
       return use(context);
@@ -27,9 +29,6 @@ export const test: typeof base = base.extend({
 
     await use(context);
 
-    const dir = path.join(__dirname, '..', '..', '..', '.nyc_output');
-    await fs.mkdir(dir, { recursive: true });
-
     await Promise.all(
       Array.from(pages.values()).flatMap(async (page, index) => {
         const coverage = await page.coverage.stopJSCoverage();

packages/web-platform/web-tests/tests/fp-only.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from './coverage-fixture.js';
 import type { Page } from '@playwright/test';
-
+const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
+const isSSR = !!process.env['ENABLE_SSR'];
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -44,6 +45,7 @@ const goto = async (
 };
 
 test.describe('SSR no Javascript tests', () => {
+  test.skip(isSSR || ENABLE_MULTI_THREAD, 'no difference for different mode');
   test.beforeEach(({ browserName }) => {
     test.skip(browserName === 'firefox', 'firefox does not support @container');
   });

packages/web-platform/web-tests/tests/main-thread-apis.test.ts

@@ -7,6 +7,7 @@ import { test, expect } from './coverage-fixture.js';
 import type { Page } from '@playwright/test';
 
 const ENABLE_MULTI_THREAD = !!process.env.ENABLE_MULTI_THREAD;
+const isSSR = !!process.env['ENABLE_SSR'];
 
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
@@ -15,6 +16,7 @@ const wait = async (ms: number) => {
 };
 
 test.describe('main thread api tests', () => {
+  test.skip(isSSR, 'mts api tests not support ssr');
   test.beforeEach(async ({ page }) => {
     await page.goto(`/main-thread-test.html`, {
       waitUntil: 'domcontentloaded',

packages/web-platform/web-tests/tests/performance.test.ts

@@ -6,6 +6,8 @@ import type { Page, BrowserContext, CDPSession } from '@playwright/test';
 
 import { test, expect } from './coverage-fixture.js';
 
+const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
+const isSSR = !!process.env['ENABLE_SSR'];
 const isCI = !!process.env['CI'];
 
 const wait = async (ms: number) => {
@@ -63,6 +65,7 @@ const getMetrics = async (cdpSession: CDPSession, page: Page) => {
 };
 
 test.describe('performance', () => {
+  test.skip(isSSR || ENABLE_MULTI_THREAD, 'no difference for different mode');
   test.describe.configure({ mode: 'serial', retries: 5 });
   test('simple-one-div', async ({ page, browserName, context }, { title }) => {
     /**

packages/web-platform/web-tests/tests/rpc.spec.ts

@@ -5,8 +5,11 @@ function waitImpl(ms: number): Promise<void> {
   setTimeout(() => resolve(), ms);
   return promise;
 }
+const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
+const isSSR = !!process.env['ENABLE_SSR'];
 
 test.describe('rpc tests', () => {
+  test.skip(isSSR || ENABLE_MULTI_THREAD, 'no difference for different mode');
   test.beforeEach(async ({ page }) => {
     await page.goto('/rpc-test.html');
     await waitImpl(100);

packages/web-platform/web-tests/tests/web-core.test.ts

@@ -6,6 +6,8 @@ import { test, expect } from './coverage-fixture.js';
 import type { Page, Worker } from '@playwright/test';
 
 const ENABLE_MULTI_THREAD = !!process.env.ENABLE_MULTI_THREAD;
+const isSSR = !!process.env['ENABLE_SSR'];
+
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -61,6 +63,7 @@ async function getBackgroundThreadWorker(
 }
 
 test.describe('web core tests', () => {
+  test.skip(isSSR, 'not support ssr');
   test('selectComponent', async ({ page, browserName }) => {
     // firefox not support
     test.skip(browserName === 'firefox');

packages/web-platform/web-tests/tests/web-elements.spec.ts

@@ -5,7 +5,8 @@ import { swipe, dragAndHold } from './utils.js';
 import { test, expect } from './coverage-fixture.js';
 import type { Page } from '@playwright/test';
 import path from 'node:path';
-
+const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
+const isSSR = !!process.env['ENABLE_SSR'];
 const wait = async (ms: number) => {
   await new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -40,6 +41,7 @@ const getTitle = (titlePath: string[]) => {
 };
 
 test.describe('web-elements test suite', () => {
+  test.skip(isSSR || ENABLE_MULTI_THREAD, 'no difference for different mode');
   test.describe('layout', () => {
     test('layout/percentage-cyclic', async ({ page }, { title }) => {
       await gotoWebComponentPage(page, title);