From 2d6a1d193fccbe0ab257ff6b589927251f9922c5 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 8 Mar 2024 18:05:19 -0300
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A7=20fix(NewFlowCard2):=20add=20m?=
 =?UTF-8?q?issing=20data-testid=20attribute=20to=20the=20NewFlowCardCompon?=
 =?UTF-8?q?ent=20to=20improve=20testability=20=F0=9F=94=A7=20fix(nodeToolb?=
 =?UTF-8?q?arComponent):=20add=20missing=20data-testid=20attribute=20to=20?=
 =?UTF-8?q?the=20save=20button=20to=20improve=20testability=20=F0=9F=94=A7?=
 =?UTF-8?q?=20fix(nodeToolbarComponent):=20add=20missing=20data-testid=20a?=
 =?UTF-8?q?ttribute=20to=20the=20edit=20button=20to=20improve=20testabilit?=
 =?UTF-8?q?y=20=F0=9F=94=A7=20fix(nodeToolbarComponent):=20add=20missing?=
 =?UTF-8?q?=20data-testid=20attribute=20to=20the=20duplicate=20button=20to?=
 =?UTF-8?q?=20improve=20testability=20=F0=9F=94=A7=20fix(codeAreaModalComp?=
 =?UTF-8?q?onent.spec):=20add=20click=20on=20the=20blank-flow=20element=20?=
 =?UTF-8?q?before=20performing=20other=20actions=20to=20ensure=20proper=20?=
 =?UTF-8?q?test=20setup=20=F0=9F=94=A7=20fix(dropdownComponent.spec):=20ad?=
 =?UTF-8?q?d=20click=20on=20the=20blank-flow=20element=20before=20performi?=
 =?UTF-8?q?ng=20other=20actions=20to=20ensure=20proper=20test=20setup=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(floatComponent.spec):=20add=20click=20on=20t?=
 =?UTF-8?q?he=20blank-flow=20element=20before=20performing=20other=20actio?=
 =?UTF-8?q?ns=20to=20ensure=20proper=20test=20setup=20=F0=9F=94=A7=20fix(f?=
 =?UTF-8?q?lowPage.spec):=20add=20click=20on=20the=20blank-flow=20element?=
 =?UTF-8?q?=20before=20performing=20other=20actions=20to=20ensure=20proper?=
 =?UTF-8?q?=20test=20setup=20=F0=9F=94=A7=20fix(group.spec):=20add=20click?=
 =?UTF-8?q?=20on=20the=20blank-flow=20element=20before=20performing=20othe?=
 =?UTF-8?q?r=20actions=20to=20ensure=20proper=20test=20setup=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(inputComponent.spec):=20add=20click=20on=20t?=
 =?UTF-8?q?he=20blank-flow=20element=20before=20performing=20other=20actio?=
 =?UTF-8?q?ns=20to=20ensure=20proper=20test=20setup=20=F0=9F=94=A7=20fix(i?=
 =?UTF-8?q?ntComponent.spec):=20add=20click=20on=20the=20blank-flow=20elem?=
 =?UTF-8?q?ent=20before=20performing=20other=20actions=20to=20ensure=20pro?=
 =?UTF-8?q?per=20test=20setup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 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/components/NewFLowCard2/index.tsx     |  1 +
 .../components/nodeToolbarComponent/index.tsx |  5 +-
 .../end-to-end/codeAreaModalComponent.spec.ts |  3 +
 .../end-to-end/dropdownComponent.spec.ts      |  3 +
 .../tests/end-to-end/floatComponent.spec.ts   |  3 +
 .../tests/end-to-end/flowPage.spec.ts         |  5 +-
 src/frontend/tests/end-to-end/group.spec.ts   |  4 +
 .../tests/end-to-end/inputComponent.spec.ts   |  3 +
 .../tests/end-to-end/intComponent.spec.ts     |  5 +-
 .../end-to-end/keyPairListComponent.spec.ts   | 66 +++-------------
 .../end-to-end/langflowShortcuts.spec.ts      | 78 +++++++++++++++++++
 .../tests/end-to-end/nestedComponent.spec.ts  |  3 +
 .../end-to-end/promptModalComponent.spec.ts   |  6 +-
 .../tests/end-to-end/saveComponents.spec.ts   |  3 +
 .../tests/end-to-end/toggleComponent.spec.ts  |  3 +
 15 files changed, 129 insertions(+), 62 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/langflowShortcuts.spec.ts

