feat: support for basic usability testing using playwright (#11)

* feat: support for basic usability testing using playwright

* feat: remove unused code

.github/workflows/daily-build.yaml

@@ -26,5 +26,37 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build
-        run: pnpm run build
+      - name: Build and Test esbuild
+        run: |
+          cd packages/esbuild
+          pnpm run build
+          pnpm serve
+          pnpm test
+
+      - name: Build and Test next
+        run: |
+          cd packages/next
+          pnpm run build
+          pnpm start
+          pnpm test
+
+      - name: Build and Test nuxt
+        run: |
+          cd packages/nuxt
+          pnpm run build
+          pnpm preview
+          pnpm test
+
+      - name: Build and Test rspack
+        run: |
+          cd packages/rspack
+          pnpm run build
+          pnpm serve
+          pnpm test
+
+      - name: Build and Test webpack
+        run: |
+          cd packages/webpack
+          pnpm run build
+          pnpm serve
+          pnpm test

package.json

@@ -5,17 +5,17 @@
   "license": " MPL-2.0 license",
   "private": true,
   "packageManager": "[email protected]",
-  "scripts": {
-    "build": "pnpm build:esbuild && pnpm build:next && pnpm build:nuxt && pnpm build:rspack && pnpm build:webpack",
-    "build:esbuild": "pnpm --filter esbuild build",
-    "build:next": "pnpm --filter next build",
-    "build:nuxt": "pnpm --filter nuxt build",
-    "build:rspack": "pnpm --filter rspack build",
-    "build:webpack": "pnpm --filter webpack build"
-  },
+  "scripts": {},
   "dependencies": {
     "@blocksuite/blocks": "nightly",
+    "@blocksuite/editor": "nightly",
+    "@blocksuite/global": "^0.9.0",
     "@blocksuite/store": "nightly",
-    "@blocksuite/editor": "nightly"
+    "@blocksuite/virgo": "^0.9.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@types/node": "^20.8.10",
+    "serve": "^14.2.1"
   }
 }

packages/esbuild/package.json

@@ -4,7 +4,9 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "build": "node esbuild.js"
+    "build": "node esbuild.js",
+    "serve": "serve -s ./dist -l 3000",
+    "test": "playwright test"
   },
   "devDependencies": {
     "@chialab/esbuild-plugin-html": "^0.17.3",

packages/esbuild/playwright.config.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import type { PlaywrightWorkerOptions } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  use: {
+    browserName:
+      (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??
+      'chromium',
+    viewport: { width: 960, height: 900 },
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    // You can open traces locally(`npx playwright show-trace trace.zip`)
+    // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
+    trace: 'on-first-retry',
+    // Record video only when retrying a test for the first time.
+    video: 'on-first-retry',
+    // Timeout for each action
+    actionTimeout: 5_000,
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+  workers: '80%',
+  retries: process.env.CI ? 3 : 0,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+});

packages/esbuild/tests/basic.spec.ts

@@ -0,0 +1,27 @@
+import { test } from '@playwright/test';
+
+import { focusRichText } from '../../../tests/utils/misc';
+import {
+  redoByKeyboard,
+  type,
+  undoByKeyboard,
+} from '../../../tests/utils/keyboard';
+import { assertText, assertEmpty } from '../../../tests/utils/asserts';
+
+const PORT = 3000;
+const TEST_URL = `http://localhost:${PORT}`;
+
+test.describe('webpack build test', () => {
+  test('basic input & undo/redo', async ({ page }) => {
+    await page.goto(TEST_URL);
+
+    await focusRichText(page);
+    await type(page, 'hello');
+
+    await assertText(page, 'hello');
+    await undoByKeyboard(page);
+    await assertEmpty(page);
+    await redoByKeyboard(page);
+    await assertText(page, 'hello');
+  });
+});

packages/next/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start -p 3001",
+    "test": "playwright test"
   },
   "dependencies": {
     "@reactuses/core": "^4.0.7",

packages/next/playwright.config.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import type { PlaywrightWorkerOptions } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  use: {
+    browserName:
+      (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??
+      'chromium',
+    viewport: { width: 960, height: 900 },
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    // You can open traces locally(`npx playwright show-trace trace.zip`)
+    // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
+    trace: 'on-first-retry',
+    // Record video only when retrying a test for the first time.
+    video: 'on-first-retry',
+    // Timeout for each action
+    actionTimeout: 5_000,
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+  workers: '80%',
+  retries: process.env.CI ? 3 : 0,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+});

packages/next/tests/basic.spec.ts

@@ -0,0 +1,27 @@
+import { test } from '@playwright/test';
+
+import { focusRichText } from '../../../tests/utils/misc';
+import {
+  redoByKeyboard,
+  type,
+  undoByKeyboard,
+} from '../../../tests/utils/keyboard';
+import { assertText, assertEmpty } from '../../../tests/utils/asserts';
+
+const PORT = 3002;
+const TEST_URL = `http://localhost:${PORT}`;
+
+test.describe('webpack build test', () => {
+  test('basic input & undo/redo', async ({ page }) => {
+    await page.goto(TEST_URL);
+
+    await focusRichText(page);
+    await type(page, 'hello');
+
+    await assertText(page, 'hello');
+    await undoByKeyboard(page);
+    await assertEmpty(page);
+    await redoByKeyboard(page);
+    await assertText(page, 'hello');
+  });
+});

packages/nuxt/package.json

@@ -6,11 +6,12 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "cross-env PORT=3002 node .output/server/index.mjs",
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "cross-env": "^7.0.3",
     "nuxt": "latest",
     "typescript": "latest"
   }

