configuring e2e CI workflow

.github/workflows/playwright.yml

@@ -5,7 +5,10 @@ on:
   pull_request:
     branches: [ main, master ]
 jobs:
-  test:
+  e2e-test:
+    env:
+      CI: true
+      E2E_PORT: 4000
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -15,10 +18,10 @@ jobs:
         node-version: lts/*
     - name: Install dependencies
       run: npm ci
+    - name: Build demo for e2e
+      run: npm run build:demo
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
-    - name: Run demo server
-      run: npm run dev
     - name: Run Playwright tests
       run: npx playwright test
     - uses: actions/upload-artifact@v4

package.json

@@ -13,6 +13,7 @@
     "build:demo": "tsc && vite build",
     "build:lib": "tsc && vite build --config vite.config.lib.ts",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "start-test-server": "npm run preview -- --port 4000",
     "preview": "vite preview"
   },
   "peerDependencies": {

playwright.config.ts

@@ -9,6 +9,7 @@ import { defineConfig, devices } from '@playwright/test';
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
+
 export default defineConfig({
   testDir: './tests/e2e',
   /* Run tests in files in parallel */
@@ -69,9 +70,10 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: process.env.CI ? {
+    command: 'npm run start-test-server',
+    url: `http://localhost:${process.env.E2E_PORT}/lexical-anchorpoint/`,
+    reuseExistingServer: true,
+    timeout: 120 * 1000,
+  } : undefined,
 });

tests/e2e/example.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 import { prettifyHTML } from '../utils'
 
 test('typing plain text in the editor', async ({page}) => {
-  await page.goto('http://localhost:5172')
+  await page.goto('http://localhost:4000/lexical-anchorpoint/')
   const editor = page.locator('div[contenteditable=true]').first()
   await editor.focus()
   await page.keyboard.type('hello world')
@@ -19,7 +19,7 @@ test('typing plain text in the editor', async ({page}) => {
 })
 
 test('typing links into the editor', async ({page}) => {
-  await page.goto('http://localhost:5172')
+  await page.goto('http://localhost:4000/lexical-anchorpoint/')
   const editor = page.locator('div[contenteditable=true]').first()
   await editor.focus()
   await page.keyboard.type(