Add tests to shortcuts (#1510)

🔧 fix(NewFlowCard2): add missing data-testid attribute to the
NewFlowCardComponent to improve testability

🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the
save button to improve testability
🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the
edit button to improve testability
🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the
duplicate button to improve testability
🔧 fix(codeAreaModalComponent.spec): add click on the blank-flow element
before performing other actions to ensure proper test setup
🔧 fix(dropdownComponent.spec): add click on the blank-flow element
before performing other actions to ensure proper test setup
🔧 fix(floatComponent.spec): add click on the blank-flow element before
performing other actions to ensure proper test setup
🔧 fix(flowPage.spec): add click on the blank-flow element before
performing other actions to ensure proper test setup
🔧 fix(group.spec): add click on the blank-flow element before performing
other actions to ensure proper test setup
🔧 fix(inputComponent.spec): add click on the blank-flow element before
performing other actions to ensure proper test setup
🔧 fix(intComponent.spec): add click on the blank-flow element before
performing other actions to ensure proper test setup

🐛 fix(keyPairListComponent.spec.ts): update key pair IDs and values to
match test expectations
✨ feat(keyPairListComponent.spec.ts): add support for dynamic key pair
creation and deletion
🔀 merge(langflowShortcuts.spec.ts): add end-to-end tests for langflow
shortcuts
🔀 merge(nestedComponent.spec.ts): add end-to-end tests for nested
components
🔀 merge(promptModalComponent.spec.ts): add end-to-end tests for prompt
modal component
🔀 merge(saveComponents.spec.ts): add end-to-end tests for save
components

✅ test(toggleComponent.spec.ts): add test case to simulate clicking on
"blank-flow" element and waiting for 2 seconds
🐛 fix(toggleComponent.spec.ts): fix typo in test case, change "locator"
to "waitForSelector" for better readability

src/frontend/package-lock.json

@@ -102,6 +102,7 @@
         "tailwindcss": "^3.3.3",
         "tailwindcss-dotted-background": "^1.1.0",
         "typescript": "^5.2.2",
+        "ua-parser-js": "^1.0.37",
         "vite": "^4.5.2"
       }
     },
@@ -11067,6 +11068,29 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unified": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",

src/frontend/package.json

@@ -124,6 +124,7 @@
     "tailwindcss": "^3.3.3",
     "tailwindcss-dotted-background": "^1.1.0",
     "typescript": "^5.2.2",
+    "ua-parser-js": "^1.0.37",
     "vite": "^4.5.2"
   }
 }

src/frontend/playwright.config.ts