packages/nuxt/playwright.config.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import type { PlaywrightWorkerOptions } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  use: {
+    browserName:
+      (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??
+      'chromium',
+    viewport: { width: 960, height: 900 },
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    // You can open traces locally(`npx playwright show-trace trace.zip`)
+    // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
+    trace: 'on-first-retry',
+    // Record video only when retrying a test for the first time.
+    video: 'on-first-retry',
+    // Timeout for each action
+    actionTimeout: 5_000,
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+  workers: '80%',
+  retries: process.env.CI ? 3 : 0,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+});

packages/nuxt/tests/basic.spec.ts

@@ -0,0 +1,27 @@
+import { test } from '@playwright/test';
+
+import { focusRichText } from '../../../tests/utils/misc';
+import {
+  redoByKeyboard,
+  type,
+  undoByKeyboard,
+} from '../../../tests/utils/keyboard';
+import { assertText, assertEmpty } from '../../../tests/utils/asserts';
+
+const PORT = 3002;
+const TEST_URL = `http://localhost:${PORT}`;
+
+test.describe('webpack build test', () => {
+  test('basic input & undo/redo', async ({ page }) => {
+    await page.goto(TEST_URL);
+
+    await focusRichText(page);
+    await type(page, 'hello');
+
+    await assertText(page, 'hello');
+    await undoByKeyboard(page);
+    await assertEmpty(page);
+    await redoByKeyboard(page);
+    await assertText(page, 'hello');
+  });
+});

packages/rspack/package.json

@@ -4,7 +4,9 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "rspack serve",
-    "build": "rspack build"
+    "build": "rspack build",
+    "serve": "serve -s ./dist -l 3003",
+    "test": "playwright test"
   },
   "devDependencies": {
     "@rspack/cli": "latest",

packages/rspack/playwright.config.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import type { PlaywrightWorkerOptions } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  use: {
+    browserName:
+      (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??
+      'chromium',
+    viewport: { width: 960, height: 900 },
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    // You can open traces locally(`npx playwright show-trace trace.zip`)
+    // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
+    trace: 'on-first-retry',
+    // Record video only when retrying a test for the first time.
+    video: 'on-first-retry',
+    // Timeout for each action
+    actionTimeout: 5_000,
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+  workers: '80%',
+  retries: process.env.CI ? 3 : 0,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+});

packages/rspack/tests/basic.spec.ts

@@ -0,0 +1,27 @@
+import { test } from '@playwright/test';
+
+import { focusRichText } from '../../../tests/utils/misc';
+import {
+  redoByKeyboard,
+  type,
+  undoByKeyboard,
+} from '../../../tests/utils/keyboard';
+import { assertText, assertEmpty } from '../../../tests/utils/asserts';
+
+const PORT = 3003;
+const TEST_URL = `http://localhost:${PORT}`;
+
+test.describe('webpack build test', () => {
+  test('basic input & undo/redo', async ({ page }) => {
+    await page.goto(TEST_URL);
+
+    await focusRichText(page);
+    await type(page, 'hello');
+
+    await assertText(page, 'hello');
+    await undoByKeyboard(page);
+    await assertEmpty(page);
+    await redoByKeyboard(page);
+    await assertText(page, 'hello');
+  });
+});

packages/webpack/package.json

@@ -4,7 +4,9 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "webpack serve",
-    "build": "webpack build"
+    "build": "webpack build",
+    "serve": "serve -s ./dist -l 3004",
+    "test": "playwright test"
   },
   "devDependencies": {
     "css-loader": "^6.8.1",

packages/webpack/playwright.config.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import type { PlaywrightWorkerOptions } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'tests',
+  fullyParallel: true,
+  use: {
+    browserName:
+      (process.env.BROWSER as PlaywrightWorkerOptions['browserName']) ??
+      'chromium',
+    viewport: { width: 960, height: 900 },
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    // You can open traces locally(`npx playwright show-trace trace.zip`)
+    // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
+    trace: 'on-first-retry',
+    // Record video only when retrying a test for the first time.
+    video: 'on-first-retry',
+    // Timeout for each action
+    actionTimeout: 5_000,
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+  workers: '80%',
+  retries: process.env.CI ? 3 : 0,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+});