test: Add utility functions to streamline test setup and improve maintainability (#5168)

* change tests to use utils libs

* 🔧 (frontend): add data-testid attribute to buttons in baseModal and secretKeyModal components
🔧 (frontend): add data-testid attribute to buttons in various test files for improved testing
🔧 (frontend): refactor awaitBootstrapTest function to remove skipNewFlow option and improve modal handling

* ✅ (userSettings.spec.ts): add a 1-second timeout before checking for the "Please save" text to ensure it is rendered on the page before interacting with it

* ✅ (userSettings.spec.ts): add comment to clarify waiting for API key creation to complete before proceeding to the next form element

* ✨ (freeze-path.spec.ts): refactor adjustScreenView function to accept a parameter for the number of zoom outs to perform, improving flexibility and reusability in test scenarios.
🔧 (freeze-path.spec.ts): replace adjustScreenView function with initialGPTsetup function for setting up initial GPT configuration in the test scenario.

src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts

@@ -1,35 +1,12 @@
 import { test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "select and delete a flow",
   { tag: ["@release", "@api"] },
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
+    await awaitBootstrapTest(page);
 
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
@@ -61,32 +38,8 @@ test(
 );
 
 test("search flows", { tag: ["@release"] }, async ({ page }) => {
-  await page.goto("/");
-  await page.waitForSelector('[data-testid="mainpage_title"]', {
-    timeout: 30000,
-  });
+  await awaitBootstrapTest(page);
 
-  await page.waitForSelector('[id="new-project-btn"]', {
-    timeout: 30000,
-  });
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Flow", { exact: true }).click();
-    await page.waitForSelector('[data-testid="modal-title"]', {
-      timeout: 3000,
-    });
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
@@ -122,32 +75,8 @@ test("search flows", { tag: ["@release"] }, async ({ page }) => {
 });
 
 test("search components", { tag: ["@release"] }, async ({ page }) => {
-  await page.goto("/");
-  await page.waitForSelector('[data-testid="mainpage_title"]', {
-    timeout: 30000,
-  });
+  await awaitBootstrapTest(page);
 
-  await page.waitForSelector('[id="new-project-btn"]', {
-    timeout: 30000,
-  });
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Flow", { exact: true }).click();
-    await page.waitForSelector('[data-testid="modal-title"]', {
-      timeout: 3000,
-    });
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 

src/frontend/tests/core/features/auto-login-off.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "when auto_login is false, admin can CRUD user's and should see just your own flows",
@@ -115,23 +116,7 @@ test(
       timeout: 30000,
     });
 
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 30000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page, { skipGoto: true });
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
@@ -204,19 +189,7 @@ test(
       ).isVisible(),
     );
 
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 30000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
-
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    await page.getByText("New Flow", { exact: true }).click();
+    await awaitBootstrapTest(page, { skipGoto: true });
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();

src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts

@@ -2,6 +2,8 @@ import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import { readFileSync } from "fs";
 import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
 
 test(
   "user must be able to send an image on chat",
@@ -16,25 +18,7 @@ test(
       dotenv.config({ path: path.resolve(__dirname, "../../.env") });
     }
 
-    await page.goto("/");
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
@@ -42,38 +26,7 @@ test(
       timeout: 100000,
     });
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-
-    let outdatedComponents = await page
-      .getByTestId("icon-AlertTriangle")
-      .count();
-
-    while (outdatedComponents > 0) {
-      await page.getByTestId("icon-AlertTriangle").first().click();
-      await page.waitForSelector('[data-testid="icon-AlertTriangle"]', {
-        timeout: 1000,
-      });
-      outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
-    }
-
-    let filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    while (filledApiKey > 0) {
-      await page.getByTestId("remove-icon-badge").first().click();
-      filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    }
-
-    const apiKeyInput = page.getByTestId("popover-anchor-input-api_key");
-    const isApiKeyInputVisible = await apiKeyInput.isVisible();
-
-    if (isApiKeyInputVisible) {
-      await apiKeyInput.fill(process.env.OPENAI_API_KEY ?? "");
-    }
-
-    await page.getByTestId("dropdown_str_model_name").click();
-    await page.getByTestId("gpt-4o-1-option").click();
+    await initialGPTsetup(page);
 
     await page.waitForSelector("text=Chat Input", { timeout: 30000 });
 

src/frontend/tests/core/features/componentHoverAdd.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user can add components by hovering and clicking the plus icon",
@@ -6,28 +7,7 @@ test(
 
   async ({ page }) => {
     // Navigate to homepage and handle initial modal
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     // Start with blank flow
     await page.getByTestId("blank-flow").click();

src/frontend/tests/core/features/filterEdge-shard-0.spec.ts

@@ -1,27 +1,12 @@
 import { expect, test } from "@playwright/test";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user must see on handle hover a tooltip with possibility connections",
   { tag: ["@release", "@components", "@api"] },
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForTimeout(1000);
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForTimeout(3000);
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("blank-flow").click();
     await page.getByTestId("sidebar-search-input").click();
@@ -41,10 +26,7 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
 
     const outputElements = await page
       .getByTestId("handle-retrievalqa-shownode-text-right")
@@ -76,10 +58,7 @@ test(
       ).toBeVisible();
     });
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
 
     const rqaChainInputElements1 = await page
       .getByTestId("handle-retrievalqa-shownode-language model-left")
@@ -109,10 +88,7 @@ test(
         page.getByTestId("input-tooltip-languagemodel").first(),
       ).toBeVisible();
     });
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
 
     const rqaChainInputElements0 = await page
       .getByTestId("handle-retrievalqa-shownode-retriever-left")
@@ -143,10 +119,7 @@ test(
       ).toBeVisible();
     });
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
 
     const rqaChainInputElements2 = await page
       .getByTestId("handle-retrievalqa-shownode-memory-left")