@@ -12,7 +12,7 @@ import { defineConfig, devices } from "@playwright/test";
 export default defineConfig({
   testDir: "./tests",
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */

src/frontend/run-tests.sh

@@ -54,7 +54,7 @@ sleep 10
 poetry install --extras deploy
 
 # Start the backend using 'make backend' in the background
-LANGFLOW_DATABASE_URL=sqlite:///./temp LANGFLOW_AUTO_LOGIN=True poetry run langflow run --backend-only --port 7860 --host 0.0.0.0 --no-open-browser &
+LANGFLOW_DATABASE_URL=sqlite:///./temp LANGFLOW_AUTO_LOGIN=True poetry run langflow run --backend-only --port 7860 --host 0.0.0.0 --no-open-browser --env-file .env &
 
 # Give some time for the backend to start (adjust sleep duration as needed)
 sleep 25

src/frontend/src/components/NewFLowCard2/index.tsx

@@ -13,6 +13,7 @@ export default function NewFlowCardComponent() {
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"
+      data-testid="blank-flow"
     >
       <CardContent className="h-full w-full">
         <div className="flex h-full w-full flex-col items-center justify-center rounded-md bg-muted align-middle bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px"></div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -379,6 +379,7 @@ export default function NodeToolbarComponent({
 
           <ShadTooltip content={"Save"} side="top">
             <button
+              data-testid="save-button-modal"
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
                 hasCode ? " " : " rounded-l-md "
@@ -452,6 +453,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Edit"}
                     icon={"Settings2"}
+                    dataTestId="edit-button-modal"
                   />
                 </SelectItem>
               )}
@@ -462,6 +464,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Duplicate"}
                   icon={"Copy"}
+                  dataTestId="duplicate-button-modal"
                 />
               </SelectItem>
               <SelectItem value={"copy"}>
@@ -471,6 +474,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Copy"}
                   icon={"Clipboard"}
+                  dataTestId="copy-button-modal"
                 />
               </SelectItem>
               {isOutdated && (
@@ -481,6 +485,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Update"}
                     icon={"Code"}
+                    dataTestId="update-button-modal"
                   />
                 </SelectItem>
               )}
@@ -498,6 +503,7 @@ export default function NodeToolbarComponent({
                     styleObj={{
                       iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6",
                     }}
+                    dataTestId="share-button-modal"
                   />
                 </SelectItem>
               )}
@@ -522,6 +528,7 @@ export default function NodeToolbarComponent({
                   shift={true}
                   value={"Docs"}
                   icon={"FileText"}
+                  dataTestId="docs-button-modal"
                 />
               </SelectItem>
               {isMinimal && (

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

@@ -8,9 +8,10 @@ export default function ToolbarSelectItem({
   value,
   icon,
   styleObj,
+  dataTestId,
 }: toolbarSelectItemProps) {
   return (
-    <div className="flex">
+    <div className="flex" data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
         className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses}`}

src/frontend/src/types/components/index.ts

@@ -702,5 +702,6 @@ export type toolbarSelectItemProps = {
     ctrlClasses?: string;
     keyClasses?: string;
     valueClasses?: string;
-  }
+  };
+  dataTestId: string;
 };

src/frontend/tests/end-to-end/auto_login.spec.ts

@@ -1,5 +1,8 @@
 import { test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(16000);
+  test.setTimeout(140000);
+});
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {
     await page.goto("http:localhost:3000/");
@@ -9,11 +12,18 @@ test.describe("Auto_login tests", () => {
   test("auto_login block_admin", async ({ page }) => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+
     await page.goto("http:localhost:3000/login");
     await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+
     await page.goto("http:localhost:3000/admin");
     await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
+
     await page.goto("http:localhost:3000/admin/login");
     await page.locator('//*[@id="new-project-btn"]').click();
+    await page.waitForTimeout(5000);
   });
 });

src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(2000);
+  test.setTimeout(120000);
+});
 test("CodeAreaModalComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pythonfunctiontool");
 

src/frontend/tests/end-to-end/dragAndDrop.spec.ts

@@ -1,6 +1,9 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(3000);
+  test.setTimeout(120000);
+});
 test.describe("drag and drop test", () => {
   /// <reference lib="dom"/>
   test("drop collection", async ({ page }) => {

src/frontend/tests/end-to-end/dropdownComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(4000);
+  test.setTimeout(120000);
+});
 test("dropDownComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("dropDownComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");
 

src/frontend/tests/end-to-end/floatComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(5000);
+  test.setTimeout(120000);
+});
 test("FloatComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("FloatComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llamacpp");
 

src/frontend/tests/end-to-end/flowPage.spec.ts

@@ -1,4 +1,8 @@
 import { Page, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(6000);
+  test.setTimeout(120000);
+});
 
 test.describe("Flow Page tests", () => {
   async function goToFlowPage(page: Page) {
@@ -13,13 +17,16 @@ test.describe("Flow Page tests", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(2000);
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
 
     await page.waitForTimeout(2000);
 
     await page
-      .locator('//*[@id="utilitiesCustomComponent"]')
+      .locator('//*[@id="helpersCustom Component"]')
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();

src/frontend/tests/end-to-end/group.spec.ts

@@ -1,11 +1,18 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(7000);
+  test.setTimeout(120000);
+});
 test.describe("group node test", () => {
   /// <reference lib="dom"/>
   test("group and ungroup updating values", async ({ page }) => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
+
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",
@@ -23,7 +30,7 @@ test.describe("group node test", () => {
       return dt;
     }, jsonContent);
 
-    page.waitForTimeout(2000);
+    await page.waitForTimeout(2000);
 
     // Now dispatch
     await page.dispatchEvent(

src/frontend/tests/end-to-end/inputComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(8000);
+  test.setTimeout(120000);
+});
 test("InputComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("InputComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
 

src/frontend/tests/end-to-end/intComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(9000);
+  test.setTimeout(120000);
+});
 test("IntComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,13 +10,16 @@ test("IntComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
 
   await page.waitForTimeout(2000);
 
   await page
-    .getByTestId("modelsOpenAI Model")
+    .getByTestId("modelsOpenAI")
     .first()
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();

src/frontend/tests/end-to-end/keyPairListComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(20000);
+  test.setTimeout(120000);
+});
 test("KeypairListComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("KeypairListComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("csv");
 
@@ -41,32 +47,14 @@ test("KeypairListComponent", async ({ page }) => {
   }
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair1"]').click();
+  await page.locator('//*[@id="keypair0"]').click();
-  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest1");
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair101"]').click();
+  const keyPairVerification = page.locator('//*[@id="keypair100"]');
-  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="plusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair2"]').click();
-  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair102"]').click();
-  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="minusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  const keyPairVerification = page.locator('//*[@id="keypair102"]');
   const elementKeyCount = await keyPairVerification.count();
 
-  if (elementKeyCount === 0) {
+  if (elementKeyCount === 1) {
     expect(true).toBeTruthy();
   } else {
     expect(false).toBeTruthy();
@@ -103,53 +91,22 @@ test("KeypairListComponent", async ({ page }) => {
 
     await page.locator('//*[@id="editNodekeypair0"]').click();
     await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
-    await page.locator('//*[@id="editNodekeypair100"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair100"]')
-      .fill("test test test test test test");
 
-    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+    const keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
-    const elementCount = await plusButtonLocator.count();
-    if (elementCount > 0) {
-      await plusButtonLocator.click();
-    }
-
-    await page.locator('//*[@id="editNodekeypair1"]').click();
-    await page.locator('//*[@id="editNodekeypair1"]').fill("testtesttesttest1");
-    await page.locator('//*[@id="editNodekeypair101"]').first().click();
-    await page
-      .locator('//*[@id="editNodekeypair101"]')
-      .fill("testtesttesttesttesttest1");
-    await page.locator('//*[@id="editNodeplusbtn1"]').click();
-
-    await page.locator('//*[@id="editNodekeypair2"]').click();
-    await page.locator('//*[@id="editNodekeypair2"]').fill("testtesttesttest2");
-    await page.locator('//*[@id="editNodekeypair102"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair102"]')
-      .fill("testtesttesttesttesttest2");
-
-    await page.locator('//*[@id="editNodeminusbtn1"]').click();
-
-    const keyPairVerification = page.locator('//*[@id="editNodekeypair102"]');
     const elementKeyCount = await keyPairVerification.count();
 
-    if (elementKeyCount === 0) {
+    if (elementKeyCount === 1) {
       await page.locator('//*[@id="saveChangesBtn"]').click();
 
       await page.getByTestId("div-generic-node").click();
 
       const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
       const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
-      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
-      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
       await page.getByTestId("div-generic-node").click();
 
       if (
         key1 === "testtesttesttest" &&
-        value1 === "test test test test test test" &&
+        value1 === "test test test test test test"
-        key2 === "testtesttesttest2" &&
-        value2 === "testtesttesttesttesttest2"
       ) {
         expect(true).toBeTruthy();
       } else {

src/frontend/tests/end-to-end/langflowShortcuts.spec.ts

@@ -0,0 +1,90 @@
+import { expect, test } from "@playwright/test";
+import uaParser from "ua-parser-js";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(11000);
+  test.setTimeout(120000);
+});
+test("LangflowShortcuts", async ({ page }) => {
+  const getUA = await page.evaluate(() => navigator.userAgent);
+  const userAgentInfo = uaParser(getUA);
+  let control = "Control";
+
+  if (userAgentInfo.os.name.includes("Mac")) {
+    control = "Meta";
+  }
+
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llamacpp");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="model_specsLlamaCpp"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press(`${control}+e`);
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press(`${control}+d`);
+
+  let numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press(`${control}+c`);
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press(`${control}+v`);
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press(`${control}+x`);
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 0) {
+    expect(false).toBeTruthy();
+  }
+  await page.keyboard.press(`${control}+v`);
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/end-to-end/nestedComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(12000);
+  test.setTimeout(120000);
+});
 test("NestedComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("NestedComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
 

src/frontend/tests/end-to-end/promptModalComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(13000);
+  test.setTimeout(120000);
+});
 test("PromptTemplateComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,13 +10,16 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
 
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="promptsPrompt"]')
+    .locator('//*[@id="inputsPrompt"]')
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -55,7 +61,6 @@ test("PromptTemplateComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page.getByTestId("more-options-modal").click();
   await page.getByTestId("save-button-modal").click();
 
   const replace = await page.getByTestId("replace-button");

src/frontend/tests/end-to-end/saveComponents.spec.ts

@@ -1,6 +1,9 @@
 import { Page, expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(14000);
+  test.setTimeout(120000);
+});
 test.describe("save component tests", () => {
   async function saveComponent(page: Page, pattern: RegExp, n: number) {
     for (let i = 0; i < n; i++) {
@@ -14,6 +17,9 @@ test.describe("save component tests", () => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",

src/frontend/tests/end-to-end/toggleComponent.spec.ts

@@ -1,5 +1,8 @@
 import { expect, test } from "@playwright/test";
-
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(15000);
+  test.setTimeout(120000);
+});
 test("ToggleComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
@@ -7,6 +10,9 @@ test("ToggleComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directoryLoader");