Playwright test

cypress-action/cypress/support/helpers.js

@@ -1,6 +1,6 @@
 import { DESIGNER, extension, MESHMAP_PATH } from "./constants"
 
-
+//utility func that return strings and id
 export function waitFor(str) {
   return "@" + str;
 }
@@ -9,14 +9,16 @@ export function id(str) {
   return "#" + str
 }
 
+//cypress setup capabilities
 const doInitialSetup = () => {
   cy.setViewPort();
   cy.login();
   cy.setReleaseTag();
-  cy.interceptCapabilities();
+  cy.interceptCapabilities();//intercept request to specific endpoint 
   cy.setMode(DESIGNER);
 }
 
+//a callback hook to perform actions before running individual tests
 export const beforeEachCallback = () => {
   doInitialSetup();
   cy.intercept(extension.path).as(extension.alias);
@@ -30,7 +32,7 @@ export const beforeEachCallbackForCustomUrl = (customPath) => {
   cy.visit(customPath);
   cy.wait(waitFor(extension.alias), { timeout: 60_000 });
 }
-
+//captures meshmap graph screenshots and generates download link
 export const saveGraph = (cy) => {
   let image = cy.png();
   let lnk = document.createElement("a"),

playwright-action/helpers/constants.js

@@ -0,0 +1,75 @@
+import { id } from "./playwrightUtils.js";
+
+export const DESIGNER = "designer"
+export const VISUALIZER = "visualizer"
+
+//Objects defining paths, aliases, and wait conditions for intercepting certain API requests.
+export const extension = {
+  path: "/api/provider/extension*",
+  alias: "extensionFileLoad"
+};
+
+export const designEndpoint = {
+  path: "/api/pattern*",
+  alias: "designEp",
+  wait: "@designEp",
+  absolutePath: "/api/pattern"
+}
+
+export const MESHMAP_PATH = "/extension/meshmap";
+
+export const CANVAS_CONTAINER_ID = "py-canvas-container"
+
+export const TIME = {
+  SMALL: 500,
+  MEDIUM: 1000,
+  LARGE: 1500,
+  XLARGE: 2000,
+  XXLARGE: 5000,
+  XXXLARGE: 10000,
+  X4LARGE: 15_000
+}
+
+export const canvasContainer = {
+  query: id(CANVAS_CONTAINER_ID),
+  alias: "canvas"
+}
+
+export const playwrightTestDesign = {
+  url: "/extension/meshmap?design=142f0054-d9ae-4352-8618-887104a81928",
+  id: "142f0054-d9ae-4352-8618-887104a81928",
+}
+//Objects related to specific designs or patterns within the application.
+export const hierarchyRelationshipDesign = cypressTestDesign;
+
+// An object specifying a URL, HTTP method, and aliases related to pattern conversion.
+export const cytoConversion = {
+  url: "/api/pattern?output=cytoscape",
+  method: "POST",
+  alias: "cytoPatternConversion",
+  wait: "@cytoPatternConversion"
+}
+
+/**
+ * Selection and general Event Binding Layer
+ */
+export const canvasLayer0 = {
+  query: '[data-id="layer0-selectbox"]',
+  alias: "layer0"
+}
+
+/**
+ * drag and drop Layer
+ */
+export const canvasLayer1 = {
+  query: '[data-id="layer1-drag"]',
+  alias: "layer1"
+}
+
+/**
+ * Node and Element Layer
+ */
+export const canvaslayer2 = {
+  query: '[data-id="layer2-node"]',
+  alias: "layer2"
+}

playwright-action/helpers/playwrightSetup.js

@@ -0,0 +1,18 @@
+//@ts-check
+import  { waitFor, id, InitialEnvSetup, captureAndSaveScreenshot, saveGraph, Login, setViewportSize,interceptAndModifyRequest, navigateToCustomURL, waitForNetworkResponse } from "./playwrightUtils"
+
+
+//Set Up Playwright capabilities
+const doInitialSetup = () => {
+      InitialEnvSetup()
+      setViewportSize();
+      Login();
+      interceptAndModifyRequest();
+}
+
+//a callback hook to perform actions before running individual tests
+export const beforeEachCallbackForCustomUrl = (customPath)=>{
+      doInitialSetup();
+      navigateToCustomURL(customPath)
+      waitForNetworkResponse(customPath)
+}

playwright-action/helpers/playwrightUtils.js

@@ -0,0 +1,121 @@
+//@ts-check
+//Playwright configurations for setting up tests
+const { chromium } = require("@playwright/test");
+const path = require('path');
+const browser = await chromium.launch();
+const context = await browser.newContext();
+const page = await context.newPage();
+
+const getFormattedDateTime = () =>{
+      const now = new Date();
+
+      // Extract date components (YYYY_MM_DD format)
+      const year = now.getFullYear();
+
+      // Add 1 because months are 0-indexed
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+
+      // Extract time components (HH_MM_SS format)
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+
+      // Concatenate date and time components into the desired format
+      const formattedString = `Meshmap_${year}_${month}_${day}_${hours}_${minutes}_${seconds}.png`;
+
+      return formattedString;
+};
+
+//utility func to generate css selector and return id and strings
+function waitFor(str) {
+      return `@${str}`;
+}
+
+function id(str) {
+      return `#${str}`;
+}
+
+
+//create a fresh testing env for testcases
+async function InitialEnvSetup() {
+      const browser = await chromium.launch();
+      const context = await browser.newContext();
+      const page = await context.newPage();
+
+      return { browser, context, page };
+}
+
+
+//capture and save a screenshot
+async function captureAndSaveScreenshot(filename) {
+      await page.screenshot({ path: filename });
+}
+
+//Save meshmapscreenshot and generate a download link.    
+async function saveGraph(customUrl) {
+      const browser = await chromium.launch();
+      const page = await browser.newPage();
+
+      await page.goto(customUrl);
+
+      // Capture a screenshot and save it with a custom filename
+      const date = new Date();
+      // Format: Meshmap_2023_09_23_14_30_45.png
+      const fileName = getFormattedDateTime();
+      const filePath = path.join(__dirname, fileName); // Full path to the saved screenshot
+
+      await captureAndSaveScreenshot(filePath);
+      await browser.close();
+
+      // Create a download link
+      const downloadLink = `/download?fileName=${encodeURIComponent(fileName)}`;
+
+      console.log(`Screenshot saved as ${fileName}`);
+      console.log('Download link:', downloadLink);
+
+      return downloadLink; 
+}
+
+//Login to be used for settingup tests
+async function Login(page, username, password) {
+      await page.goto('https://meshery.layer5.io/login');
+
+      await page.locator('input[name="identifier"]').fill(username);
+      // Press the Tab key (to move to the password field)
+      await page.locator('input[name="identifier"]').press('Tab');
+      await page.fill('input[name="password"]').fill(password);
+      await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+}      
+
+//set a visiblesize of webpage
+async function setViewportSize(width, height) {
+      await page.setViewportSize({ width, height });
+}
+
+// intercept and modify network requests to specific endpoint 
+// to control network interactions during testing and automation
+async function interceptAndModifyRequest(targetUrl, modifiedResponse) {
+      await page.route(targetUrl, (route) => {
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(modifiedResponse),//custom response to send when intercepting a network request
+        });
+      });
+}
+
+async function navigateToCustomURL(customPath) {
+      const browser = await chromium.launch();
+      const context = await browser.newContext();
+      const page = await context.newPage();
+      await page.goto(customPath);
+}
+
+async function waitForNetworkResponse(targetUrl) { 
+      const timeout = 60000
+      await page.waitForResponse(targetUrl, { timeout });
+    }
+
+
+export { waitFor, id, InitialEnvSetup, captureAndSaveScreenshot, saveGraph, Login, setViewportSize, interceptAndModifyRequest, navigateToCustomURL, waitForNetworkResponse };