From 735c1808b22d1b1c176501c5c05d45b6b4d5e45e Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 27 Mar 2024 16:11:59 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(parameterComponent/index.tsx):=20a?=
 =?UTF-8?q?dd=20data-testid=20attributes=20to=20improve=20testability=20an?=
 =?UTF-8?q?d=20accessibility=20=E2=9C=A8=20(codeTabsComponent/index.tsx):?=
 =?UTF-8?q?=20add=20componentName=20prop=20to=20InputListComponent=20to=20?=
 =?UTF-8?q?improve=20testability=20and=20accessibility=20=E2=9C=A8=20(inpu?=
 =?UTF-8?q?tListComponent/index.tsx):=20add=20componentName=20prop=20to=20?=
 =?UTF-8?q?improve=20testability=20and=20accessibility=20=E2=9C=A8=20(text?=
 =?UTF-8?q?AreaComponent/index.tsx):=20add=20data-testid=20attribute=20to?=
 =?UTF-8?q?=20IconComponent=20to=20improve=20testability=20and=20accessibi?=
 =?UTF-8?q?lity=20=E2=9C=A8=20(EditNodeModal/index.tsx):=20add=20component?=
 =?UTF-8?q?Name=20prop=20to=20InputListComponent=20to=20improve=20testabil?=
 =?UTF-8?q?ity=20and=20accessibility=20=E2=9C=A8=20(DisclosureComponent/in?=
 =?UTF-8?q?dex.tsx):=20add=20data-testid=20attribute=20to=20Disclosure.But?=
 =?UTF-8?q?ton=20to=20improve=20testability=20and=20accessibility=20?=
 =?UTF-8?q?=E2=9C=A8=20(components/index.ts):=20add=20componentName=20prop?=
 =?UTF-8?q?=20to=20InputListComponentType=20to=20improve=20testability=20a?=
 =?UTF-8?q?nd=20accessibility=20=E2=9C=A8=20(codeAreaModalComponent.spec.t?=
 =?UTF-8?q?s):=20reduce=20wait=20time=20for=20better=20test=20performance?=
 =?UTF-8?q?=20=E2=9C=A8=20(dragAndDrop.spec.ts):=20reduce=20wait=20time=20?=
 =?UTF-8?q?for=20better=20test=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ (dropdownComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (dropdownComponent.spec.ts): add new test file filterEdge.spec.ts to test filtering functionality in dropdown component
✅ (filterEdge.spec.ts): add tests for tooltip and filter functionality in dropdown component

✅ (floatComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (flowPage.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (group.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (inputComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance

✨ (inputListComponent.spec.ts): add end-to-end test for InputListComponent to ensure proper functionality
✨ (intComponent.spec.ts): add end-to-end test for IntComponent to ensure proper functionality
✨ (keyPairListComponent.spec.ts): add end-to-end test for KeyPairListComponent to ensure proper functionality
✨ (nestedComponent.spec.ts): add end-to-end test for NestedComponent to ensure proper functionality

✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (textAreaModalComponent.spec.ts): add test for TextAreaModalComponent
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
---
 .../components/parameterComponent/index.tsx   |  33 ++-
 .../components/codeTabsComponent/index.tsx    |   8 +
 .../components/inputListComponent/index.tsx   |  15 ++
 .../components/textAreaComponent/index.tsx    |   3 +-
 .../src/modals/EditNodeModal/index.tsx        |   6 +
 .../components/DisclosureComponent/index.tsx  |   5 +-
 src/frontend/src/types/components/index.ts    |   1 +
 .../end-to-end/codeAreaModalComponent.spec.ts |  10 +-
 .../tests/end-to-end/dragAndDrop.spec.ts      |   2 +-
 .../end-to-end/dropdownComponent.spec.ts      |   8 +-
 .../tests/end-to-end/filterEdge.spec.ts       | 229 ++++++++++++++++++
 .../tests/end-to-end/floatComponent.spec.ts   |   8 +-
 .../tests/end-to-end/flowPage.spec.ts         |   8 +-
 src/frontend/tests/end-to-end/group.spec.ts   |   4 +-
 .../tests/end-to-end/inputComponent.spec.ts   |   8 +-
 .../end-to-end/inputListComponent.spec.ts     | 182 ++++++++++++++
 .../tests/end-to-end/intComponent.spec.ts     |   8 +-
 .../end-to-end/keyPairListComponent.spec.ts   |   8 +-
 .../tests/end-to-end/nestedComponent.spec.ts  |   8 +-
 .../end-to-end/promptModalComponent.spec.ts   |  11 +-
 .../tests/end-to-end/saveComponents.spec.ts   |  10 +-
 .../end-to-end/textAreaModalComponent.spec.ts |  66 +++++
 .../tests/end-to-end/toggleComponent.spec.ts  |   8 +-
 23 files changed, 592 insertions(+), 57 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/filterEdge.spec.ts
 create mode 100644 src/frontend/tests/end-to-end/inputListComponent.spec.ts
 create mode 100644 src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 15ab94c16..67747a799 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -245,7 +245,12 @@ export default function ParameterComponent({
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
 
         return (
-          <div key={index}>
+          <div
+            key={index}
+            data-testid={`available-${left ? "input" : "output"}-${
+              item.family
+            }`}
+          >
             {index === 0 && (
               <span>{left ? INPUT_HANDLER_HOVER : OUTPUT_HANDLER_HOVER}</span>
             )}
@@ -269,10 +274,16 @@ export default function ParameterComponent({
                   }}
                 />
               </div>
-              <span className="ps-2 text-xs text-foreground">
+              <span
+                className="ps-2 text-xs text-foreground"
+                data-testid={`tooltip-${nodeNames[item.family] ?? "Other"}`}
+              >
                 {nodeNames[item.family] ?? "Other"}{" "}
                 {item?.display_name && item?.display_name?.length > 0 ? (
-                  <span className="text-xs">
+                  <span
+                    className="text-xs"
+                    data-testid={`tooltip-${item?.display_name}`}
+                  >
                     {" "}
                     {item.display_name === "" ? "" : " - "}
                     {item.display_name.split(", ").length > 2
@@ -289,7 +300,10 @@ export default function ParameterComponent({
                       : item.display_name}
                   </span>
                 ) : (
-                  <span className="text-xs">
+                  <span
+                    className="text-xs"
+                    data-testid={`tooltip-${item?.type}`}
+                  >
                     {" "}
                     {item.type === "" ? "" : " - "}
                     {item.type.split(", ").length > 2
@@ -312,7 +326,9 @@ export default function ParameterComponent({
       });
     } else {
       //@ts-ignore
-      refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
+      refHtml.current = (
+        <span data-testid={`empty-tooltip-filter`}>{TOOLTIP_EMPTY}</span>
+      );
     }
   }
   // If optionalHandle is an empty list, then it is not an optional handle
@@ -336,6 +352,9 @@ export default function ParameterComponent({
             side={left ? "left" : "right"}
           >
             <Handle
+              data-test-id={`handle-${title.toLowerCase()}-${
+                left ? "target" : "source"
+              }`}
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
               key={
@@ -431,6 +450,9 @@ export default function ParameterComponent({
                 side={left ? "left" : "right"}
               >
                 <Handle
+                  data-test-id={`handle-${title.toLowerCase()}-${
+                    left ? "left" : "right"
+                  }`}
                   type={left ? "target" : "source"}
                   position={left ? Position.Left : Position.Right}
                   key={
@@ -476,6 +498,7 @@ export default function ParameterComponent({
                 }
               >
                 <InputListComponent
+                  componentName={name}
                   disabled={disabled}
                   value={
                     !data.node.template[name].value ||
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 736f23d3a..12e652ed3 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -265,6 +265,9 @@ export default function CodeTabsComponent({
                                                   templateField
                                                 ].list ? (
                                                   <InputListComponent
+                                                    componentName={
+                                                      templateField
+                                                    }
                                                     editNode={true}
                                                     disabled={false}
                                                     value={
@@ -719,6 +722,11 @@ export default function CodeTabsComponent({
                                                       ]
                                                     );
                                                   }}
+                                                  isList={
+                                                    node.data.node!.template[
+                                                      templateField
+                                                    ].list ?? false
+                                                  }
                                                 />
                                               </div>
                                             ) : node.data.node.template[
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index b82d37f63..b43c6df86 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -11,6 +11,7 @@ export default function InputListComponent({
   onChange,
   disabled,
   editNode = false,
+  componentName,
 }: InputListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value.length > 0 && value[0] !== "") {
@@ -46,6 +47,10 @@ export default function InputListComponent({
                 newInputList[idx] = event.target.value;
                 onChange(newInputList);
               }}
+              data-testid={
+                `input-list-input${editNode ? "-edit" : ""}_${componentName}-` +
+                idx
+              }
             />
             {idx === value.length - 1 ? (
               <button
@@ -54,6 +59,11 @@ export default function InputListComponent({
                   newInputList.push("");
                   onChange(newInputList);
                 }}
+                data-testid={
+                  `input-list-plus-btn${
+                    editNode ? "-edit" : ""
+                  }_${componentName}-` + idx
+                }
               >
                 <IconComponent
                   name="Plus"
@@ -62,6 +72,11 @@ export default function InputListComponent({
               </button>
             ) : (
               <button
+                data-testid={
+                  `input-list-minus-btn${
+                    editNode ? "-edit" : ""
+                  }_${componentName}-` + idx
+                }
                 onClick={() => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.splice(idx, 1);
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 813f1c672..513f96c5f 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -46,10 +46,11 @@ export default function TextAreaComponent({
           >
             {!editNode && (
               <IconComponent
+                strokeWidth={1.5}
                 id={id}
                 name="ExternalLink"
                 className={
-                  "icons-parameters-comp" +
+                  "icons-parameters-comp w-[1.35rem]" +
                   (disabled ? " text-ring" : " hover:text-accent-foreground")
                 }
               />
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 3fe8a8f13..e78744671 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -205,6 +205,7 @@ const EditNodeModal = forwardRef(
                                     {myData.node.template[templateParam]
                                       .list ? (
                                       <InputListComponent
+                                        componentName={templateParam}
                                         editNode={true}
                                         disabled={disabled}
                                         value={
@@ -347,6 +348,10 @@ const EditNodeModal = forwardRef(
                                           templateParam
                                         );
                                       }}
+                                      isList={
+                                        data.node?.template[templateParam]
+                                          .list ?? false
+                                      }
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
@@ -565,6 +570,7 @@ const EditNodeModal = forwardRef(
 
         <BaseModal.Footer>
           <Button
+            data-test-id="saveChangesBtn"
             id={"saveChangesBtn"}
             className="mt-3"
             onClick={() => {
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index d2ff0eee8..a0b53a9c7 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,7 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="components-disclosure-arrangement">
+            <Disclosure.Button
+              className="components-disclosure-arrangement"
+              data-testid={`disclosure-${title.toLocaleLowerCase()}`}
+            >
               <div className="flex gap-4">
                 {/* BUG ON THIS ICON */}
                 <Icon strokeWidth={1.5} size={22} className="text-primary" />
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index f14a8bb9e..6e62dfcf5 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -62,6 +62,7 @@ export type InputListComponentType = {
   onChange: (value: string[]) => void;
   disabled: boolean;
   editNode?: boolean;
+  componentName?: string;
 };
 
 export type KeyPairListComponentType = {
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 1ee611fc4..b15d0ce1f 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -1,22 +1,22 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
   test.setTimeout(120000);
 });
 test("CodeAreaModalComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pythonfunctiontool");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("toolsPythonFunctionTool")
diff --git a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
index bcaa08db0..d862fcce0 100644
--- a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
+++ b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
@@ -36,7 +36,7 @@ test.describe("drag and drop test", () => {
     );
 
     await page.getByText("Edit Flow").first().click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const genericNoda = page.getByTestId("div-generic-node");
     const elementCount = await genericNoda.count();
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index 31afd7614..453d06b74 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("dropDownComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("model_specsAmazon Bedrock")
diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts
new file mode 100644
index 000000000..764880693
--- /dev/null
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@@ -0,0 +1,229 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(23000);
+  test.setTimeout(120000);
+});
+test("LLMChain - Tooltip", 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("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("available-input-model_specs").first()
+      ).toBeVisible();
+
+      await expect(page.getByTestId("tooltip-Models").first()).toBeVisible();
+
+      await expect(
+        page.getByTestId("tooltip-AzureOpenAIModel").first()
+      ).toBeVisible();
+
+      await expect(
+        page.getByTestId("tooltip-Model Specs").first()
+      ).toBeVisible();
+
+      await page.getByTestId("icon-X").click();
+      await page.waitForTimeout(500);
+    });
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("available-input-memories").first()
+      ).toBeVisible();
+
+      await expect(page.getByTestId("tooltip-Memories").first()).toBeVisible();
+
+      await expect(
+        page
+          .getByTestId(
+            "tooltip-ConversationBufferMemory, ConversationBufferWindowMemory, ConversationEntityMemory, ConversationKGMemory, ConversationSummaryMemory, MotorheadMemory, VectorStoreRetrieverMemory"
+          )
+          .first()
+      ).toBeVisible();
+      await page.getByTestId("icon-Search").click();
+
+      await page.waitForTimeout(500);
+    });
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("empty-tooltip-filter").first()
+      ).toBeVisible();
+    });
+});
+
+test("LLMChain - Filter", 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("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+
+  await page.waitForTimeout(500);
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .click();
+  await page.getByTestId("icon-Search").click();
+
+  await expect(page.getByTestId("disclosure-models")).toBeVisible();
+  await expect(page.getByTestId("disclosure-model specs")).toBeVisible();
+
+  await expect(page.getByTestId("modelsAzureOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropic")).toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropicLLM")).toBeVisible();
+  await expect(page.getByTestId("model_specsAzureChatOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsCohere")).toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsGoogle Generative AI")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsHugging Face Inference API")
+  ).toBeVisible();
+  await expect(page.getByTestId("model_specsLlamaCpp")).toBeVisible();
+  await expect(page.getByTestId("model_specsOllama")).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsQianfanChatEndpoint")
+  ).toBeVisible();
+  await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
+  await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
+
+  await page.getByPlaceholder("Search").click();
+
+  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
+  await expect(page.getByTestId("modelsAzureOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropicLLM")).not.toBeVisible();
+  await expect(
+    page.getByTestId("model_specsAzureChatOpenAI")
+  ).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCohere")).not.toBeVisible();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .click();
+
+  await expect(page.getByTestId("disclosure-memories")).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferWindowMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationEntityMemory")
+  ).toBeVisible();
+  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
+  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationSummaryMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesVectorStoreRetrieverMemory")
+  ).toBeVisible();
+
+  await page.getByTestId("rf__wrapper").click();
+
+  await expect(
+    page.getByTestId("memoriesConversationBufferMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferWindowMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationEntityMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationKGMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationKGMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationSummaryMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesVectorStoreRetrieverMemory")
+  ).not.toBeVisible();
+});
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index ec4363b38..93eebdeee 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("FloatComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llamacpp");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .locator('//*[@id="model_specsLlamaCpp"]')
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index 69f812f8a..fcdde876e 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -12,18 +12,18 @@ test.describe("Flow Page tests", () => {
 
   test("save", async ({ page }) => {
     await page.goto("http://localhost:3000/");
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.locator('//*[@id="new-project-btn"]').click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
 
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page
       .locator('//*[@id="helpersCustom Component"]')
diff --git a/src/frontend/tests/end-to-end/group.spec.ts b/src/frontend/tests/end-to-end/group.spec.ts
index fe717b8f8..db3c4bebc 100644
--- a/src/frontend/tests/end-to-end/group.spec.ts
+++ b/src/frontend/tests/end-to-end/group.spec.ts
@@ -11,7 +11,7 @@ test.describe("group node test", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
@@ -30,7 +30,7 @@ test.describe("group node test", () => {
       return dt;
     }, jsonContent);
 
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // 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 a5aea8fa2..c9be592ad 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("InputComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("vectorstoresChroma")
diff --git a/src/frontend/tests/end-to-end/inputListComponent.spec.ts b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
new file mode 100644
index 000000000..03fb91fff
--- /dev/null
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@@ -0,0 +1,182 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(21000);
+  test.setTimeout(120000);
+});
+test("InputListComponent", 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("astradb search");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("vectorstoresAstraDB Search")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  expect(
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+  ).toBeFalsy();
+  await page.getByTestId("showmetadata_indexing_exclude").click();
+  expect(
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+  ).toBeTruthy();
+
+  expect(
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
+  ).toBeFalsy();
+  await page.getByTestId("showmetadata_indexing_include").click();
+  expect(
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
+  ).toBeTruthy();
+
+  await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-0")
+    .fill("test test test test");
+
+  await page
+    .getByTestId("input-list-plus-btn-edit_metadata_indexing_include-0")
+    .click();
+
+  await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-1")
+    .fill("test1 test1 test1 test1");
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .fill("test test test test");
+
+  const value0 = await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .inputValue();
+  const value1 = await page
+    .getByTestId("input-list-input_metadata_indexing_include-1")
+    .inputValue();
+
+  if (
+    value0 !== "test test test test" ||
+    value1 !== "test1 test1 test1 test1"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-minus-btn_metadata_indexing_include-0")
+    .click();
+
+  const plusButtonLocator = page.getByTestId(
+    "input-list-plus-btn_metadata_indexing_include-1"
+  );
+  const elementCount = await plusButtonLocator.count();
+
+  if (elementCount > 0) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-0")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-1")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-2")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-3")
+    .click();
+
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .fill("test test test test");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-1")
+    .fill("test1 test1 test1 test1");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-2")
+    .fill("test2 test2 test2 test2");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-3")
+    .fill("test3 test3 test3 test3");
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  const value0Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-0")
+    .inputValue();
+  const value1Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-1")
+    .inputValue();
+  const value2Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-2")
+    .inputValue();
+  const value3Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-3")
+    .inputValue();
+
+  if (
+    value0Edit !== "test test test test" ||
+    value1Edit !== "test1 test1 test1 test1" ||
+    value2Edit !== "test2 test2 test2 test2" ||
+    value3Edit !== "test3 test3 test3 test3"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-0")
+    .click();
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-1")
+    .click();
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-1")
+    .click();
+
+  const plusButtonLocatorEdit0 = await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-0"
+  );
+  const elementCountEdit0 = await plusButtonLocatorEdit0.count();
+
+  const plusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-2"
+  );
+  const elementCountEdit2 = await plusButtonLocatorEdit2.count();
+
+  if (elementCountEdit0 > 0 || elementCountEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+
+  const minusButtonLocatorEdit1 = await page.getByTestId(
+    "input-list-minus-btn-edit_metadata_indexing_include-1"
+  );
+
+  const elementCountMinusEdit1 = await minusButtonLocatorEdit1.count();
+
+  const minusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-minus-btn-edit_metadata_indexing_include-2"
+  );
+
+  const elementCountMinusEdit2 = await minusButtonLocatorEdit2.count();
+
+  if (elementCountMinusEdit1 > 0 || elementCountMinusEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+});
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index c591cab51..53a62ea31 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("IntComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("modelsOpenAI")
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 53d454359..64f8e6cf1 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("KeypairListComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("csv");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("documentloadersCSVLoader")
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 3eed92059..2f4d2e748 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("NestedComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("vectorstoresPinecone")
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index cadf3a088..d0bcee7de 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("PromptTemplateComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .locator('//*[@id="inputsPrompt"]')
@@ -63,7 +63,8 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.getByTestId("save-button-modal").click();
 
-  const replace = await page.getByTestId("replace-button");
+  const replace = await page.getByTestId("replace-button").isVisible();
+
   if (replace) {
     await page.getByTestId("replace-button").click();
   }
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index c9a692553..cebf7046d 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -18,7 +18,7 @@ test.describe("save component tests", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
@@ -37,7 +37,7 @@ test.describe("save component tests", () => {
       return dt;
     }, jsonContent);
 
-    page.waitForTimeout(2000);
+    page.waitForTimeout(1000);
 
     // Now dispatch
     await page.dispatchEvent(
@@ -85,15 +85,15 @@ test.describe("save component tests", () => {
     await page.getByTestId("title-Group").click();
     await page.getByTestId("icon-SaveAll").click();
 
-    const replaceButton = page.getByTestId("replace-button");
+    const replaceButton = await page.getByTestId("replace-button").isVisible();
 
     if (replaceButton) {
-      await replaceButton.click();
+      await page.getByTestId("replace-button").click();
     }
 
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("group");
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page
       .getByTestId("saved_componentsGroup")
diff --git a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
new file mode 100644
index 000000000..9d14ae30f
--- /dev/null
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(26000);
+  test.setTimeout(120000);
+});
+test("TextAreaModalComponent", 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("prompt");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="inputsPrompt"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("prompt-input-template").click();
+
+  await page.getByTestId("modal-prompt-input-template").fill("{text}");
+
+  let valueBadgeOne = await page.locator('//*[@id="badge0"]').innerText();
+  if (valueBadgeOne != "text") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page
+    .getByTestId("textarea-text")
+    .fill(
+      "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
+    );
+
+  await page.getByTestId("textarea-text-ExternalLink").click();
+
+  await page.waitForTimeout(500);
+
+  const value = await page.getByTestId("text-area-modal").inputValue();
+
+  if (
+    value !=
+    "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("text-area-modal").fill("test123123");
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  const valueTextArea = await page.getByTestId("textarea-text").inputValue();
+
+  if (valueTextArea != "test123123") {
+    expect(false).toBeTruthy();
+  }
+});
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index 7875261a4..611d01c49 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("ToggleComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directoryLoader");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
   await page
     .getByTestId("documentloadersDirectoryLoader")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));