diff --git a/src/frontend/src/components/NewFLowCard2/index.tsx b/src/frontend/src/components/NewFLowCard2/index.tsx
index 7f364cfef..fb472207e 100644
--- a/src/frontend/src/components/NewFLowCard2/index.tsx
+++ b/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>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 39f5f6660..394d5393e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -343,6 +343,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 "
@@ -410,7 +411,7 @@ export default function NodeToolbarComponent({
             <SelectContent>
               {nodeLength > 0 && (
                 <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
-                  <div className="flex">
+                  <div className="flex" data-testid="edit-button-modal">
                     <IconComponent
                       name="Settings2"
                       className="relative top-0.5 mr-2 h-4 w-4 "
@@ -431,7 +432,7 @@ export default function NodeToolbarComponent({
                 </SelectItem>
               )}
               <SelectItem value={"duplicate"}>
-                <div className="flex" data-testid="save-button-modal">
+                <div className="flex" data-testid="duplicate-button-modal">
                   <IconComponent
                     name="Copy"
                     className="relative top-0.5 mr-2 h-4 w-4"
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 5e509cb01..0994fb898 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -7,6 +7,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");
 
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index e8b462266..32c402725 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -7,6 +7,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");
 
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index a9d21f95a..4216b0888 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -7,6 +7,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");
 
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index 78c7b3280..e3f422f7c 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -13,13 +13,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();
diff --git a/src/frontend/tests/end-to-end/group.spec.ts b/src/frontend/tests/end-to-end/group.spec.ts
index 1bfddaf57..e8ca742cc 100644
--- a/src/frontend/tests/end-to-end/group.spec.ts
+++ b/src/frontend/tests/end-to-end/group.spec.ts
@@ -6,6 +6,10 @@ test.describe("group node test", () => {
   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",
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 5992b7a12..06e177722 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -7,6 +7,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");
 
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 1acd958a7..86ebe59af 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -7,13 +7,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();
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index ad61d1e9f..6f80e5be8 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -7,6 +7,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 +44,14 @@ test("KeypairListComponent", async ({ page }) => {
   }
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair1"]').click();
-  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest1");
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair101"]').click();
-  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 keyPairVerification = page.locator('//*[@id="keypair100"]');
   const elementKeyCount = await keyPairVerification.count();
 
-  if (elementKeyCount === 0) {
+  if (elementKeyCount === 1) {
     expect(true).toBeTruthy();
   } else {
     expect(false).toBeTruthy();
@@ -103,53 +88,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 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 keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
     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" &&
-        key2 === "testtesttesttest2" &&
-        value2 === "testtesttesttesttesttest2"
+        value1 === "test test test test test test"
       ) {
         expect(true).toBeTruthy();
       } else {
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
new file mode 100644
index 000000000..486a66adb
--- /dev/null
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -0,0 +1,78 @@
+import { expect, test } from "@playwright/test";
+
+test("LangflowShortcuts", async ({ page }) => {
+  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();
+  }
+});
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 2cabf2f85..6ee1b7c28 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -7,6 +7,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");
 
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 13c07a36b..46841a6bc 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -7,13 +7,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 +58,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");
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 72912e0e1..d5acac469 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -14,6 +14,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",
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index bdba6e56f..374ecd491 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -7,6 +7,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");
 

From ea8b5faad2a66819c8a427c92b43b567666f46b9 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Sat, 9 Mar 2024 09:30:32 -0300
Subject: [PATCH 2/5] check SO before add keyboard command

---
 src/frontend/package-lock.json                | 24 +++++++++++++++++++
 src/frontend/package.json                     |  1 +
 .../end-to-end/langflowShortcuts.spec.ts      | 22 +++++++++++------
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 791e88f0e..2d61fd033 100644
--- a/src/frontend/package-lock.json
+++ b/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",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 4df74af54..dd865530e 100644
--- a/src/frontend/package.json
+++ b/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"
   }
 }
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index 486a66adb..40e85cb42 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -1,6 +1,14 @@
 import { expect, test } from "@playwright/test";
-
+import uaParser from "ua-parser-js";
 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);
 
@@ -22,11 +30,11 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.mouse.down();
 
   await page.getByTestId("title-LlamaCpp").click();
-  await page.keyboard.press("Control+e");
+  await page.keyboard.press(`${control}+e`);
   await page.locator('//*[@id="saveChangesBtn"]').click();
 
   await page.getByTestId("title-LlamaCpp").click();
-  await page.keyboard.press("Control+d");
+  await page.keyboard.press(`${control}+d`);
 
   let numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
   if (numberOfNodes != 2) {
@@ -46,10 +54,10 @@ test("LangflowShortcuts", async ({ page }) => {
   }
 
   await page.getByTestId("title-LlamaCpp").click();
-  await page.keyboard.press("Control+c");
+  await page.keyboard.press(`${control}+c`);
 
   await page.getByTestId("title-LlamaCpp").click();
-  await page.keyboard.press("Control+v");
+  await page.keyboard.press(`${control}+v`);
 
   numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
   if (numberOfNodes != 2) {
@@ -64,13 +72,13 @@ test("LangflowShortcuts", async ({ page }) => {
   await page.keyboard.press("Backspace");
 
   await page.getByTestId("title-LlamaCpp").click();
-  await page.keyboard.press("Control+x");
+  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");
+  await page.keyboard.press(`${control}+v`);
   numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
   if (numberOfNodes != 1) {
     expect(false).toBeTruthy();

From 92aa159f397302b7d105d1431aa5aca1b08a903a Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 11 Mar 2024 19:07:43 -0300
Subject: [PATCH 3/5] add configuration to run all tests

---
 src/frontend/playwright.config.ts                    |  2 +-
 src/frontend/tests/end-to-end/auto_login.spec.ts     | 12 +++++++++++-
 .../tests/end-to-end/codeAreaModalComponent.spec.ts  |  5 ++++-
 src/frontend/tests/end-to-end/dragAndDrop.spec.ts    |  5 ++++-
 .../tests/end-to-end/dropdownComponent.spec.ts       |  5 ++++-
 src/frontend/tests/end-to-end/floatComponent.spec.ts |  5 ++++-
 src/frontend/tests/end-to-end/flowPage.spec.ts       |  4 ++++
 src/frontend/tests/end-to-end/group.spec.ts          |  7 +++++--
 src/frontend/tests/end-to-end/inputComponent.spec.ts |  5 ++++-
 src/frontend/tests/end-to-end/intComponent.spec.ts   |  5 ++++-
 .../tests/end-to-end/keyPairListComponent.spec.ts    |  5 ++++-
 .../tests/end-to-end/langflowShortcuts.spec.ts       |  4 ++++
 .../tests/end-to-end/nestedComponent.spec.ts         |  5 ++++-
 .../tests/end-to-end/promptModalComponent.spec.ts    |  5 ++++-
 src/frontend/tests/end-to-end/saveComponents.spec.ts |  5 ++++-
 .../tests/end-to-end/toggleComponent.spec.ts         |  5 ++++-
 16 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/frontend/playwright.config.ts b/src/frontend/playwright.config.ts
index a563c65f7..30e7216c0 100644
--- a/src/frontend/playwright.config.ts
+++ b/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 */
diff --git a/src/frontend/tests/end-to-end/auto_login.spec.ts b/src/frontend/tests/end-to-end/auto_login.spec.ts
index 8231e6a29..3208f754f 100644
--- a/src/frontend/tests/end-to-end/auto_login.spec.ts
+++ b/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(1000);
+  test.setTimeout(120000);
+});
 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);
   });
 });
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 0994fb898..1ee611fc4 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
index 6b43f3e03..bcaa08db0 100644
--- a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
+++ b/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 }) => {
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index 32c402725..31afd7614 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index 4216b0888..ec4363b38 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index e3f422f7c..69f812f8a 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/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) {
diff --git a/src/frontend/tests/end-to-end/group.spec.ts b/src/frontend/tests/end-to-end/group.spec.ts
index e8ca742cc..fe717b8f8 100644
--- a/src/frontend/tests/end-to-end/group.spec.ts
+++ b/src/frontend/tests/end-to-end/group.spec.ts
@@ -1,6 +1,9 @@
 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 }) => {
@@ -27,7 +30,7 @@ test.describe("group node test", () => {
       return dt;
     }, jsonContent);
 
-    page.waitForTimeout(2000);
+    await page.waitForTimeout(2000);
 
     // Now dispatch
     await page.dispatchEvent(
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 06e177722..a5aea8fa2 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 86ebe59af..c591cab51 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 6f80e5be8..80e080dd7 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/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(10000);
+  test.setTimeout(120000);
+});
 test("KeypairListComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
index 40e85cb42..e3d2e3916 100644
--- a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -1,5 +1,9 @@
 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);
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 6ee1b7c28..3eed92059 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 46841a6bc..cadf3a088 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/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);
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index d5acac469..c9a692553 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/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++) {
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 374ecd491..7875261a4 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/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);

