Add UI E2E testing framework with Playwright and Breeze integration

airflow-core/src/airflow/ui/.gitignore

@@ -1 +1,7 @@
 openapi.merged.json
+
+# Playwright E2E test results and reports
+/test-results/
+/playwright-report/
+/tests/e2e/test-results/
+/tests/e2e/playwright-report/

airflow-core/src/airflow/ui/package.json

@@ -16,7 +16,13 @@
     "preview": "vite preview",
     "codegen": "openapi-merge-cli && openapi-rq -i openapi.merged.json -c axios --format prettier -o openapi-gen --operationId",
     "test": "vitest run",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:install": "playwright install"
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.3.4",
@@ -105,7 +111,8 @@
     "vite": "^7.1.11",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vitest": "^3.2.4",
-    "web-worker": "^1.5.0"
+    "web-worker": "^1.5.0",
+    "@playwright/test": "^1.56.1"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

airflow-core/src/airflow/ui/playwright.config.ts

@@ -0,0 +1,104 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Playwright configuration for Airflow UI End-to-End Tests
+ */
+export const testConfig = {
+  credentials: {
+    password: process.env.TEST_PASSWORD ?? "admin",
+    username: process.env.TEST_USERNAME ?? "admin",
+  },
+  testDag: {
+    id: process.env.TEST_DAG_ID ?? "example_bash_operator",
+  },
+};
+
+export default defineConfig({
+  expect: {
+    timeout: 5000,
+  },
+  forbidOnly: process.env.CI !== undefined && process.env.CI !== "",
+  fullyParallel: true,
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        launchOptions: {
+          args: [
+            "--start-maximized",
+            "--disable-web-security",
+            "--disable-features=VizDisplayCompositor",
+            "--window-size=1920,1080",
+            "--window-position=0,0",
+          ],
+          channel: "chrome",
+          ignoreDefaultArgs: ["--enable-automation"],
+        },
+      },
+    },
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+        launchOptions: {
+          args: [
+            "--width=1920",
+            "--height=1080",
+            "--no-sandbox",
+            "--disable-dev-shm-usage",
+            "--disable-web-security",
+          ],
+        },
+      },
+    },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+        launchOptions: {
+          args: [],
+        },
+      },
+    },
+  ],
+  reporter: [
+    ["html", { outputFolder: "playwright-report" }],
+    ["json", { outputFile: "test-results/results.json" }],
+    process.env.CI !== undefined && process.env.CI !== "" ? ["github"] : ["list"],
+  ],
+
+  retries: process.env.CI !== undefined && process.env.CI !== "" ? 2 : 0,
+
+  testDir: "./tests/e2e/specs",
+
+  timeout: 30_000,
+  use: {
+    actionTimeout: 10_000,
+    baseURL: process.env.AIRFLOW_UI_BASE_URL ?? "http://localhost:28080",
+    screenshot: "only-on-failure",
+    trace: "on-first-retry",
+    video: "retain-on-failure",
+    viewport: undefined,
+  },
+
+  workers: process.env.CI !== undefined && process.env.CI !== "" ? 2 : undefined,
+});

airflow-core/src/airflow/ui/tests/e2e/README.md

@@ -0,0 +1,91 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+ -->
+
+# Airflow UI End-to-End Tests
+
+UI automation tests using Playwright for critical Airflow workflows.
+
+## Prerequisites
+
+**Requires running Airflow with example DAGs:**
+
+- Airflow UI running on `http://localhost:28080` (default)
+- Admin user: `admin/admin`
+- Example DAGs loaded (uses `example_bash_operator`)
+
+## Running Tests
+
+### Using Breeze
+
+```bash
+# Basic run
+breeze testing ui-e2e-tests
+
+# Specific test with browser visible
+breeze testing ui-e2e-tests --test-pattern "dag-trigger.spec.ts" --headed
+
+# Different browsers
+breeze testing ui-e2e-tests --browser firefox --headed
+breeze testing ui-e2e-tests --browser webkit --headed
+```
+
+### Using pnpm directly
+
+```bash
+cd airflow-core/src/airflow/ui
+
+# Install dependencies
+pnpm install
+pnpm exec playwright install
+
+# Run tests
+pnpm test:e2e:headed                    # Show browser
+pnpm test:e2e:ui                       # Interactive debugging
+```
+
+## Test Structure
+
+```
+tests/e2e/
+├── pages/           # Page Object Models
+└── specs/           # Test files
+```
+
+## Configuration
+
+Set environment variables if needed:
+
+```bash
+export AIRFLOW_UI_BASE_URL=http://localhost:28080
+export TEST_USERNAME=admin
+export TEST_PASSWORD=admin
+export TEST_DAG_ID=example_bash_operator
+```
+
+## Debugging
+
+```bash
+# Step through tests
+breeze testing ui-e2e-tests --debug-e2e
+
+# View test report
+pnpm test:e2e:report
+```
+
+Find test artifacts in `test-results/` and reports in `playwright-report/`.

airflow-core/src/airflow/ui/tests/e2e/pages/BasePage.ts

@@ -0,0 +1,61 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { Page, Locator } from "@playwright/test";
+
+/**
+ * Base Page Object
+ */
+export class BasePage {
+  public readonly page: Page;
+  public readonly welcomeHeading: Locator;
+
+  public constructor(page: Page) {
+    this.page = page;
+    this.welcomeHeading = page.locator('h2.chakra-heading:has-text("Welcome")');
+  }
+
+  public async isLoggedIn(): Promise<boolean> {
+    try {
+      await this.welcomeHeading.waitFor({ timeout: 30_000 });
+
+      return true;
+    } catch {
+      const currentUrl = this.page.url();
+
+      return !currentUrl.includes("/login");
+    }
+  }
+
+  public async maximizeBrowser(): Promise<void> {
+    try {
+      await this.page.setViewportSize({ height: 1080, width: 1920 });
+    } catch {
+      // Viewport size could not be set
+    }
+  }
+
+  public async navigateTo(path: string): Promise<void> {
+    await this.page.goto(path);
+    await this.waitForPageLoad();
+  }
+
+  public async waitForPageLoad(): Promise<void> {
+    await this.page.waitForLoadState("networkidle");
+  }
+}