Run Playwright E2E tests in CI

.github/workflows/playwright.yaml

@@ -0,0 +1,71 @@
+#
+# Copyright 2021-Present The Serverless Workflow Specification Authors
+#
+# Licensed 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.
+#
+
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ["**"]
+    types: [opened, reopened, ready_for_review, synchronize]
+
+jobs:
+  e2e:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v5
+        with:
+          version: 10.31.0
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build and test
+        run: pnpm build:prod
+
+      - name: Install Playwright browsers (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        run: pnpm --filter @serverlessworkflow/playwright exec playwright install --with-deps
+
+      - name: Install Playwright browsers (macOS/Windows)
+        if: matrix.os != 'ubuntu-latest'
+        run: pnpm --filter @serverlessworkflow/playwright exec playwright install
+
+      - name: Run Playwright tests
+        run: pnpm --filter @serverlessworkflow/playwright test
+
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-${{ matrix.os }}
+          path: packages/playwright/playwright-report

.gitignore

@@ -175,3 +175,8 @@ vite.config.ts.timestamp-*
 
 # Apache RAT
 .rat-reports
+
+# playwright test results
+test-results/
+playwright-report/
+blob-report/

packages/playwright/README.md

@@ -0,0 +1,37 @@
+<!--
+   Copyright 2021-Present The Serverless Workflow Specification Authors
+
+   Licensed 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.
+-->
+
+# Playwright E2E Setup (Monorepo - pnpm)
+
+This document explains how to set up and run Playwright end-to-end (E2E) tests for packages inside this monorepo.
+
+---
+
+## Configure Playwright
+
+- Configure Playwright in playwright.config.ts for the package which you want to write tests for.
+- Add an endpoint for that package and make sure it is the same port where the package/app starts.
+- Navigate to tests folder and create a file with the package name which you want to write tests for and write all the tests in it.
+
+## Steps for testing
+
+- Run the command for testing :-
+  - pnpm --filter @packageName test
+  - Eg- pnpm --filter @serverlessworkflow/playwright test
+
+- For testing it in UI :-
+  - pnpm --filter @packageName test:ui
+  - Eg- pnpm --filter @serverlessworkflow/playwright test:ui

packages/playwright/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@serverlessworkflow/playwright",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "license": "Apache-2.0",
+  "author": "",
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@types/node": "catalog:"
+  },
+  "packageManager": "pnpm@10.31.0"
+}

packages/playwright/playwright.config.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed 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 } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+
+  reporter: [["html", { open: "never" }]],
+
+  use: {
+    baseURL: "http://localhost:6006",
+    headless: true,
+  },
+
+  webServer: {
+    command: "pnpm --filter @serverlessworkflow/diagram-editor start",
+    url: "http://localhost:6006",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

packages/playwright/tests/diagram-editor.spec.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed 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 { test, expect } from "@playwright/test";
+
+test("diagram editor renders correctly", async ({ page }) => {
+  await page.goto("/iframe.html?id=example-diagrameditor--component");
+
+  // Wait for main container
+  await expect(page.getByTestId("diagram-container")).toBeVisible();
+
+  // Check at least one specific node
+  await expect(page.getByTestId("rf__node-n1")).toBeVisible();
+
+  // Check total nodes
+  const nodes = page.locator('[data-testid^="rf__node-"]');
+  await expect(nodes).toHaveCount(5);
+
+  // Check total edges
+  const edges = page.locator('[data-testid^="rf__edge-"]');
+  await expect(edges).toHaveCount(5);
+
+  // Verify the diagram rendered at least one node and one edge
+  const nodesCount = page.locator('[data-testid^="rf__node-"]');
+  await expect(await nodesCount.count()).toBeGreaterThan(0);
+
+  const edgesCount = page.locator('[data-testid^="rf__edge-"]');
+  await expect(await edgesCount.count()).toBeGreaterThan(0);
+});

packages/playwright/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  }
+}