From 7dc34c9bc6b8371adf5c880b978e667065e99bc6 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 15 Mar 2024 15:07:44 -0300
Subject: [PATCH 4/5] Update run-tests.sh to include environment file in
 backend startup

---
 src/frontend/run-tests.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/run-tests.sh b/src/frontend/run-tests.sh
index ac6117ad6..bb4535f5b 100755
--- a/src/frontend/run-tests.sh
+++ b/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

From 70c083451eac690cdffa4748b35af7971d14936f Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 15 Mar 2024 15:56:13 -0300
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=93=9D=20(index.tsx):=20add=20data-te?=
 =?UTF-8?q?stid=20attributes=20to=20the=20toolbar=20select=20items=20to=20?=
 =?UTF-8?q?improve=20testability=20=E2=99=BB=EF=B8=8F=20(toolbarSelectItem?=
 =?UTF-8?q?/index.tsx):=20remove=20unused=20import=20and=20refactor=20code?=
 =?UTF-8?q?=20to=20include=20data-testid=20attribute=20in=20the=20rendered?=
 =?UTF-8?q?=20element=20=F0=9F=93=9D=20(index.ts):=20add=20dataTestId=20pr?=
 =?UTF-8?q?operty=20to=20the=20toolbarSelectItemProps=20type=20to=20reflec?=
 =?UTF-8?q?t=20the=20addition=20of=20data-testid=20attribute=20in=20the=20?=
 =?UTF-8?q?component=20=F0=9F=93=9D=20(auto=5Flogin.spec.ts):=20increase?=
 =?UTF-8?q?=20timeout=20for=20page.waitForTimeout=20to=2016=20seconds=20an?=
 =?UTF-8?q?d=20test.setTimeout=20to=20140=20seconds=20to=20accommodate=20s?=
 =?UTF-8?q?lower=20test=20execution=20=F0=9F=93=9D=20(keyPairListComponent?=
 =?UTF-8?q?.spec.ts):=20increase=20timeout=20for=20page.waitForTimeout=20t?=
 =?UTF-8?q?o=2020=20seconds=20to=20accommodate=20slower=20test=20execution?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nodeToolbarComponent/index.tsx |  6 +++
 .../toolbarSelectItem/index.tsx               | 37 ++++++++++---------
 src/frontend/src/types/components/index.ts    |  3 +-
 .../tests/end-to-end/auto_login.spec.ts       |  4 +-
 .../end-to-end/keyPairListComponent.spec.ts   |  2 +-
 5 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 755bdc908..f17ad2537 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -453,6 +453,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Edit"}
                     icon={"Settings2"}
