From aaff06316eedc53fcecc3384059446939097fee4 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 26 Jun 2024 11:47:48 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20(playwright.config.ts):=20update=20?=
 =?UTF-8?q?retries=20and=20workers=20configuration=20for=20CI=20?=
 =?UTF-8?q?=F0=9F=92=A1=20(textAreaWrapper):=20add=20data-testid=20attribu?=
 =?UTF-8?q?te=20for=20better=20test=20targeting=20=E2=9C=85=20(actionsMain?=
 =?UTF-8?q?Page.spec.ts):=20add=20waitForSelector=20for=20better=20test=20?=
 =?UTF-8?q?stability=20=E2=9C=85=20(basicExamples.spec.ts):=20replace=20wa?=
 =?UTF-8?q?itForTimeout=20with=20waitForSelector=20=E2=9C=85=20(basicExamp?=
 =?UTF-8?q?les.spec.ts):=20use=20data-testid=20for=20chat=20input=20for=20?=
 =?UTF-8?q?consistency=20=E2=9C=85=20(memoryChatbot.spec.ts):=20replace=20?=
 =?UTF-8?q?waitForTimeout=20with=20waitForSelector=20=E2=9C=85=20(memoryCh?=
 =?UTF-8?q?atbot.spec.ts):=20use=20data-testid=20for=20chat=20input=20for?=
 =?UTF-8?q?=20consistency=20=E2=9C=85=20(documentQA.spec.ts):=20replace=20?=
 =?UTF-8?q?waitForTimeout=20with=20waitForSelector=20=E2=9C=85=20(document?=
 =?UTF-8?q?QA.spec.ts):=20use=20data-testid=20for=20chat=20input=20for=20c?=
 =?UTF-8?q?onsistency=20=E2=9C=85=20(vectorStoreRAG.spec.ts):=20replace=20?=
 =?UTF-8?q?waitForTimeout=20with=20waitForSelector=20=E2=9C=85=20(vectorSt?=
 =?UTF-8?q?oreRAG.spec.ts):=20use=20data-testid=20for=20chat=20input=20for?=
 =?UTF-8?q?=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ (tests): add waitForSelector to ensure elements are loaded before interaction

✅ (tests): add waitForSelector for 'fit view' button in end-to-end tests
---
 src/frontend/playwright.config.ts             |  4 +-
 .../components/textAreaWrapper/index.tsx      |  1 +
 .../tests/end-to-end/actionsMainPage.spec.ts  | 12 +++
 .../tests/end-to-end/basicExamples.spec.ts    | 79 +++++++++++++++----
 .../tests/end-to-end/chatInputOutput.spec.ts  | 11 ++-
 .../end-to-end/chatInputOutputUser.spec.ts    | 21 +++--
 .../tests/end-to-end/filterEdge.spec.ts       |  9 +++
 src/frontend/tests/end-to-end/folders.spec.ts |  4 +-
 .../tests/end-to-end/generalBugs.spec.ts      |  7 +-
 .../tests/end-to-end/globalVariables.spec.ts  |  4 +
 .../tests/end-to-end/inputComponent.spec.ts   |  4 +
 .../tests/end-to-end/intComponent.spec.ts     |  9 +++
 .../end-to-end/langflowShortcuts.spec.ts      |  5 ++
 .../end-to-end/textAreaModalComponent.spec.ts |  4 +
 .../tests/end-to-end/textInputOutput.spec.ts  |  8 ++
 .../tests/end-to-end/toggleComponent.spec.ts  | 12 +++
 .../tests/end-to-end/tweaks_test.spec.ts      |  5 ++
 17 files changed, 173 insertions(+), 26 deletions(-)

diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
index 93f626569..fa1df86e3 100644
--- a/src/frontend/playwright.config.ts
+++ b/src/frontend/playwright.config.ts
@@ -19,9 +19,9 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 3,
   /* Opt out of parallel tests on CI. */
