feat: Migrate snapshot generation from Cypress to Playwright.

action.yml

@@ -67,10 +67,7 @@ runs:
         cluster_name: "kind-cluster"
     - run: echo ${{ steps.ping-playground.outputs.IS_PLAYGROUND_RUNNING }}
       shell: bash
-    - run:
-      working-directory: action/cypress-action/
-      if: ${{ !steps.ping-playground.outputs.IS_PLAYGROUND_RUNNING }}
-      shell: bash
+
     - run: |
         FILE_PATH=${{ inputs.filePath }} ./action/manifest-merger.sh # creates file in root dir
         cat "__intermediate_file.yml" # debug
@@ -98,19 +95,18 @@ runs:
       shell: bash
     - run: echo $APPLICATION_ID && echo ${{env.APPLICATION_ID}}
       shell: bash
-    - name: Cypress run
-      uses: cypress-io/github-action@v4
-      with:
-        working-directory: action/cypress-action
-        spec: cypress/e2e/e2e/**/*
-        browser: chrome
-        # record: true
+    - name: Install Playwright browsers
+      run: |
+        npx playwright install --with-deps chromium
+        mkdir -p cypress/screenshots
+      working-directory: action/playwright-action
+      shell: bash
+    - name: Playwright run
+      run: CYPRESS_token="${{ inputs.mesheryToken }}" CYPRESS_releasetag="${{env.tag}}" CYPRESS_applicationId="${{ env.APPLICATION_ID }}" npx playwright test tests/loadDesign.spec.js
+      working-directory: action/playwright-action
+      shell: bash
       env:
         GITHUB_TOKEN: ${{ inputs.githubToken }}
-        CYPRESS_token: ${{ inputs.mesheryToken }}
-        CYPRESS_releasetag: ${{env.tag}}
-        CYPRESS_applicationId: ${{ env.APPLICATION_ID }}
-        # CYPRESS_RECORD_KEY: ${{ inputs.cypressRecordKey }}
     - run: ls
       shell: bash
     - run: tree . -L 2me
@@ -133,18 +129,18 @@ runs:
         name: meshery-log1
         path: log.txt
 
-    - name: Upload Cypress artifacts
+    - name: Upload Playwright test results
       if: always()
       uses: actions/upload-artifact@v4
       with:
-        name: cypress-video
-        path: action/cypress-action/cypress/videos
-    - name: Upload Cypress artifacts
+        name: playwright-test-results
+        path: action/playwright-action/test-results
+    - name: Upload Playwright screenshots
       if: always()
       uses: actions/upload-artifact@v4
       with:
-        name: cypress-screenshots
-        path: action/cypress-action/cypress/screenshots
+        name: playwright-screenshots
+        path: action/playwright-action/cypress/screenshots
     - run: node --version
       shell: bash
     - run: npm ci

playwright-action/playwright.config.js

@@ -41,7 +41,7 @@ module.exports = defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'https://playground.meshery.io',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -56,44 +56,5 @@ module.exports = defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
-
-    /*
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-    */
-
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });

playwright-action/tests/README.md

@@ -0,0 +1,46 @@
+# Playwright Tests for Kanvas Snapshot
+
+This directory contains Playwright tests converted from Cypress for the Kanvas Snapshot automation.
+
+## Environment Requirements
+
+The tests require the following environment variables to be set:
+
+| Variable | Description | Example |
+|----------|-------------|---------|
+| `CYPRESS_token` | Meshery/Layer5 Cloud API token for authentication | Your API token from Layer5 Cloud |
+| `CYPRESS_applicationId` | Design UUID to render | `3c116d0a-49ea-4294-addc-d9ab34210662` |
+| `CYPRESS_releasetag` | (Optional) Release tag for capabilities | `v0.7.0` |
+
+## Endpoint Configuration
+
+- **Base URL**: `https://playground.meshery.io` (configured in `playwright.config.js`)
+- **Design Rendering**: `/extension/meshmap?mode=design&design={designId}&render=full`
+
+## Authentication
+
+The tests authenticate by setting cookies:
+- `meshery-provider`: Set to `Layer5`
+- `token`: Set to the value from `CYPRESS_token` environment variable
+
+## Running Tests
+
+### With Environment Variables
+
+```bash
+export CYPRESS_token="your-token-here"
+export CYPRESS_applicationId="your-design-id-here"
+npx playwright test tests/loadDesign.spec.js
+```
+
+### In CI/CD (GitHub Actions)
+
+Environment variables are automatically set from workflow inputs:
+- `CYPRESS_token: ${{ inputs.mesheryToken }}`
+- `CYPRESS_applicationId: ${{ env.APPLICATION_ID }}`
+
+## Test Output
+
+Screenshots are saved to the `cypress/screenshots/` directory (maintaining compatibility with the original Cypress structure):
+- `snapshot-light.png`
+- `snapshot-dark.png`

playwright-action/tests/constants.js

