test: add Playwright E2E setup with CI workflow

.github/workflows/ui-tests.yml

@@ -0,0 +1,165 @@
+name: UI Tests
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ui-tests-ledger_lab-${{ github.event.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ui-tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    name: Playwright E2E Tests
+
+    services:
+      redis-cache:
+        image: redis:alpine
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      mariadb:
+        image: mariadb:11.8
+        env:
+          MYSQL_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v6
+
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          check-latest: true
+
+      - name: Add to Hosts
+        run: echo "127.0.0.1 ledger.test" | sudo tee -a /etc/hosts
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - name: Cache yarn
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package.json') }}
+
+      - name: Install MariaDB Client
+        run: |
+          sudo apt update
+          sudo apt-get install mariadb-client
+
+      - name: Setup Bench
+        run: |
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --python "$(which python)" ~/frappe-bench
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install App
+        working-directory: /home/runner/frappe-bench
+        run: |
+          # Ledger Lab is an ERPNext app — pull ERPNext first, then this app.
+          # Default branch (develop) matches the dev environment this app targets.
+          bench get-app erpnext
+          bench get-app ledger_lab $GITHUB_WORKSPACE
+          bench setup requirements --dev
+          bench new-site --db-root-password root --admin-password admin ledger.test
+          bench --site ledger.test install-app erpnext
+          bench --site ledger.test install-app ledger_lab
+          bench build
+        env:
+          CI: "Yes"
+
+      - name: Configure Site
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site ledger.test set-config allow_tests true
+          bench --site ledger.test set-config host_name "http://ledger.test:8000"
+          bench --site ledger.test set-config mute_emails 1
+
+      - name: Seed Test Data
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench --site ledger.test execute frappe.utils.password.update_password --args "['Administrator', 'admin']"
+          bench --site ledger.test execute ledger_lab.e2e_seed.setup_e2e_data
+
+      - name: Start Frappe Server
+        working-directory: /home/runner/frappe-bench
+        run: |
+          sed -i 's/^watch:/# watch:/g' Procfile
+          sed -i 's/^schedule:/# schedule:/g' Procfile
+          bench start &> bench_start.log &
+          echo "Waiting for Frappe server to start..."
+          timeout 60 bash -c 'until curl -s http://ledger.test:8000 > /dev/null; do sleep 2; done'
+          echo "Frappe server is ready!"
+
+      - name: Install Playwright
+        run: |
+          cd $GITHUB_WORKSPACE
+          npm install
+          npx playwright install --with-deps chromium
+
+      - name: Run Playwright Tests
+        working-directory: ${{ github.workspace }}
+        run: npx playwright test
+        env:
+          BASE_URL: http://ledger.test:8000
+          SITE_HOST: ledger.test:8000
+          FRAPPE_USER: Administrator
+          FRAPPE_PASSWORD: admin
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: Upload Test Results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7
+
+      - name: Show Bench Logs on Failure
+        if: failure()
+        working-directory: /home/runner/frappe-bench
+        run: |
+          echo "=== Bench Start Log ==="
+          cat bench_start.log || true
+          echo ""
+          echo "=== Frappe Logs ==="
+          cat logs/*.log || true

.gitignore

@@ -36,6 +36,12 @@ venv.bak/
 node_modules/
 jspm_packages/
 
+# Playwright E2E
+/test-results/
+/playwright-report/
+/playwright/.cache/
+e2e/.auth/
+
 # IDEs and editors
 .vscode/
 .vs/

e2e/helpers/auth.ts

@@ -0,0 +1,63 @@
+import { APIRequestContext, Page } from "@playwright/test";
+
+/**
+ * Login via Frappe API (faster than UI login).
+ * Sets cookies on the request context for subsequent API calls.
+ */
+export async function loginViaAPI(
+	request: APIRequestContext,
+	email = "Administrator",
+	password = "admin",
+): Promise<void> {
+	const response = await request.post("/api/method/login", {
+		form: {
+			usr: email,
+			pwd: password,
+		},
+	});
+
+	if (!response.ok()) {
+		throw new Error(`Login failed: ${response.status()} ${await response.text()}`);
+	}
+}
+
+/**
+ * Login via UI (for testing the login flow itself).
+ */
+export async function loginViaUI(
+	page: Page,
+	email = "Administrator",
+	password = "admin",
+): Promise<void> {
+	await page.goto("/login");
+	await page.waitForLoadState("networkidle");
+
+	await page.fill('input[data-fieldname="email"]', email);
+	await page.fill('input[data-fieldname="password"]', password);
+	await page.click('button[type="submit"]');
+
+	await page.waitForURL(/\/(app|desk)/, { timeout: 30000 });
+}
+
+/**
+ * Logout the current user.
+ */
+export async function logout(page: Page): Promise<void> {
+	await page.goto("/api/method/logout");
+	await page.waitForLoadState("networkidle");
+}
+
+/**
+ * Check if user is logged in by verifying session.
+ */
+export async function isLoggedIn(request: APIRequestContext): Promise<boolean> {
+	try {
+		const response = await request.get("/api/method/frappe.auth.get_logged_user");
+		if (!response.ok()) return false;
+
+		const data = await response.json();
+		return data.message && data.message !== "Guest";
+	} catch {
+		return false;
+	}
+}