+                    dataTestId="edit-button-modal"
                   />
                 </SelectItem>
               )}
@@ -463,6 +464,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Duplicate"}
                   icon={"Copy"}
+                  dataTestId="duplicate-button-modal"
                 />
               </SelectItem>
               <SelectItem value={"copy"}>
@@ -472,6 +474,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Copy"}
                   icon={"Clipboard"}
+                  dataTestId="copy-button-modal"
                 />
               </SelectItem>
               {isOutdated && (
@@ -482,6 +485,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Update"}
                     icon={"Code"}
+                    dataTestId="update-button-modal"
                   />
                 </SelectItem>
               )}
@@ -499,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>
               )}
@@ -523,6 +528,7 @@ export default function NodeToolbarComponent({
                   shift={true}
                   value={"Docs"}
                   icon={"FileText"}
+                  dataTestId="docs-button-modal"
                 />
               </SelectItem>
               {isMinimal && (
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
index 00e31e08a..725248554 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import ForwardedIconComponent from "../../../../../components/genericIconComponent";
 import { toolbarSelectItemProps } from "../../../../../types/components";
 
@@ -9,10 +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}`}
@@ -21,24 +20,28 @@ export default function ToolbarSelectItem({
       {isMac ? (
         <ForwardedIconComponent
           name="Command"
-          className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
+          className={`absolute right-[${
+            shift ? "2rem" : "1.15rem"
+          }] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
         ></ForwardedIconComponent>
       ) : (
-        <span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}>
-            {shift ? (
-              "Ctrl"
-            ) : (
-              "Ctrl +"
-            )}
+        <span
+          className={`absolute right-[${
+            shift ? "2.10rem" : "1.15rem"
+          }] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}
+        >
+          {shift ? "Ctrl" : "Ctrl +"}
         </span>
       )}
-        {shift && (
-          <ForwardedIconComponent
-            name="ArrowBigUp"
-            className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
-          />
-        )}
-        <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span>
+      {shift && (
+        <ForwardedIconComponent
+          name="ArrowBigUp"
+          className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
+        />
+      )}
+      <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>
+        {keyboardKey}
+      </span>
     </div>
   );
 }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 55f33da16..ab32dab62 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -702,5 +702,6 @@ export type toolbarSelectItemProps = {
     ctrlClasses?: string;
     keyClasses?: string;
     valueClasses?: string;
-  }
+  };
+  dataTestId: string;
 };
diff --git a/src/frontend/tests/end-to-end/auto_login.spec.ts b/src/frontend/tests/end-to-end/auto_login.spec.ts
index 3208f754f..7e847cefd 100644
--- a/src/frontend/tests/end-to-end/auto_login.spec.ts
+++ b/src/frontend/tests/end-to-end/auto_login.spec.ts
@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(1000);
-  test.setTimeout(120000);
+  await page.waitForTimeout(16000);
+  test.setTimeout(140000);
 });
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 80e080dd7..53d454359 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(10000);
+  await page.waitForTimeout(20000);
   test.setTimeout(120000);
 });
 test("KeypairListComponent", async ({ page }) => {