Playwright Setup

.github/workflows/ci_build.yaml

@@ -59,6 +59,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Install Playwright browsers
+        if: matrix.os == 'ubuntu-latest'
+        run: pnpm playwright:install:ci
+
+      - name: Install Playwright browsers (macOS/Windows)
+        if: matrix.os != 'ubuntu-latest'
+        run: pnpm playwright:install
+
       - name: Check for dependency mismatches
         run: pnpm dependencies:check
 

.gitignore

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

package.json

@@ -20,9 +20,12 @@
     "format:check": "oxfmt --config .oxfmtrc.json --check",
     "build:prod": "pnpm -r --stream --if-present build:prod",
     "build:dev": "pnpm -r --stream --if-present build:dev",
-    "prepare": "husky"
+    "prepare": "husky",
+    "playwright:install": "playwright install",
+    "playwright:install:ci": "playwright install --with-deps"
   },
   "devDependencies": {
+    "@playwright/test": "catalog:",
     "husky": "catalog:",
     "lint-staged": "catalog:",
     "oxfmt": "catalog:",

packages/serverless-workflow-diagram-editor/package.json

@@ -32,10 +32,12 @@
     "clean": "rimraf ./dist",
     "clean:storybook": "rimraf ./dist-storybook",
     "build:dev": "pnpm clean && tsc -p tsconfig.json",
-    "build:prod": "pnpm lint && pnpm clean && tsc -p tsconfig.json && pnpm test",
+    "build:prod": "pnpm lint && pnpm clean && tsc -p tsconfig.json && pnpm test && pnpm test:e2e",
     "test": "vitest run --passWithNoTests",
     "start": "storybook dev -p 6006 --no-open",
-    "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook"
+    "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@serverlessworkflow/i18n": "workspace:*",
@@ -45,6 +47,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",
+    "@playwright/test": "catalog:",
     "@storybook/addon-a11y": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/addon-vitest": "catalog:",

packages/serverless-workflow-diagram-editor/playwright.config.ts

@@ -0,0 +1,34 @@
+/*
+ * 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/e2e",
+  testMatch: "**/*.e2e.ts",
+
+  use: {
+    baseURL: "http://localhost:6006",
+    headless: true,
+  },
+
+  webServer: {
+    command: "pnpm start",
+    url: "http://localhost:6006",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

packages/serverless-workflow-diagram-editor/tests/e2e/diagram-editor.e2e.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);
+});