Playwright Setup

.github/workflows/ci_build.yaml

@@ -59,8 +59,21 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Install Playwright browsers
+        run: pnpm playwright:install:ci
+
       - name: Check for dependency mismatches
         run: pnpm dependencies:check
 
       - name: Build and test
         run: pnpm build:prod
+
+      - name: Upload Playwright Artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-${{ matrix.os }}
+          path: |
+            packages/**/playwright-report/
+            packages/**/test-results/
+          retention-days: 30

.gitignore

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

package.json

@@ -20,9 +20,11 @@
     "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: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,32 @@
+/*
+ * 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",
+
+  use: {
+    baseURL: "http://localhost:6006",
+  },
+
+  webServer: {
+    command: "pnpm start",
+    url: "http://localhost:6006",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts

@@ -19,7 +19,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DiagramEditor } from "./DiagramEditor";
 
 const meta = {
-  title: "Example/DiagramEditor",
+  id: "diagram-editor",
+  title: "Example/Diagram-Editor",
   component: DiagramEditor,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],

packages/serverless-workflow-diagram-editor/tests-e2e/diagram-editor.spec.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 { test, expect } from "@playwright/test";
+
+test("diagram editor renders correctly", async ({ page }) => {
+  await page.goto("/iframe.html?id=diagram-editor--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")).toContainText("Node 1");
+
+  // 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);
+});

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

@@ -25,5 +25,6 @@ export default defineConfig({
     environment: "jsdom",
     setupFiles: ["./tests/setupTests.ts"],
     css: false,
+    include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
   },
 });