chore: add playwright fixtures package with initial configuration and …

packages/web-platform/playwright-fixtures/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@lynx-js/playwright-fixtures",
+  "version": "0.0.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "typings": "src/index.ts",
+  "dependencies": {
+    "nyc": "^17.1.0",
+    "v8-to-istanbul": "^9.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0"
+  },
+  "peerDependencies": {
+    "@playwright/test": "^1.57.0"
+  }
+}

packages/web-platform/web-tests/tests/coverage-fixture.ts → packages/web-platform/playwright-fixtures/src/coverage-fixture.ts

@@ -1,3 +1,7 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -32,9 +36,8 @@ export const test: typeof base = base.extend({
     await Promise.all(
       Array.from(pages.values()).flatMap(async (page, index) => {
         const coverage = await page.coverage.stopJSCoverage();
-
         const converter = v8ToIstanbul(
-          path.join(__dirname, '..', '..', 'www', 'main.js'),
+          path.join(path.dirname(testInfo.file), '..', 'www', 'main.js'),
         );
         await converter.load();
 

packages/web-platform/playwright-fixtures/src/index.ts

@@ -0,0 +1,3 @@
+export * from './coverage-fixture.js';
+export * from './utils.js';
+export * from './playwright.common.js';

packages/web-platform/playwright-fixtures/src/playwright.common.ts

@@ -0,0 +1,124 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { type defineConfig, devices } from '@playwright/test';
+import os from 'node:os';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(import.meta.url);
+const dir = path.join(__dirname, '..', '..', '.nyc_output');
+await fs.mkdir(dir, { recursive: true });
+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 port = process.env['PORT'] ?? 3080;
+const workerLimit = Math.floor(((cpuCount, envCPULimit) => {
+  if (isCI) {
+    if (envCPULimit) {
+      return envCPULimit / 2;
+    } else {
+      if (cpuCount <= 32) {
+        return 8;
+      } else {
+        return 8 + (cpuCount - 32) / 6;
+      }
+    }
+  }
+  return cpuCount / 2;
+})(os.cpus().length, parseFloat(process.env['cpu_limit'] ?? '0')));
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export const playwrightConfigCommon: Parameters<typeof defineConfig>[0] = {
+  /** global timeout https://playwright.dev/docs/test-timeouts#global-timeout */
+  globalTimeout: 20 * 60 * 1000,
+  // testMatch,
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  workers: isCI ? workerLimit : undefined,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!isCI,
+  /* Retry on CI only */
+  retries: isCI ? 4 : 0,
+  // maxFailures: 16,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  maxFailures: isCI ? 16 : undefined,
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://localhost:${port}/`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /** Configuration for the `expect` assertion library. */
+  expect: {
+    /** Configuration for the `pageAssertions.toHaveScreenshot` method. */
+    toHaveScreenshot: {
+      /** An acceptable ratio of pixels that are different to the total amount of pixels, between 0 and 1.*/
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'webkit',
+      use: {
+        ...devices['iPhone 12 Pro'],
+      },
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Pixel 5'],
+        // channel: 'chromium',
+        launchOptions: {
+          // ignoreDefaultArgs: ['--headless'],
+          args: [
+            // '--headless=new',
+            '--browser-ui-tests-verify-pixels',
+            '--browser-test',
+            '--font-render-hinting=none',
+            '--disable-skia-runtime-opts',
+            '--disable-font-subpixel-positioning',
+            '--disable-lcd-text',
+            '--disable-composited-antialiasing',
+            '--disable-system-font-check',
+            '--force-device-scale-factor=1',
+            '--touch-slop-distance=5',
+            '--disable-low-res-tiling',
+            '--disable-smooth-scrolling',
+            '--disable-gpu',
+          ],
+        },
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox HiDPI'],
+        deviceScaleFactor: 1,
+      },
+    },
+  ].filter((e) => e),
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run serve',
+    url: `http://localhost:${port}`,
+    reuseExistingServer: !isCI,
+  },
+};

packages/web-platform/web-tests/tests/utils.ts → packages/web-platform/playwright-fixtures/src/utils.ts

@@ -1,7 +1,3 @@
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
@@ -18,7 +14,7 @@ export const swipe = async (
     steps?: number;
   },
 ): Promise<void> => {
-  const { x, y, yDistance, xDistance, speed = 300, steps = 10 } = options;
+  const { x, y, yDistance, xDistance, steps = 10 } = options;
   const xStepDistance = xDistance / steps;
   const yStepDistance = yDistance / steps;
   await cdpSession.send('Input.dispatchTouchEvent', {

packages/web-platform/playwright-fixtures/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "lib": ["ESNext", "DOM"],
+    "emitDeclarationOnly": true,
+  },
+  "include": ["src"],
+}

packages/web-platform/tsconfig.json

@@ -12,6 +12,7 @@
   },
   "references": [
     /** packages-start */
+    { "path": "./playwright-fixtures/tsconfig.json" },
     { "path": "./offscreen-document/tsconfig.json" },
     { "path": "./web-elements-template/tsconfig.json" },
     { "path": "./web-elements-reactive/tsconfig.json" },

packages/web-platform/web-tests/package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@lynx-js/lynx-core": "0.1.3",
     "@lynx-js/offscreen-document": "workspace:*",
+    "@lynx-js/playwright-fixtures": "workspace:*",
     "@lynx-js/react": "workspace:*",
     "@lynx-js/react-rsbuild-plugin": "workspace:*",
     "@lynx-js/rspeedy": "workspace:*",

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

@@ -2,33 +2,8 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import { defineConfig, devices } from '@playwright/test';
-import os from 'node:os';
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = fileURLToPath(import.meta.url);
-const dir = path.join(__dirname, '..', '.nyc_output');
-fs.mkdir(dir, { recursive: true }).catch(() => {/* */});
-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 port = process.env.PORT ?? 3080;
-const workerLimit = Math.floor(((cpuCount, envCPULimit) => {
-  if (isCI) {
-    if (envCPULimit) {
-      return envCPULimit / 2;
-    } else {
-      if (cpuCount <= 32) {
-        return 8;
-      } else {
-        return 8 + (cpuCount - 32) / 6;
-      }
-    }
-  }
-  return cpuCount / 2;
-})(os.cpus().length, parseFloat(process.env['cpu_limit'] ?? '0')));
+import { defineConfig } from '@playwright/test';
+import { playwrightConfigCommon } from '@lynx-js/playwright-fixtures';
 
 const testIgnore: string[] = (() => {
   const ignore = ['**vitest**'];
@@ -45,87 +20,6 @@ const testIgnore: string[] = (() => {
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  /** global timeout https://playwright.dev/docs/test-timeouts#global-timeout */
-  globalTimeout: 20 * 60 * 1000,
-  testDir: './tests',
-  // testMatch,
+  ...playwrightConfigCommon,
   testIgnore,
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  workers: isCI ? workerLimit : undefined,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!isCI,
-  /* Retry on CI only */
-  retries: isCI ? 4 : 0,
-  // maxFailures: 16,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  maxFailures: isCI ? 16 : undefined,
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: `http://localhost:${port}/`,
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /** Configuration for the `expect` assertion library. */
-  expect: {
-    /** Configuration for the `pageAssertions.toHaveScreenshot` method. */
-    toHaveScreenshot: {
-      /** An acceptable ratio of pixels that are different to the total amount of pixels, between 0 and 1.*/
-      maxDiffPixelRatio: 0.01,
-    },
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'webkit',
-      use: {
-        ...devices['iPhone 12 Pro'],
-      },
-    },
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Pixel 5'],
-        // channel: 'chromium',
-        launchOptions: {
-          // ignoreDefaultArgs: ['--headless'],
-          args: [
-            // '--headless=new',
-            '--browser-ui-tests-verify-pixels',
-            '--browser-test',
-            '--font-render-hinting=none',
-            '--disable-skia-runtime-opts',
-            '--disable-font-subpixel-positioning',
-            '--disable-lcd-text',
-            '--disable-composited-antialiasing',
-            '--disable-system-font-check',
-            '--force-device-scale-factor=1',
-            '--touch-slop-distance=5',
-            '--disable-low-res-tiling',
-            '--disable-smooth-scrolling',
-            '--disable-gpu',
-          ],
-        },
-      },
-    },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox HiDPI'],
-        deviceScaleFactor: 1,
-      },
-    },
-  ].filter((e) => e),
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npm run serve',
-    url: `http://localhost:${port}`,
-    reuseExistingServer: !isCI,
-  },
 });

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