@@ -0,0 +1,86 @@
+const DESIGNER = "designer";
+const VISUALIZER = "visualizer";
+const extension = {
+  path: "**/api/provider/extension*",
+  alias: "extensionFileLoad",
+};
+
+const designEndpoint = {
+  path: "**/api/pattern*",
+  alias: "designEp",
+  wait: "@designEp",
+  absolutePath: "/api/pattern",
+};
+
+const MESHMAP_PATH = "/extension/meshmap";
+
+const CANVAS_CONTAINER_ID = "cy-canvas-container";
+
+const TIME = {
+  SMALL: 500,
+  MEDIUM: 1000,
+  LARGE: 1500,
+  XLARGE: 2000,
+  XXLARGE: 5000,
+  XXXLARGE: 10000,
+  X4LARGE: 15_000,
+};
+
+const canvasContainer = {
+  query: `#${CANVAS_CONTAINER_ID}`,
+  alias: "canvas",
+};
+
+const cypressTestDesign = {
+  url: "/extension/meshmap?design=142f0054-d9ae-4352-8618-887104a81928",
+  id: "142f0054-d9ae-4352-8618-887104a81928",
+};
+const hierarchyRelationshipDesign = cypressTestDesign;
+
+const cytoConversion = {
+  url: "/api/pattern?output=cytoscape",
+  method: "POST",
+  alias: "cytoPatternConversion",
+  wait: "@cytoPatternConversion",
+};
+
+/**
+ * Selection and general Event Binding Layer
+ */
+const canvasLayer0 = {
+  query: '[data-id="layer0-selectbox"]',
+  alias: "layer0",
+};
+
+/**
+ * drag and drop Layer
+ */
+const canvasLayer1 = {
+  query: '[data-id="layer1-drag"]',
+  alias: "layer1",
+};
+
+/**
+ * Node and Element Layer
+ */
+const canvaslayer2 = {
+  query: '[data-id="layer2-node"]',
+  alias: "layer2",
+};
+
+module.exports = {
+  DESIGNER,
+  VISUALIZER,
+  extension,
+  designEndpoint,
+  MESHMAP_PATH,
+  CANVAS_CONTAINER_ID,
+  TIME,
+  canvasContainer,
+  cypressTestDesign,
+  hierarchyRelationshipDesign,
+  cytoConversion,
+  canvasLayer0,
+  canvasLayer1,
+  canvaslayer2,
+};

playwright-action/tests/fixtures.js

@@ -0,0 +1,100 @@
+const { test: base } = require("@playwright/test");
+const fs = require("fs");
+const path = require("path");
+
+exports.test = base.extend({
+  // Custom fixture for login
+  login: async ({ page }, use) => {
+    await use(async () => {
+      const token = process.env.CYPRESS_token || ""; // Fallback or load from env
+      await page.context().addCookies([
+        {
+          name: "meshery-provider",
+          value: "Layer5",
+          domain: "playground.meshery.io",
+          path: "/",
+        },
+        {
+          name: "token",
+          value: token,
+          domain: "playground.meshery.io",
+          path: "/",
+        },
+      ]);
+    });
+  },
+
+  // Custom fixture for setting release tag
+  setReleaseTag: async ({ page }, use) => {
+    await use(async (version) => {
+      // Mock the capabilities response
+      // We'll read the original fixture if available, or just mock a minimal structure
+      // For now, let's assume we can just intercept the request
+      await page.route("**/api/provider/capabilities", async (route) => {
+        const capabilities = {
+          package_version: version || process.env.CYPRESS_releasetag || "latest",
+          package_url: `https://github.com/layer5labs/meshery-extensions-packages/releases/download/${
+            version || process.env.CYPRESS_releasetag || "latest"
+          }/provider-meshery.tar.gz`,
+        };
+        await route.fulfill({ json: capabilities });
+      });
+    });
+  },
+
+  // Custom fixture for setting mode
+  setMode: async ({ page }, use) => {
+    await use(async (mode) => {
+      await page.addInitScript((m) => {
+        try {
+          window.localStorage.setItem("mode", m);
+        } catch (e) {
+          // Ignore access denied errors (e.g. on about:blank)
+        }
+      }, mode);
+    });
+  },
+
+  // Custom fixture for setting theme mode
+  setThemeMode: async ({ page }, use) => {
+    await use(async (mode) => {
+      await page.addInitScript((m) => {
+        try {
+          window.localStorage.setItem("Theme", m);
+        } catch (e) {
+          // Ignore access denied errors
+        }
+      }, mode);
+    });
+  },
+
+  // Custom fixture for intercepting capabilities (if not using setReleaseTag)
+  interceptCapabilities: async ({ page }, use) => {
+    await use(async () => {
+      // This might be redundant if setReleaseTag handles the intercept
+      // But we'll keep it for compatibility
+      // We can point to a local file if needed, but fulfilling with JSON is easier
+       await page.route("**/api/provider/capabilities", async (route) => {
+         // You might want to load this from a file if it's complex
+         const capabilities = {
+            // ... default capabilities
+         };
+         await route.fulfill({ json: capabilities });
+       });
+    });
+  },
+
+  // Custom fixture for DPI and Resize
+  dpiAndResize: async ({ page }, use) => {
+    await use(async (scaleFactor, width, height) => {
+      await page.setViewportSize({ width, height });
+      const client = await page.context().newCDPSession(page);
+      await client.send("Emulation.setDeviceMetricsOverride", {
+        deviceScaleFactor: scaleFactor,
+        width: 0,
+        height: 0,
+        mobile: false,
+      });
+    });
+  },
+});