src/frontend/tests/core/features/filterSidebar.spec.ts

@@ -1,36 +1,14 @@
 import { expect, test } from "@playwright/test";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user must see on handle click the possibility connections",
   { tag: ["@release", "@components", "@api"] },
 
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
+    await awaitBootstrapTest(page);
 
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
     await page.waitForSelector('[data-testid="blank-flow"]', {
       timeout: 3000,
     });
@@ -51,10 +29,8 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
+
     await page.waitForSelector(
       '[data-testid="handle-apirequest-shownode-urls-left"]',
       {

src/frontend/tests/core/features/folders.spec.ts

@@ -1,37 +1,14 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "CRUD folders",
   { tag: ["@release", "@api"] },
 
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
+    await awaitBootstrapTest(page);
 
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
@@ -147,32 +124,8 @@ test("add a flow into a folder by drag and drop", async ({ page }) => {
 });
 
 test("change flow folder", async ({ page }) => {
-  await page.goto("/");
-  await page.waitForSelector('[data-testid="mainpage_title"]', {
-    timeout: 30000,
-  });
+  await awaitBootstrapTest(page);
 
-  await page.waitForSelector('[id="new-project-btn"]', {
-    timeout: 30000,
-  });
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Flow", { exact: true }).click();
-    await page.waitForSelector('[data-testid="modal-title"]', {
-      timeout: 3000,
-    });
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -1,6 +1,8 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
 
 test(
   "user must be able to freeze a path",
@@ -16,68 +18,12 @@ test(
       dotenv.config({ path: path.resolve(__dirname, "../../.env") });
     }
 
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 100000,
-    });
-
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-
-    let outdatedComponents = await page
-      .getByTestId("icon-AlertTriangle")
-      .count();
-
-    while (outdatedComponents > 0) {
-      await page.getByTestId("icon-AlertTriangle").first().click();
-      await page.waitForTimeout(1000);
-      outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
-    }
-
-    //remove all saved api keys
-    let filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    while (filledApiKey > 0) {
-      await page.getByTestId("remove-icon-badge").first().click();
-      filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    }
-
-    const apiKeyInput = page.getByTestId("popover-anchor-input-api_key");
-    const isApiKeyInputVisible = await apiKeyInput.isVisible();
-
-    if (isApiKeyInputVisible) {
-      await apiKeyInput.fill(process.env.OPENAI_API_KEY ?? "");
-    }
+    await initialGPTsetup(page);
 
     await page
       .getByTestId("textarea_str_input_value")

src/frontend/tests/core/features/freeze.spec.ts

@@ -1,36 +1,12 @@
 import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user must be able to freeze a component",
   { tag: ["@release", "@workspace", "@components"] },
 
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("blank-flow").click();
 
@@ -250,8 +226,7 @@ test(
       .getByPlaceholder("Empty")
       .textContent();
 
-    await page.getByText("Close").last().click();
-    await page.getByText("Close").last().click();
+    await page.getByTestId("btn-close-modal").click();
 
     await page.getByTestId("textarea_str_input_value").first().fill(",");
 

src/frontend/tests/core/features/globalVariables.spec.ts

@@ -1,35 +1,13 @@
 import { expect, test } from "@playwright/test";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user must be able to save or delete a global variable",
   { tag: ["@release", "@workspace", "@api"] },
   async ({ page }) => {
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
+    await awaitBootstrapTest(page);
 
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
     await page.waitForSelector('[data-testid="blank-flow"]', {
       timeout: 30000,
     });
@@ -47,14 +25,7 @@ test(
     await page.mouse.up();
     await page.mouse.down();
 
-    await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 100000,
-    });
-
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
 
     const genericName = Math.random().toString();
     const credentialName = Math.random().toString();

src/frontend/tests/core/features/group.spec.ts

@@ -1,4 +1,5 @@
 import { test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test.describe("group node test", () => {
   /// <reference lib="dom"/>
@@ -6,22 +7,7 @@ test.describe("group node test", () => {
     "group and ungroup updating values",
     { tag: ["@release", "@workspace"] },
     async ({ page }) => {
-      await page.goto("/");
-
-      let modalCount = 0;
-      try {
-        const modalTitleElement = await page?.getByTestId("modal-title");
-        if (modalTitleElement) {
-          modalCount = await modalTitleElement.count();
-        }
-      } catch (error) {
-        modalCount = 0;
-      }
-
-      while (modalCount === 0) {
-        await page.getByText("New Flow", { exact: true }).click();
-        modalCount = await page.getByTestId("modal-title")?.count();
-      }
+      await awaitBootstrapTest(page);
 
       await page.getByTestId("side_nav_options_all-templates").click();
       await page

src/frontend/tests/core/features/keyboardComponentSearch.spec.ts

@@ -1,32 +1,12 @@
 import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "user can search and add components using keyboard shortcuts",
   { tag: ["@release", "@workspace"] },
   async ({ page }) => {
     // Navigate to homepage and handle initial modal
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     // Start with blank flow
     await page.getByTestId("blank-flow").click();

src/frontend/tests/core/features/logs.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "should able to see and interact with logs",
@@ -16,32 +17,7 @@ test(
       dotenv.config({ path: path.resolve(__dirname, "../../.env") });
     }
 
-    await page.goto("/");
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();

src/frontend/tests/core/features/playground.spec.ts

@@ -1,6 +1,8 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "fresh start playground",
@@ -10,31 +12,7 @@ test(
       dotenv.config({ path: path.resolve(__dirname, "../../.env") });
     }
 
-    await page.goto("/");
-    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-    await page.waitForSelector('[data-testid="mainpage_title"]', {
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('[id="new-project-btn"]', {
-      timeout: 30000,
-    });
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForTimeout(3000);
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.waitForSelector('[data-testid="blank-flow"]', {
       timeout: 30000,
@@ -52,10 +30,8 @@ test(
     await page.mouse.up();
     await page.mouse.down();
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
+
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
@@ -85,10 +61,8 @@ test(
     await page.mouse.up();
     await page.mouse.down();
 
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
-    await page.getByTestId("zoom_out").click();
+    await adjustScreenView(page);
+
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();

src/frontend/tests/core/features/saveComponents.spec.ts

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test.describe("save component tests", () => {
   /// <reference lib="dom"/>
@@ -8,24 +9,8 @@ test.describe("save component tests", () => {
     { tag: ["@release", "@workspace", "@api"] },
 
     async ({ page }) => {
-      await page.goto("/");
-      let modalCount = 0;
-      try {
-        const modalTitleElement = await page?.getByTestId("modal-title");
-        if (modalTitleElement) {
-          modalCount = await modalTitleElement.count();
-        }
-      } catch (error) {
-        modalCount = 0;
-      }
+      await awaitBootstrapTest(page);
 
-      while (modalCount === 0) {
-        await page.getByText("New Flow", { exact: true }).click();
-        await page.waitForSelector('[data-testid="modal-title"]', {
-          timeout: 3000,
-        });
-        modalCount = await page.getByTestId("modal-title")?.count();
-      }
       await page.waitForSelector('[data-testid="blank-flow"]', {
         timeout: 30000,
       });

src/frontend/tests/core/features/stop-building.spec.ts

@@ -1,41 +1,18 @@
 import { test } from "@playwright/test";
-import uaParser from "ua-parser-js";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 // TODO: fix this test
 test(
   "user must be able to stop a building",
   { tag: ["@release", "@workspace", "@api"] },
   async ({ page }) => {
-    test.skip(true, "Test is flaky");
-    await page.goto("/");
-    // await page.waitForTimeout(2000);
-
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForTimeout(3000);
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
-
-    const getUA = await page.evaluate(() => navigator.userAgent);
-    const userAgentInfo = uaParser(getUA);
-
+    await awaitBootstrapTest(page);
     await page.getByTestId("blank-flow").click();
 
     //first component
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text input");
-    // await page.waitForTimeout(1000);
 
     await page
       .getByTestId("inputsText Input")
@@ -56,7 +33,6 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("url");
-    // await page.waitForTimeout(1000);
 
     await page
       .getByTestId("dataURL")
@@ -77,7 +53,6 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("split text");
-    // await page.waitForTimeout(1000);
 
     await page
       .getByTestId("processingSplit Text")
@@ -98,7 +73,6 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("parse data");
-    // await page.waitForTimeout(1000);
 
     await page
       .getByTestId("processingParse Data")
@@ -119,7 +93,6 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    // await page.waitForTimeout(1000);
 
     await page
       .getByTestId("outputsChat Output")
@@ -142,7 +115,6 @@ test(
 
     while (outdatedComponents > 0) {
       await page.getByTestId("icon-AlertTriangle").first().click();
-      // await page.waitForTimeout(1000);
       outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
     }
 
@@ -251,9 +223,15 @@ class CustomComponent(Component):
 
     await page.getByTestId("title-Custom Component").first().click();
 
-    await page.waitForTimeout(500);
+    await page.waitForSelector('[data-testid="code-button-modal"]', {
+      timeout: 3000,
+    });
+
     await page.getByTestId("code-button-modal").click();
-    await page.waitForTimeout(500);
+
+    await page.waitForSelector('[id="checkAndSaveBtn"]', {
+      timeout: 3000,
+    });
 
     await page.locator("textarea").last().press(`ControlOrMeta+a`);
     await page.keyboard.press("Backspace");
@@ -263,53 +241,17 @@ class CustomComponent(Component):
 
     await page.getByTestId("button_run_custom component").click();
 
-    await page.waitForSelector("text=Building", {
+    await page.waitForSelector("text=running", {
       timeout: 100000,
     });
 
-    await page.waitForSelector('div[class*="animate-border-beam"]', {
-      state: "visible",
-      timeout: 5000,
-    });
-
-    await page.waitForTimeout(1000);
-
-    await page.waitForSelector('div[class*="animate-border-beam"]', {
-      state: "hidden",
-      timeout: 5000,
-    });
-
-    await page.waitForSelector("text=Saved", {
+    await page.waitForSelector('[data-testid="stop_building_button"]', {
       timeout: 100000,
     });
 
-    await page.getByTestId("button_run_custom component").click();
+    await page.getByTestId("stop_building_button").last().click();
 
-    await page.waitForSelector("text=Building", {
-      timeout: 100000,
-    });
-
-    await page.waitForSelector('div[class*="animate-border-beam"]', {
-      state: "visible",
-      timeout: 5000,
-    });
-
-    await page.waitForSelector("text=Building", {
-      timeout: 100000,
-    });
-
-    await page.waitForSelector("text=Saved", {
-      timeout: 100000,
-    });
-
-    await page.getByTestId("button_run_custom component").click();
-
-    await page.waitForSelector('div[class*="animate-border-beam"]', {
-      state: "visible",
-      timeout: 5000,
-    });
-
-    await page.waitForSelector("text=Saved", {
+    await page.waitForSelector("text=build stopped", {
       timeout: 100000,
     });
   },

src/frontend/tests/core/features/store-shard-2.spec.ts

@@ -1,6 +1,7 @@
 import { test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "should filter by tag",
@@ -99,21 +100,10 @@ test("should share component with share button", async ({ page }) => {
 
   await page.getByTestId("icon-ChevronLeft").first().click();
 
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
+  await awaitBootstrapTest(page, {
+    skipGoto: true,
+  });
 
-  while (modalCount === 0) {
-    await page.getByText("New Flow", { exact: true }).click();
-    await page.waitForTimeout(3000);
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
   await page.waitForTimeout(1000);
 
   const randomName = Math.random().toString(36).substring(2);

src/frontend/tests/core/features/tweaksTest.spec.ts

@@ -1,28 +1,12 @@
 import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 test(
   "curl_api_generation",
   { tag: ["@release", "@workspace", "@api"] },
 
   async ({ page, context }) => {
-    await page.goto("/");
-    let modalCount = 0;
-    try {
-      const modalTitleElement = await page?.getByTestId("modal-title");
-      if (modalTitleElement) {
-        modalCount = await modalTitleElement.count();
-      }
-    } catch (error) {
-      modalCount = 0;
-    }
-
-    while (modalCount === 0) {
-      await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForSelector('[data-testid="modal-title"]', {
-        timeout: 3000,
-      });
-      modalCount = await page.getByTestId("modal-title")?.count();
-    }
+    await awaitBootstrapTest(page);
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
@@ -69,32 +53,7 @@ test(
 test("check if tweaks are updating when someothing on the flow changes", async ({
   page,
 }) => {
-  await page.goto("/");
-  await page.waitForSelector('[data-testid="mainpage_title"]', {
-    timeout: 30000,
-  });
-
-  await page.waitForSelector('[id="new-project-btn"]', {
-    timeout: 30000,
-  });
-
-  let modalCount = 0;
-  try {
-    const modalTitleElement = await page?.getByTestId("modal-title");
-    if (modalTitleElement) {
-      modalCount = await modalTitleElement.count();
-    }
-  } catch (error) {
-    modalCount = 0;
-  }
-
-  while (modalCount === 0) {
-    await page.getByText("New Flow", { exact: true }).click();
-    await page.waitForSelector('[data-testid="modal-title"]', {
-      timeout: 3000,
-    });
-    modalCount = await page.getByTestId("modal-title")?.count();
-  }
+  await awaitBootstrapTest(page);
 
   await page.waitForSelector('[data-testid="blank-flow"]', {
     timeout: 30000,