@@ -1,4 +1,4 @@
-import { test, expect } from './coverage-fixture.js';
+import { test, expect } from '@lynx-js/playwright-fixtures';
 import type { Page } from '@playwright/test';
 const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
 const isSSR = !!process.env['ENABLE_SSR'];

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

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 // @ts-nocheck
 import { componentIdAttribute, cssIdAttribute } from '@lynx-js/web-constants';
-import { test, expect } from './coverage-fixture.js';
+import { test, expect } from '@lynx-js/playwright-fixtures';
 import type { Page } from '@playwright/test';
 
 const ENABLE_MULTI_THREAD = !!process.env.ENABLE_MULTI_THREAD;

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

@@ -1,10 +1,8 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { swipe, dragAndHold } from './utils.js';
-import { test, expect } from './coverage-fixture.js';
+import { test, expect } from '@lynx-js/playwright-fixtures';
 import type { Page } from '@playwright/test';
-import type { LynxView } from '../../web-core/src/index.js';
 const ENABLE_MULTI_THREAD = !!process.env['ENABLE_MULTI_THREAD'];
 const isSSR = !!process.env['ENABLE_SSR'];
 
@@ -14,27 +12,6 @@ const wait = async (ms: number) => {
   });
 };
 
-const diffScreenShot = async (
-  page: Page,
-  caseName: string,
-  subcaseName: string,
-  label: string = 'index',
-  screenshotOptions?: Parameters<
-    ReturnType<typeof expect<Page>>['toHaveScreenshot']
-  >[0],
-) => {
-  await expect(page).toHaveScreenshot([
-    `${caseName}`,
-    `${subcaseName}`,
-    `${label}.png`,
-  ], {
-    maxDiffPixelRatio: 0,
-    fullPage: true,
-    animations: 'allow',
-    ...screenshotOptions,
-  });
-};
-
 const goto = async (
   page: Page,
   testname: string,