test(e2e): Clean up and fix up some mock e2e test using newer playwright apis (#4723)

* test(e2e): Fix up E2E tests a bit

* test(e2e): fix up e2e tests

* fix some tests

* fix(Designer): Copy Paste Fixes (#4725)

* fixScopePaste

* remove logs

* fix test

* fix tests

* i forgot to update the original one

* readd tests

* readd tests

---------

Co-authored-by: Eric Wu <[email protected]>

Author: hartra344

.github/workflows/real-e2e.yml

@@ -13,7 +13,7 @@ jobs:
         id-token: write
     strategy:
       matrix:
-        browser: [chromium, firefox, webkit]
+        browser: [chromium, firefox]
     steps:
     - uses: actions/checkout@v4
 
@@ -101,7 +101,6 @@ jobs:
       run: |
         az group delete -n lauxtest2chromium --yes --no-wait
         az group delete -n lauxtest2firefox --yes --no-wait
-        az group delete -n lauxtest2webkit --yes --no-wait
 
     - name: "Upload Playwright Report to Azure Blob Storage for static site access"
       shell: bash

e2e/designer/app.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
 
 test(
   'Sanity Check',
@@ -8,9 +9,8 @@ test(
   async ({ page }) => {
     await page.goto('/');
 
-    await page.getByText('Select an option').click();
-    await page.getByRole('option', { name: 'Simple Big Workflow' }).click();
-    await page.getByRole('button', { name: 'Toolbox' }).click();
+    await GoToMockWorkflow(page, 'Simple Big Workflow');
+
     await page.getByTestId('card-Increment variable').getByRole('button').click();
     await page.getByLabel('Value').getByRole('paragraph').click();
     await page.getByLabel('Value').press('Escape');

e2e/designer/dragAndDrop.spec.ts

@@ -1,4 +1,5 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
 
 test(
   'Should be able to drag and drop operations',
@@ -8,21 +9,9 @@ test(
   async ({ page }) => {
     await page.goto('/');
 
-    await page.locator('text=Select an option').click();
-    await page.locator('button[role="option"]:has-text("Simple Big Workflow")').click();
-    await page.locator('div[role="button"]:has-text("🧰")').click();
-
-    const originElement = await page.waitForSelector('div[role="button"]:has-text("Increment variable55")');
-    const destinationElement = await page.waitForSelector(
-      'g:nth-child(51) > .edgebutton-foreignobject > div > div > .msla-drop-zone-viewmanager2'
-    );
-
-    await originElement.hover();
-    await page.mouse.down();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const box = (await destinationElement.boundingBox())!;
-    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-    await destinationElement.hover();
-    await page.mouse.up();
+    await GoToMockWorkflow(page, 'Panel');
+    await page
+      .getByLabel('HTTP operation, HTTP connector')
+      .dragTo(page.getByTestId('rf__edge-manual-Initialize_ArrayVariable').getByLabel('Insert a new step between'));
   }
 );

e2e/designer/ensureInitializeVariable.spec.ts

@@ -1,4 +1,6 @@
 import { test, expect } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
+import { getSerializedWorkflowFromState } from './utils/designerFunctions';
 
 test(
   'Should be able to switch between Initialize Variable types',
@@ -7,9 +9,7 @@ test(
   },
   async ({ page }) => {
     await page.goto('/');
-    await page.getByText('Select an option').click();
-    await page.getByRole('option', { name: 'Recurrence' }).click();
-    await page.getByRole('button', { name: 'Toolbox' }).click();
+    await GoToMockWorkflow(page, 'Recurrence');
     await page.getByLabel('Insert a new step after').click();
     await page.getByText('Add an action').click();
     await page.getByPlaceholder('Search').click();
@@ -37,29 +37,15 @@ test(
       .first()
       .click();
 
-    const serialized: any = await page.evaluate(() => {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const state = (window as any).DesignerStore.getState();
-          resolve((window as any).DesignerModule.serializeBJSWorkflow(state));
-        }, 5000);
-      });
-    });
+    const serialized: any = await getSerializedWorkflowFromState(page);
     expect(serialized.definition.actions.Initialize_variable.inputs.variables[0].type).toBe('integer');
     expect(serialized.definition.actions.Initialize_variable.inputs.variables[0].value).toEqual(12);
 
     await page.getByText('Integer').click();
     await page.getByRole('option', { name: 'Boolean' }).click();
     await page.getByPlaceholder('Enter initial value').click();
     await page.getByRole('option', { name: 'true' }).click();
-    const serialized2: any = await page.evaluate(() => {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const state = (window as any).DesignerStore.getState();
-          resolve((window as any).DesignerModule.serializeBJSWorkflow(state));
-        }, 5000);
-      });
-    });
+    const serialized2: any = await getSerializedWorkflowFromState(page);
     expect(serialized2.definition.actions.Initialize_variable.inputs.variables[0].type).toBe('boolean');
     expect(serialized2.definition.actions.Initialize_variable.inputs.variables[0].value).toEqual(true);
   }

e2e/designer/mock-copypastescope.spec.ts

@@ -1,15 +1,12 @@
 import { test, expect } from '@playwright/test';
+import { getSerializedWorkflowFromState } from './utils/designerFunctions';
 
 test(
   'Mock: Expect Copy and Paste of Scopes to work on single workflow',
   {
     tag: '@mock',
   },
-  async ({ page, browserName, context }) => {
-    test.skip(browserName === 'webkit');
-    if (browserName === 'webkit') {
-      context.grantPermissions(['clipboard-read'], { origin: 'http://localhost:4200' });
-    }
+  async ({ page }) => {
     await page.goto('/');
     await page.getByText('Select an option').click();
     await page.getByRole('option', { name: 'Conditionals', exact: true }).click();
@@ -20,14 +17,7 @@ test(
     await page.getByTestId('rf__edge-Initialize_variable-Condition').getByLabel('Insert a new step between').focus();
     await page.keyboard.press('Control+V');
     await page.waitForTimeout(1000);
-    const serialized: any = await page.evaluate(() => {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const state = (window as any).DesignerStore.getState();
-          resolve((window as any).DesignerModule.serializeBJSWorkflow(state));
-        }, 5000);
-      });
-    });
+    const serialized: any = await getSerializedWorkflowFromState(page);
     expect(serialized.definition).toEqual(verificationWorkflow);
   }
 );