test: Start using playwright e2e tests

Author: distantnative

.github/workflows/e2e.yml

@@ -0,0 +1,108 @@
+# To upgrade pinned actions: Use https://github.com/mheap/pin-github-action
+
+name: CI - E2E
+
+env:
+  OS: &os ubuntu-24.04
+
+  # run job only under the following conditions:
+  # - can be triggered manually from any repository
+  # - can be triggered as workflow call by another workflow
+  # - if on pull request, only run if from a fork
+  #   (our own repo is covered by the push event)
+  # - if on push, only run CI automatically for the
+  #   main getkirby/kirby repo and for forks
+  SHOULD_RUN: &should-run >-
+    github.event_name == 'workflow_dispatch' ||
+    github.event_name == 'workflow_call' ||
+    (github.event_name == 'pull_request' &&
+    github.event.pull_request.head.repo.full_name != github.repository) ||
+    (github.event_name == 'push' &&
+    (github.repository == 'getkirby/kirby' || github.repository_owner != 'getkirby'))
+
+on:
+  push: &e2e-triggers
+    branches-ignore:
+      - "main"
+      - "release/**"
+    paths:
+      - "**"
+      - "!.github/**"
+      - ".github/actions/setup-npm/**"
+      - ".github/actions/setup-php/**"
+      - ".github/workflows/e2e.yml"
+      - "!.tx/**"
+      - "!.vscode/**"
+      - "!assets/**"
+      - "!scripts/**"
+  pull_request: *e2e-triggers
+  workflow_call:
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  tests:
+    name: "Tests"
+    if: *should-run
+    runs-on: *os
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout sandbox
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          repository: getkirby/sandbox
+          ref: feat/develop-license
+          path: sandbox
+
+      - name: Checkout kirby into sandbox
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+        with:
+          path: sandbox/kirby
+
+      - name: Setup PHP environment
+        uses: ./sandbox/kirby/.github/actions/setup-php
+        with:
+          php: "8.4"
+          extensions: "mbstring, ctype, curl, gd"
+
+      - name: Create sandbox config
+        run: |
+          cat > sandbox/sandbox.config.php << 'EOF'
+          <?php
+          return [
+              'url'   => 'http://localhost:8000',
+              'panel' => ['dev' => false]
+          ];
+          EOF
+
+      - name: Start PHP server
+        run: php -S localhost:8000 -t sandbox sandbox/router.php &
+
+      - name: Set up Node.js and cache npm dependencies
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: 22
+          cache: "npm"
+          cache-dependency-path: sandbox/kirby/panel/package-lock.json
+
+      - name: Install npm dependencies
+        working-directory: sandbox/kirby/panel
+        run: npm ci
+
+      - name: Install Playwright browsers
+        working-directory: sandbox/kirby/panel
+        run: npx playwright install --with-deps chromium
+
+      - name: Build Panel
+        working-directory: sandbox/kirby/panel
+        run: npm run build
+
+      - name: Run E2E tests
+        working-directory: sandbox/kirby/panel
+        run: npm run test:e2e
+        env:
+          BASE_URL: http://localhost:8000

.github/workflows/frontend.yml

@@ -82,3 +82,4 @@ jobs:
 
       - name: "Prettier: JavaScript coding style violations"
         run: npm run format -- --check
+

.github/workflows/release.yml

@@ -18,3 +18,7 @@ jobs:
     name: "Release: CI - Frontend"
     uses: ./.github/workflows/frontend.yml
     secrets: inherit
+  release_e2e:
+    name: "Release: CI - E2E"
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit

panel/.gitignore

@@ -15,6 +15,9 @@ yarn-error.log*
 
 # tests
 coverage
+e2e/session.json
+e2e/report
+e2e/results
 
 # Editor directories and files
 .idea

panel/e2e/setup.js

@@ -0,0 +1,6 @@
+import { test } from "@playwright/test";
+
+test("authenticate", async ({ page }) => {
+	await page.goto("/env/auth/admin");
+	await page.context().storageState({ path: "e2e/session.json" });
+});

panel/lab/components/bar/index.spec.js

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+
+test("bar component", async ({ page }) => {
+	page.on("console", (msg) => console.log("CONSOLE:", msg.type(), msg.text()));
+	page.on("pageerror", (err) => console.log("PAGE ERROR:", err.message));
+
+	await page.goto("/panel/lab/components/bar");
+	await page.waitForLoadState("networkidle");
+	console.log("Page content:", await page.content());
+
+	const examples = page.locator(".k-lab-examples");
+	await expect(examples).toBeVisible();
+
+	const bars = examples.locator(".k-bar");
+	await expect(bars).toHaveCount(4);
+
+	await expect(bars.nth(0)).toHaveAttribute("data-align", "start");
+	await expect(bars.nth(0).locator(":scope > *")).toHaveCount(3);
+
+	await expect(bars.nth(1)).toHaveAttribute("data-align", "start");
+	await expect(bars.nth(1).locator(":scope > *")).toHaveCount(1);
+
+	await expect(bars.nth(2)).toHaveAttribute("data-align", "center");
+	await expect(bars.nth(2).locator(":scope > *")).toHaveCount(2);
+
+	await expect(bars.nth(3)).toHaveAttribute("data-align", "end");
+	await expect(bars.nth(3).locator(":scope > *")).toHaveCount(1);
+});

panel/package-lock.json

@@ -1,14 +1,16 @@
 {
 	"name": "kirby",
 	"private": true,
+	"type": "module",
 	"scripts": {
 		"build": "vite build",
 		"build:docs": "node scripts/docs.mjs",
 		"dev": "vite --host",
 		"lint": "eslint \"src/**/*.{js,vue}\"",
 		"lint:fix": "npm run lint -- --fix",
 		"format": "prettier --write \"src/**/*.{js,vue}\"",
-		"test:unit": "vitest run"
+		"test:unit": "vitest run",
+		"test:e2e": "playwright test"
 	},
 	"dependencies": {
 		"autosize": "^6.0.1",
@@ -25,6 +27,7 @@
 		"vue": "^3.5.27"
 	},
 	"devDependencies": {
+		"@playwright/test": "^1.58.2",
 		"@vitejs/plugin-vue": "^6.0.4",
 		"@vitest/eslint-plugin": "^1.6.6",
 		"@vue/compiler-sfc": "^3.5.27",

panel/package.json

@@ -0,0 +1,27 @@
+/* eslint-env node */
+import { defineConfig } from "@playwright/test";
+
+const BASE_URL = process.env.BASE_URL ?? "https://sandbox.test";
+
+export default defineConfig({
+	testMatch: ["{lab,e2e}/**/*.spec.js"],
+	outputDir: "e2e/results",
+	reporter: process.env.CI ? "dot" : [["html", { outputFolder: "e2e/report" }]],
+
+	use: {
+		baseURL: BASE_URL,
+		ignoreHTTPSErrors: true
+	},
+
+	projects: [
+		{
+			name: "setup",
+			testMatch: "e2e/setup.js"
+		},
+		{
+			name: "tests",
+			dependencies: ["setup"],
+			use: { storageState: "e2e/session.json" }
+		}
+	]
+});