test: Init playwright test setup

.github/workflows/ui-tests.yml

@@ -3,14 +3,12 @@ name: UI Test
 on:
   pull_request:
   push:
-    branches: master
+    branches: [master]
 
 jobs:
   test:
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-    name: UI Tests (Cypress)
+    name: UI Tests (Playwright)
 
     services:
       redis-cache:
@@ -70,11 +68,9 @@ jobs:
           key: ${{ runner.os }}-yarn-ui-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-ui-
-      - name: Cache cypress binary
-        uses: actions/cache@v3
-        with:
-          path: ~/.cache/Cypress
-          key: ${{ runner.os }}-cypress
+      - name: Install Playwright browsers
+        working-directory: frontend
+        run: npx playwright install --with-deps chromium
 
       - name: Setup
         run: |
@@ -109,6 +105,16 @@ jobs:
 
       - name: UI Tests
         run: cd ~/frappe-bench/apps/builder/frontend && yarn test
+        env:
+          CI: 'true'
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: playwright-report
+          path: frontend/playwright-report
+          retention-days: 7
 
       - name: Stop server
         run: |

.gitignore

@@ -9,3 +9,5 @@ builder/public/page_scripts
 builder/public/page_styles
 builder/www/_builder.html
 builder/public/dist
+frontend/test-results
+frontend/playwright-report

frontend/e2e/fixtures.ts

@@ -0,0 +1,13 @@
+import { test as base } from "@playwright/test";
+
+export const test = base.extend({
+	// Auto-login before each test
+	page: async ({ page, baseURL }, use) => {
+		await page.request.post(`${baseURL}/api/method/login`, {
+			form: { usr: "Administrator", pwd: "admin" },
+		});
+		await use(page);
+	},
+});
+
+export { expect } from "@playwright/test";

frontend/e2e/landing.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "./fixtures";
+
+test.describe("Builder Dashboard", () => {
+	test("Open builder page", async ({ page, baseURL }) => {
+		await page.goto(`${baseURL}/builder/home`);
+		await expect(page).toHaveURL(/builder/);
+	});
+});

frontend/package.json

@@ -8,8 +8,8 @@
     "build": "vite build --base=/assets/builder/frontend/ && yarn copy-html-entry",
     "copy-html-entry": "cp ../builder/public/frontend/index.html ../builder/www/_builder.html",
     "preview": "vite preview",
-    "test-local": "cypress open --e2e --browser chrome",
-    "test": "npx cypress run --record --key fa50a4df-569e-41bc-8600-850331fd1630"
+    "test": "playwright test",
+    "test:headed": "playwright test --headed"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.6",
@@ -52,9 +52,10 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@types/node": "^25.3.3",
     "@types/opentype.js": "^1.3.8",
-    "cypress": "^13.3.2",
     "eslint": "^8.38.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.11.0",

frontend/playwright.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./e2e",
+	timeout: 30_000,
+	retries: process.env.CI ? 2 : 0,
+	use: {
+		baseURL: "http://builder.test:8000",
+		headless: !!process.env.CI,
+		screenshot: "only-on-failure",
+		trace: "on-first-retry",
+	},
+});

frontend/tsconfig.json

@@ -35,7 +35,9 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "e2e/**/*.ts",
+    "playwright.config.ts"
   ],
   "exclude": [
     "node_modules",