-  workers: 3,
+  workers: 2,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
index 29f88453a..0a9ba4a7e 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx
@@ -45,6 +45,7 @@ const TextAreaWrapper = ({
 
   return (
     <Textarea
+      data-testid="input-chat-playground"
       onFocus={(e) => {
         setInputFocus(true);
         e.target.style.borderTopWidth = "0";
diff --git a/src/frontend/tests/end-to-end/actionsMainPage.spec.ts b/src/frontend/tests/end-to-end/actionsMainPage.spec.ts
index d14feb50a..d941d8a2a 100644
--- a/src/frontend/tests/end-to-end/actionsMainPage.spec.ts
+++ b/src/frontend/tests/end-to-end/actionsMainPage.spec.ts
@@ -89,6 +89,10 @@ test("search components", async ({ page }) => {
   }
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -157,6 +161,11 @@ test("user should be able to download a flow or a component", async ({
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -234,6 +243,9 @@ test("user should be able to duplicate a flow or a component", async ({
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/basicExamples.spec.ts b/src/frontend/tests/end-to-end/basicExamples.spec.ts
index 9984ce931..c5e575529 100644
--- a/src/frontend/tests/end-to-end/basicExamples.spec.ts
+++ b/src/frontend/tests/end-to-end/basicExamples.spec.ts
@@ -22,7 +22,6 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
 
   await page.waitForSelector('[title="fit view"]', {
     timeout: 100000,
@@ -43,7 +42,8 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
     .fill(process.env.OPENAI_API_KEY ?? "");
 
   await page.getByTestId("button_run_chat output").click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
   await page.getByText("built successfully").last().click({
     timeout: 15000,
   });
@@ -53,8 +53,13 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
     .getByText("No input message provided.", { exact: true })
     .last()
     .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
   await page
-    .getByPlaceholder("Send a message...")
+    .getByTestId("input-chat-playground")
     .last()
     .fill("Say hello as a pirate");
   await page.getByTestId("icon-LucideSend").last().click();
@@ -72,7 +77,11 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
 
   await page.getByRole("gridcell").last().isVisible();
   await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
 });
 
 test("Memory Chatbot", async ({ page }) => {
@@ -113,28 +122,40 @@ test("Memory Chatbot", async ({ page }) => {
     .fill(process.env.OPENAI_API_KEY ?? "");
 
   await page.getByTestId("button_run_chat output").click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
   await page.getByText("built successfully").last().click({
     timeout: 15000,
   });
 
   await page.getByText("Playground", { exact: true }).click();
+
   await page
     .getByText("No input message provided.", { exact: true })
     .last()
     .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
   await page
-    .getByPlaceholder("Send a message...")
+    .getByTestId("input-chat-playground")
     .last()
     .fill("Remember that I'm a lion");
   await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
   await page
-    .getByPlaceholder("Send a message...")
+    .getByTestId("input-chat-playground")
     .last()
     .fill("try reproduce the sound I made in words");
   await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
+
+  await page.waitForSelector("text=roar", { timeout: 30000 });
   await page.getByText("roar").last().isVisible();
   await page.getByText("Default Session").last().click();
 
@@ -147,7 +168,10 @@ test("Memory Chatbot", async ({ page }) => {
 
   await page.getByRole("gridcell").last().isVisible();
   await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").last().isVisible();
 });
 
 test("Document QA", async ({ page }) => {
@@ -196,6 +220,8 @@ test("Document QA", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
   await page.getByText("built successfully").last().click({
     timeout: 15000,
   });
@@ -206,8 +232,11 @@ test("Document QA", async ({ page }) => {
     .last()
     .isVisible();
 
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
   await page
-    .getByPlaceholder("Send a message...")
+    .getByTestId("input-chat-playground")
     .last()
     .fill("whats the text in the file?");
   await page.getByTestId("icon-LucideSend").last().click();
@@ -227,7 +256,12 @@ test("Document QA", async ({ page }) => {
 
   await page.getByRole("gridcell").last().isVisible();
   await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
 });
 
 test("Blog Writer", async ({ page }) => {
@@ -354,7 +388,9 @@ test("Vector Store RAG", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Vector Store RAG" }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
@@ -411,18 +447,26 @@ test("Vector Store RAG", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page.getByTestId("button_run_astra db").first().click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
   await page.getByText("built successfully").last().click({
     timeout: 30000,
   });
 
   await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
   await page.getByText("built successfully").last().click({
     timeout: 30000,
   });
 
   await page.getByText("Playground", { exact: true }).click();
 
-  await page.getByPlaceholder("Send a message...").last().fill("hello");
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().fill("hello");
 
   await page.getByTestId("icon-LucideSend").last().click();
 
@@ -443,5 +487,10 @@ test("Vector Store RAG", async ({ page }) => {
 
   await page.getByRole("gridcell").last().isVisible();
   await page.getByTestId("icon-Trash2").first().click();
-  await page.getByPlaceholder("Send a message...").last().isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
 });
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
index abd059cab..3ca3d66e5 100644
--- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -54,6 +54,10 @@ test("chat_io_teste", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -83,8 +87,11 @@ test("chat_io_teste", async ({ page }) => {
 
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").click();
-  await page.getByPlaceholder("Send a message...").fill("teste");
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+  await page.getByTestId("input-chat-playground").fill("teste");
   await page.getByRole("button").nth(1).click();
   const chat_output = page.getByTestId("chat-message-AI-teste");
   const chat_input = page.getByTestId("chat-message-User-teste");
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
index 524312bb3..636d5da71 100644
--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
@@ -29,7 +29,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
@@ -45,7 +47,12 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
 
@@ -137,7 +144,9 @@ test("user must be able to see output inspection", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
@@ -194,7 +203,9 @@ test("user must be able to send an image on chat", async ({ page }) => {
   }
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
 
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
@@ -239,7 +250,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
   );
 
   // Locate the target element
-  const element = await page.getByPlaceholder("Send a message...");
+  const element = await page.getByTestId("input-chat-playground");
 
   // Dispatch the drop event on the target element
   await element.dispatchEvent("drop", { dataTransfer });
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
index e268e032b..cac665c11 100644
--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@@ -35,6 +35,10 @@ test("LLMChain - Tooltip", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -103,6 +107,11 @@ test("LLMChain - Tooltip", async ({ page }) => {
 
       await page.waitForTimeout(500);
     });
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/folders.spec.ts b/src/frontend/tests/end-to-end/folders.spec.ts
index 3e64ac94b..64293728e 100644
--- a/src/frontend/tests/end-to-end/folders.spec.ts
+++ b/src/frontend/tests/end-to-end/folders.spec.ts
@@ -43,7 +43,9 @@ test("CRUD folders", async ({ page }) => {
   const element = await page.getByTestId("input-folder");
   await element.fill("new folder test name");
 
-  await page.getByText("My Projects").last().click();
+  await page.getByText("My Projects").last().click({
+    force: true,
+  });
 
   await page.getByText("new folder test name").last().waitFor({
     state: "visible",
diff --git a/src/frontend/tests/end-to-end/generalBugs.spec.ts b/src/frontend/tests/end-to-end/generalBugs.spec.ts
index ef0bbbb2f..6a2cde7a0 100644
--- a/src/frontend/tests/end-to-end/generalBugs.spec.ts
+++ b/src/frontend/tests/end-to-end/generalBugs.spec.ts
@@ -84,7 +84,12 @@ test("erase button should clear the chat messages", async ({ page }) => {
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
   await page.getByTestId("icon-LucideSend").click();
   let valueUser = await page.getByTestId("sender_name_user").textContent();
 
diff --git a/src/frontend/tests/end-to-end/globalVariables.spec.ts b/src/frontend/tests/end-to-end/globalVariables.spec.ts
index f213dfcec..b8b21ee43 100644
--- a/src/frontend/tests/end-to-end/globalVariables.spec.ts
+++ b/src/frontend/tests/end-to-end/globalVariables.spec.ts
@@ -37,6 +37,10 @@ test("GlobalVariables", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 15cf2a879..142c008b3 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -36,6 +36,10 @@ test("InputComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index b817a243b..10d51732c 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -37,6 +37,10 @@ test("IntComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -68,6 +72,11 @@ test("IntComponent", async ({ page }) => {
   }
 
   await page.getByTestId("title-OpenAI").click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index 6ba57947d..5982a5194 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -46,6 +46,11 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.mouse.down();
 
   await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
index 54cb1f1ad..4f2df19e2 100644
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -42,6 +42,10 @@ test("TextAreaModalComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 40b054c59..6a8c4b246 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -60,6 +60,10 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -109,6 +113,10 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 5c8eef429..2105537e6 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -41,6 +41,10 @@ test("ToggleComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
@@ -58,6 +62,10 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByText("Save Changes", { exact: true }).click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
 
   await page.getByTestId("toggle-load_hidden").click();
@@ -77,6 +85,10 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByTestId("div-generic-node").click();
 
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
diff --git a/src/frontend/tests/end-to-end/tweaks_test.spec.ts b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
index 08b9565dc..fe058e1ea 100644
--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@@ -96,6 +96,11 @@ test("check if tweaks are updating when someothing on the flow changes", async (
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
   await page.getByTitle("fit view").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();