Updating Tests and Fixing Related Bugs (#2319)

* 🐛 (tableNodeCellRender): fix templateValue check to use Object.keys ✨ (textAreaComponent): add Case component for conditional rendering ♻️ (editNodeModal): remove commented-out useEffect code ✅ (basicExamples.spec): update test selectors and increase timeout values ✅ (filterEdge.spec.ts): update test IDs to match new naming conventions ✅ (inputListComponent.spec.ts, intComponent.spec.ts): update test IDs and streamline test steps for consistency and clarity ✅ (keyPairListComponent.spec.ts): update test ID for model element ✅ (keyPairListComponent.spec.ts): add steps to test editing model options and saving changes * ✅ (tests): update end-to-end tests for chat input/output and modal components - Update test selectors for better accuracy - Add keyboard interaction in chatInputOutputUser.spec.ts - Improve file handling in chat image upload test - Refine prompt modal component tests for better validation - Enhance twoEdges.spec.ts with additional view controls * ♻️ (tests): refactor repeated click actions into reusable function in e2e tests * ✅ (tests): replace waitForTimeout with waitForSelector in end-to-end tests * ✅ (typescript_test.yml): add --debug flag to Playwright test command for better debugging * ✅ (typescript_test.yml): enable trace option in Playwright tests for better debugging * ✅ (typescript_test.yml): reduce Playwright test workers from 2 to 1 to improve stability ✅ (textInputOutput.spec.ts): add waitFor visibility checks to ensure elements are visible before interaction * ✅ (tests): update paths for test assets to correct locations ✅ (tests): add waitForSelector to ensure elements are loaded before interaction * ✅ (typescript_test.yml): increase Playwright workers from 1 to 2 to speed up tests ✅ (chatInputOutputUser.spec.ts): increase timeout for AI response to 100000ms ✅ (chatInputOutputUser.spec.ts): correct file path for image upload test ✅ (deleteComponentFlows.spec.ts): change waitFor to target last checkbox-component ✅ (store.spec.ts): increase timeout for share button to 100000ms * 🐛 (flows.py): ensure flow names are unique by appending a number if necessary * Apply Ruff formatting --------- Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org> Co-authored-by: Cristhianzl <Cristhianzl@users.noreply.github.com>
2024-06-25 13:23:11 -03:00 · 2024-06-25 13:23:11 -03:00 · 4077135ba7
commit 4077135ba7
parent 2fe2024a58
26 changed files with 381 additions and 222 deletions
--- a/.github/workflows/typescript_test.yml
+++ b/.github/workflows/typescript_test.yml
@ -88,7 +88,7 @@ jobs:
      - name: Run Playwright Tests
        run: |
          cd src/frontend
-          npx playwright test --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
+          npx playwright test --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2

      - name: Upload blob report to GitHub Actions Artifacts
        if: always()
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@ -209,6 +209,23 @@ def update_flow(
        webhook_component = get_webhook_component_in_flow(db_flow.data)
        db_flow.webhook = webhook_component is not None
        db_flow.updated_at = datetime.now(timezone.utc)
+
+        # First check if the flow.name is unique
+        # there might be flows with name like: "MyFlow", "MyFlow (1)", "MyFlow (2)"
+        # so we need to check if the name is unique with `like` operator
+        # if we find a flow with the same name, we add a number to the end of the name
+        # based on the highest number found
+        flow_from_db = session.exec(select(Flow).where(Flow.id == flow_id, Flow.user_id == current_user.id)).first()
+        if flow_from_db:
+            flows = session.exec(
+                select(Flow).where(Flow.name.like(f"{flow.name} (%")).where(Flow.user_id == current_user.id)  # type: ignore
+            ).all()
+            if flows:
+                numbers = [int(flow.name.split("(")[1].split(")")[0]) for flow in flows]
+                flow.name = f"{flow.name} ({max(numbers) + 1})"
+            else:
+                flow.name = f"{flow.name} (1)"
+
        if db_flow.folder_id is None:
            default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
            if default_folder:
--- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@ -153,7 +153,7 @@ export default function TableNodeCellRender({
              disabled={disabled}
              editNode={true}
              value={
-                templateValue?.length === 0 || !templateValue
+                Object.keys(templateValue)?.length === 0 || !templateValue
                  ? [{ "": "" }]
                  : convertObjToArray(templateValue, templateData.type)
              }
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
+import { Case } from "../../shared/components/caseComponent";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
@ -24,29 +25,31 @@ export default function TextAreaComponent({
  return (
    <div className={"flex w-full items-center " + (disabled ? "" : "")}>
      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
-        <Input
-          id={id}
-          data-testid={id}
-          value={value}
-          disabled={disabled}
-          className={editNode ? "input-edit-node w-full" : "w-full"}
-          placeholder={"Type something..."}
-          onChange={(event) => {
-            onChange(event.target.value);
-          }}
-        />
-        <div className="flex items-center">
-          <GenericModal
-            type={TypeModal.TEXT}
-            buttonText="Finish Editing"
-            modalTitle={EDIT_TEXT_MODAL_TITLE}
+        <Case condition={!editNode}>
+          <Input
+            id={id}
+            data-testid={id}
            value={value}
-            setValue={(value: string) => {
-              onChange(value);
-            }}
            disabled={disabled}
-          >
-            {!editNode && (
+            className={editNode ? "input-edit-node w-full" : "w-full"}
+            placeholder={"Type something..."}
+            onChange={(event) => {
+              onChange(event.target.value);
+            }}
+          />
+        </Case>
+        <GenericModal
+          type={TypeModal.TEXT}
+          buttonText="Finish Editing"
+          modalTitle={EDIT_TEXT_MODAL_TITLE}
+          value={value}
+          setValue={(value: string) => {
+            onChange(value);
+          }}
+          disabled={disabled}
+        >
+          {!editNode ? (
+            <div className="flex items-center">
              <Button unstyled>
                <IconComponent
                  strokeWidth={1.5}
@ -58,9 +61,26 @@ export default function TextAreaComponent({
                  }
                />
              </Button>
-            )}
-          </GenericModal>
-        </div>
+            </div>
+          ) : (
+            <Button unstyled className="w-full">
+              <div className="flex w-full items-center gap-3">
+                <span
+                  id={id}
+                  data-testid={id}
+                  className={
+                    editNode
+                      ? "input-edit-node input-dialog"
+                      : (disabled ? "input-disable text-ring " : "") +
+                        " primary-input text-muted-foreground"
+                  }
+                >
+                  {value !== "" ? value : "Type something..."}
+                </span>
+              </div>
+            </Button>
+          )}
+        </GenericModal>
      </div>
    </div>
  );
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@ -65,12 +65,6 @@ const EditNodeModal = forwardRef(
      }
    }, [gridApi, open]);

-    //    useEffect(() => {
-    //      return () => {
-    //        setOpenWDoubleClick(false);
-    //      };
-    //    }, []);
-
    return (
      <BaseModal key={data.id} open={open} setOpen={setOpen}>
        <BaseModal.Trigger>
--- a/src/frontend/tests/end-to-end/basicExamples.spec.ts
+++ b/src/frontend/tests/end-to-end/basicExamples.spec.ts
@ -270,12 +270,12 @@ test("Blog Writer", async ({ page }) => {
      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
    );
  await page
-    .getByTestId("input-list-input_urls-0")
-    .nth(1)
+    .getByTestId("input-list-input_urls-1")
+    .nth(0)
    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");

  await page
-    .getByTestId("textarea-input_value")
+    .getByTestId("popover-anchor-input-input_value")
    .nth(0)
    .fill(
      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
@ -284,7 +284,7 @@ test("Blog Writer", async ({ page }) => {
  await page.getByTestId("button_run_chat output").click();
  await page.waitForTimeout(5000);
  await page.getByText("built successfully").last().click({
-    timeout: 15000,
+    timeout: 30000,
  });

  await page.getByText("Playground", { exact: true }).click();
@ -403,17 +403,14 @@ test("Vector Store RAG", async ({ page }) => {
  await page.getByText("test_file.txt").isVisible();
  await page.waitForTimeout(2000);

-  await page.getByTestId("button_run_astra db vector store").first().click();
-  await page
-    .getByText("Astra DB Vector Store built successfully")
-    .last()
-    .click({
-      timeout: 15000,
-    });
+  await page.getByTestId("button_run_astra db").first().click();
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });

  await page.getByTestId("button_run_chat output").click();
  await page.getByText("built successfully").last().click({
-    timeout: 15000,
+    timeout: 30000,
  });

  await page.getByText("Playground", { exact: true }).click();
@ -427,15 +424,6 @@ test("Vector Store RAG", async ({ page }) => {
    .last()
    .isVisible();

-  await page.getByText("Extracted Chunks", { exact: true }).last().click();
-
-  const inputChunksValues = await page.getByPlaceholder("Empty").inputValue();
-  expect(inputChunksValues).toBe(
-    "this is a test file---this is a test file---this is a test file---this is a test file",
-  );
-
-  await page.getByTestId("icon-ExternalLink").last().click();
-  await page.getByPlaceholder("Send a message...").last().isHidden();
  await page.getByText("Memories", { exact: true }).last().click();
  await page.getByText("Default Session").last().click();

--- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@ -23,7 +23,7 @@ test("chat_io_teste", async ({ page }) => {
  }

  const jsonContent = readFileSync(
-    "src/frontend/tests/end-to-end/assets/ChatTest.json",
+    "tests/end-to-end/assets/ChatTest.json",
    "utf-8",
  );

--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
@ -48,14 +48,21 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
  await page.getByTestId("icon-LucideSend").click();
  let valueUser = await page.getByTestId("sender_name_user").textContent();
+
+  await page.waitForSelector('[data-testid="sender_name_ai"]', {
+    timeout: 100000,
+  });
+
  let valueAI = await page.getByTestId("sender_name_ai").textContent();

  expect(valueUser).toBe("User");
  expect(valueAI).toBe("AI");

+  await page.keyboard.press("Escape");
+
  await page
    .getByTestId("textarea-input_value")
-    .nth(1)
+    .nth(0)
    .fill(
      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
    );
@ -73,11 +80,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
  await page.getByText("Save Changes", { exact: true }).click();

  await page
-    .getByTestId("textarea-sender_name")
+    .getByTestId("popover-anchor-input-sender_name")
    .nth(1)
    .fill("TestSenderNameUser");
  await page
-    .getByTestId("textarea-sender_name")
+    .getByTestId("popover-anchor-input-sender_name")
    .nth(0)
    .fill("TestSenderNameAI");

@ -150,6 +157,10 @@ test("user must be able to see output inspection", async ({ page }) => {

  await page.waitForTimeout(5000);

+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
  await page.getByTestId("icon-ScanEye").nth(4).click();

  await page.getByText("Sender", { exact: true }).isVisible();
@ -206,32 +217,46 @@ test("user must be able to send an image on chat", async ({ page }) => {

  await page.getByText("Playground", { exact: true }).click();

-  const jsonContent = readFileSync(
-    "src/frontend/tests/end-to-end/assets/chain.png",
-    "utf-8",
+  // Read the image file as a binary string
+  const filePath = "tests/end-to-end/assets/chain.png";
+  const fileContent = readFileSync(filePath, "base64");
+
+  // Create the DataTransfer and File objects within the browser context
+  const dataTransfer = await page.evaluateHandle(
+    ({ fileContent }) => {
+      const dt = new DataTransfer();
+      const byteCharacters = atob(fileContent);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const file = new File([byteArray], "chain.png", { type: "image/png" });
+      dt.items.add(file);
+      return dt;
+    },
+    { fileContent },
  );

-  // Create the DataTransfer and File
-  const dataTransfer = await page.evaluateHandle((data) => {
-    const dt = new DataTransfer();
-    // Convert the buffer to a hex array
-    const file = new File([data], "chain.png", {
-      type: "application/json",
-    });
-    dt.items.add(file);
-    return dt;
-  }, jsonContent);
-
+  // Locate the target element
  const element = await page.getByPlaceholder("Send a message...");

+  // Dispatch the drop event on the target element
  await element.dispatchEvent("drop", { dataTransfer });

+  await page.waitForTimeout(4000);
+
  await page.getByText("chain.png").isVisible();
  await page.getByTestId("icon-LucideSend").click();
  await page.waitForTimeout(2000);
  await page.getByText("chain.png").isVisible();

  await page.getByText("Close", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
  await page.getByTestId("icon-ScanEye").nth(4).click();
  await page.getByText("Restart").isHidden();
 });
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@ -31,7 +31,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
  await page.waitForTimeout(1000);

  await page
-    .getByTestId("experimentalPython Function")
+    .getByTestId("prototypesPython Function")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));
  await page.mouse.up();
  await page.mouse.down();
@ -65,19 +65,9 @@ class PythonFunctionComponent(CustomComponent):
  await page.locator("textarea").fill(wCode);
  await page.locator('//*[@id="checkAndSaveBtn"]').click();
  await page.waitForTimeout(1000);
-  // expect(
-  //   await page.getByText("invalid syntax (<unknown>, line 1)").isVisible()
-  // ).toBeTruthy();
  await page.locator("textarea").press("Control+a");
  await page.locator("textarea").fill(wCode);
  await page.locator("textarea").fill(customComponentCode);
  await page.locator('//*[@id="checkAndSaveBtn"]').click();
  await page.waitForTimeout(1000);
-
-  // await page.getByTestId("code-button-modal").click();
-  // const inputCodeValue = await page
-  //   .locator('//*[@id="codeValue"]')
-  //   .inputValue();
-
-  // expect(inputCodeValue).toContain("def python_function(text: str) -> str");
 });
--- a/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
+++ b/src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
@ -17,7 +17,14 @@ test("should delete a flow", async ({ page }) => {
  await page.waitForTimeout(5000);
  await page.getByText("My Collection").nth(0).click();
  await page.getByText("Website Content QA").first().isVisible();
+
+  await page.getByLabel("checkbox-component").last().waitFor({
+    state: "visible",
+    timeout: 30000, // Timeout of 30 seconds
+  });
+
  await page.getByLabel("checkbox-component").first().click();
+
  await page.getByTestId("icon-Trash2").click();
  await page
    .getByText("Are you sure you want to delete the selected component?")
@ -36,6 +43,12 @@ test("should delete a component", async ({ page }) => {
  await page.getByText("My Collection").nth(0).click();
  await page.getByText("Components").first().click();
  await page.getByText("Basic RAG").first().isVisible();
+
+  await page.getByLabel("checkbox-component").last().waitFor({
+    state: "visible",
+    timeout: 30000, // Timeout of 30 seconds
+  });
+
  await page.getByLabel("checkbox-component").first().click();
  await page.getByTestId("icon-Trash2").click();
  await page
--- a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
+++ b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
@ -26,7 +26,7 @@ test.describe("drag and drop test", () => {
    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
    // Read your file into a buffer.
    const jsonContent = readFileSync(
-      "src/frontend/tests/end-to-end/assets/collection.json",
+      "tests/end-to-end/assets/collection.json",
      "utf-8",
    );

--- a/src/frontend/tests/end-to-end/filterEdge.spec.ts
+++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts
@ -44,24 +44,40 @@ test("LLMChain - Tooltip", async ({ page }) => {
    )
    .hover()
    .then(async () => {
-      await expect(page.getByTestId("tooltip-Chains").first()).toBeVisible();
      await expect(
-        page.getByTestId("tooltip-Model Specs").first(),
+        page.getByTestId("available-output-chains").first(),
      ).toBeVisible();
      await expect(
-        page.getByTestId("tooltip-Vector Search").first(),
+        page.getByTestId("available-output-textsplitters").first(),
      ).toBeVisible();
      await expect(
-        page.getByTestId("tooltip-Text Splitters").first(),
+        page.getByTestId("available-output-retrievers").first(),
      ).toBeVisible();
      await expect(
-        page.getByTestId("tooltip-Retrievers").first(),
+        page.getByTestId("available-output-prototypes").first(),
      ).toBeVisible();
-      await expect(page.getByTestId("tooltip-Tools").first()).toBeVisible();
-      await expect(page.getByTestId("tooltip-Memories").first()).toBeVisible();
-      await expect(page.getByTestId("tooltip-Agents").first()).toBeVisible();
-      await expect(page.getByTestId("tooltip-Helpers").first()).toBeVisible();
-      await expect(page.getByTestId("tooltip-Utilities").first()).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-tools").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-memories").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-toolkits").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-chains").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-agents").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-helpers").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-output-langchain_utilities").first(),
+      ).toBeVisible();
+
      await page.getByTestId("icon-X").click();
      await page.waitForTimeout(500);
    });
@ -77,12 +93,10 @@ test("LLMChain - Tooltip", async ({ page }) => {
    .hover()
    .then(async () => {
      await expect(
-        page.getByTestId("tooltip-Model Specs").first(),
+        page.getByTestId("available-input-models").first(),
      ).toBeVisible();
      await page.waitForTimeout(2000);

-      await expect(page.getByTestId("tooltip-Models").first()).toBeVisible();
-
      await page.getByTestId("icon-Search").click();

      await page.waitForTimeout(500);
@ -100,12 +114,18 @@ test("LLMChain - Tooltip", async ({ page }) => {
    .then(async () => {
      await page.waitForTimeout(2000);

-      await expect(page.getByTestId("tooltip-Chains").first()).toBeVisible();
      await expect(
-        page.getByTestId("tooltip-Experimental").first(),
+        page.getByTestId("available-input-chains").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-input-prototypes").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-input-agents").first(),
+      ).toBeVisible();
+      await expect(
+        page.getByTestId("available-input-helpers").first(),
      ).toBeVisible();
-      await expect(page.getByTestId("tooltip-Agents").first()).toBeVisible();
-      await expect(page.getByTestId("tooltip-Helpers").first()).toBeVisible();

      await page.waitForTimeout(500);
    });
@ -176,26 +196,30 @@ test("LLMChain - Filter", async ({ page }) => {
    )
    .click();

-  await expect(page.getByTestId("disclosure-model specs")).toBeVisible();
-  await expect(page.getByTestId("model_specsAnthropic").first()).toBeVisible();
-  await expect(page.getByTestId("model_specsAmazon Bedrock")).toBeVisible();
-  await expect(page.getByTestId("model_specsAzureChatOpenAI")).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("disclosure-models")).toBeVisible();
  await expect(
-    page.getByTestId("model_specsGoogle Generative AI"),
+    page.getByTestId("modelsGoogle Generative AI").first(),
+  ).toBeVisible();
+  await expect(page.getByTestId("chainsLLMChain").first()).toBeVisible();
+  await expect(
+    page.getByTestId("langchain_utilitiesSearchApi").first(),
  ).toBeVisible();
  await expect(
-    page.getByTestId("model_specsHugging Face Inference API"),
+    page.getByTestId("memoriesAstra DB Message Reader").first(),
  ).toBeVisible();
-  await expect(page.getByTestId("model_specsOllama")).toBeVisible();
  await expect(
-    page.getByTestId("model_specsQianfanChatEndpoint"),
+    page.getByTestId("prototypesFlow as Tool").first(),
  ).toBeVisible();
-  await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
-  await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
+  await expect(
+    page.getByTestId("retrieversAmazon Kendra Retriever").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("textsplittersCharacterTextSplitter").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("toolkitsVectorStoreInfo").first(),
+  ).toBeVisible();
+  await expect(page.getByTestId("toolsSearchApi").first()).toBeVisible();

  await page.getByPlaceholder("Search").click();

@ -219,7 +243,6 @@ test("LLMChain - Filter", async ({ page }) => {
    .click();

  await expect(page.getByTestId("disclosure-models")).toBeVisible();
-  await expect(page.getByTestId("disclosure-model specs")).toBeVisible();

  await page
    .locator(
@ -227,10 +250,8 @@ test("LLMChain - Filter", async ({ page }) => {
    )
    .click();

-  await expect(page.getByTestId("disclosure-saved")).toBeVisible();
-
  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
-  await expect(page.getByTestId("disclosure-experimental")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
 });
--- a/src/frontend/tests/end-to-end/folders.spec.ts
+++ b/src/frontend/tests/end-to-end/folders.spec.ts
@ -57,7 +57,7 @@ test("add folder by drag and drop", async ({ page }) => {
  await page.waitForTimeout(2000);

  const jsonContent = readFileSync(
-    "src/frontend/tests/end-to-end/assets/collection.json",
+    "tests/end-to-end/assets/collection.json",
    "utf-8",
  );

--- a/src/frontend/tests/end-to-end/generalBugs.spec.ts
+++ b/src/frontend/tests/end-to-end/generalBugs.spec.ts
@ -85,6 +85,11 @@ test("erase button should clear the chat messages", async ({ page }) => {
  await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
  await page.getByTestId("icon-LucideSend").click();
  let valueUser = await page.getByTestId("sender_name_user").textContent();
+
+  await page.waitForSelector('[data-testid="sender_name_ai"]', {
+    timeout: 30000,
+  });
+
  let valueAI = await page.getByTestId("sender_name_ai").textContent();

  expect(valueUser).toBe("User");
--- a/src/frontend/tests/end-to-end/inputListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputListComponent.spec.ts
@ -24,11 +24,11 @@ test("InputListComponent", async ({ page }) => {
  await page.waitForTimeout(3000);
  await page.getByTestId("extended-disclosure").click();
  await page.getByPlaceholder("Search").click();
-  await page.getByPlaceholder("Search").fill("astradb");
+  await page.getByPlaceholder("Search").fill("url");

  await page.waitForTimeout(1000);
  await page
-    .getByTestId("vectorsearchAstra DB Search")
+    .getByTestId("dataURL")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));
  await page.mouse.up();
  await page.mouse.down();
@ -36,95 +36,71 @@ test("InputListComponent", async ({ page }) => {
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("input-list-input_urls-0").fill("test test test test");
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page
+    .getByTestId("input-list-input_urls-1")
+    .fill("test1 test1 test1 test1");
+
+  await page
+    .getByTestId("input-list-input_urls-2")
+    .fill("test2 test2 test2 test2");
+
  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.getByText("Save Changes", { exact: true }).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")
+    .getByTestId("input-list-input-edit_urls-0")
    .inputValue();
  const value1 = await page
-    .getByTestId("input-list-input_metadata_indexing_include-1")
+    .getByTestId("input-list-input-edit_urls-1")
+    .inputValue();
+
+  const value2 = await page
+    .getByTestId("input-list-input-edit_urls-2")
    .inputValue();

  if (
    value0 !== "test test test test" ||
-    value1 !== "test1 test1 test1 test1"
+    value1 !== "test1 test1 test1 test1" ||
+    value2 !== "test2 test2 test2 test2"
  ) {
    expect(false).toBeTruthy();
  }

-  await page
-    .getByTestId("input-list-minus-btn_metadata_indexing_include-1")
-    .click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();

  const plusButtonLocator = page.getByTestId(
-    "input-list-plus-btn_metadata_indexing_include-1",
+    "input-list-minus-btn-edit_urls-1",
  );
  const elementCount = await plusButtonLocator?.count();

-  if (elementCount > 0) {
+  if (elementCount > 1) {
    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-0")
-    .click();
-  await page
-    .getByTestId("input-list-plus-btn_metadata_indexing_include-0")
-    .click();
-  await page
-    .getByTestId("input-list-plus-btn_metadata_indexing_include-0")
-    .click();
+  await page.getByText("Save Changes", { exact: true }).click();

+  await page.getByTestId("input-list-minus-btn_urls-2").isHidden();
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page.getByTestId("input-list-input_urls-0").fill("test test test test");
  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")
+    .getByTestId("input-list-input_urls-1")
    .fill("test1 test1 test1 test1");
  await page
-    .getByTestId("input-list-input_metadata_indexing_include-2")
+    .getByTestId("input-list-input_urls-2")
    .fill("test2 test2 test2 test2");
  await page
-    .getByTestId("input-list-input_metadata_indexing_include-3")
+    .getByTestId("input-list-input_urls-3")
    .fill("test3 test3 test3 test3");

  await page.getByTestId("div-generic-node").click();
@ -132,16 +108,16 @@ test("InputListComponent", async ({ page }) => {
  await page.getByTestId("edit-button-modal").click();

  const value0Edit = await page
-    .getByTestId("input-list-input-edit_metadata_indexing_include-0")
+    .getByTestId("input-list-input-edit_urls-0")
    .inputValue();
  const value1Edit = await page
-    .getByTestId("input-list-input-edit_metadata_indexing_include-1")
+    .getByTestId("input-list-input-edit_urls-1")
    .inputValue();
  const value2Edit = await page
-    .getByTestId("input-list-input-edit_metadata_indexing_include-2")
+    .getByTestId("input-list-input-edit_urls-2")
    .inputValue();
  const value3Edit = await page
-    .getByTestId("input-list-input-edit_metadata_indexing_include-3")
+    .getByTestId("input-list-input-edit_urls-3")
    .inputValue();

  if (
@ -153,23 +129,17 @@ test("InputListComponent", async ({ page }) => {
    expect(false).toBeTruthy();
  }

-  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();
-  await page
-    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-1")
-    .click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();

  const plusButtonLocatorEdit0 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-0",
+    "input-list-plus-btn-edit_urls-0",
  );
  const elementCountEdit0 = await plusButtonLocatorEdit0?.count();

  const plusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-plus-btn-edit_metadata_indexing_include-2",
+    "input-list-plus-btn-edit_urls-1",
  );
  const elementCountEdit2 = await plusButtonLocatorEdit2?.count();

@ -178,13 +148,13 @@ test("InputListComponent", async ({ page }) => {
  }

  const minusButtonLocatorEdit1 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-1",
+    "input-list-minus-btn-edit_urls-1",
  );

  const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();

  const minusButtonLocatorEdit2 = await page.getByTestId(
-    "input-list-minus-btn-edit_metadata_indexing_include-2",
+    "input-list-minus-btn-edit_urls-2",
  );

  const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@ -30,7 +30,7 @@ test("IntComponent", async ({ page }) => {
  await page.waitForTimeout(1000);

  await page
-    .getByTestId("model_specsChatOpenAI")
+    .getByTestId("modelsOpenAI")
    .first()
    .dragTo(page.locator('//*[@id="react-flow-id"]'));
  await page.mouse.up();
@ -65,7 +65,7 @@ test("IntComponent", async ({ page }) => {
    expect(false).toBeTruthy();
  }

-  await page.getByTestId("title-ChatOpenAI").click();
+  await page.getByTestId("title-OpenAI").click();
  await page.getByTitle("fit view").click();
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@ -30,7 +30,7 @@ test("KeypairListComponent", async ({ page }) => {
  await page.waitForTimeout(1000);

  await page
-    .getByTestId("model_specsAmazon Bedrock")
+    .getByTestId("modelsAmazon Bedrock")
    .dragTo(page.locator('//*[@id="react-flow-id"]'));
  await page.mouse.up();
  await page.mouse.down();
@ -38,6 +38,14 @@ test("KeypairListComponent", async ({ page }) => {
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.getByTestId("showmodel_kwargs").click();
+  expect(await page.getByTestId("showmodel_kwargs").isChecked()).toBeTruthy();
+  await page.getByText("Save Changes", { exact: true }).click();
+
  await page.locator('//*[@id="keypair0"]').click();
  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
  await page.locator('//*[@id="keypair100"]').click();
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@ -72,6 +72,8 @@ test("PromptTemplateComponent", async ({ page }) => {
    expect(false).toBeTruthy();
  }

+  await page.getByTestId("div-generic-node").click();
+
  await page.getByTestId("more-options-modal").click();

  await page.getByTestId("save-button-modal").click();
@ -102,13 +104,16 @@ test("PromptTemplateComponent", async ({ page }) => {
  await page.getByTestId("more-options-modal").click();
  await page.getByTestId("edit-button-modal").click();

-  value = await page.locator('//*[@id="textarea-edit-prompt"]').inputValue();
+  value =
+    (await page.locator('//*[@id="textarea-edit-prompt"]').textContent()) ?? "";

  if (value != "prompt_value_!@#!@#") {
    expect(false).toBeTruthy();
  }

-  value = await page.locator('//*[@id="textarea-edit-prompt1"]').inputValue();
+  value =
+    (await page.locator('//*[@id="textarea-edit-prompt1"]').textContent()) ??
+    "";

  if (value != "prompt_name_test_123123!@#!@#") {
    expect(false).toBeTruthy();
@ -122,13 +127,20 @@ test("PromptTemplateComponent", async ({ page }) => {
    expect(false).toBeTruthy();
  }

+  await page.locator('//*[@id="textarea-edit-prompt1"]').click();
  await page
-    .locator('//*[@id="textarea-edit-prompt1"]')
+    .getByTestId("text-area-modal")
    .fill("prompt_edit_test_12312312321!@#$");
+
+  await page.getByText("Finish Editing", { exact: true }).click();
+
+  await page.locator('//*[@id="textarea-edit-prompt"]').click();
  await page
-    .locator('//*[@id="textarea-edit-prompt"]')
+    .getByTestId("text-area-modal")
    .fill("prompt_edit_test_44444444444!@#$");

+  await page.getByText("Finish Editing", { exact: true }).click();
+
  await page.locator('//*[@id="showtemplate"]').click();
  expect(await page.locator('//*[@id="showtemplate"]').isChecked()).toBeFalsy();

@ -174,13 +186,16 @@ test("PromptTemplateComponent", async ({ page }) => {
  await page.locator('//*[@id="showprompt1"]').click();
  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeTruthy();

-  value = await page.locator('//*[@id="textarea-edit-prompt"]').inputValue();
+  value =
+    (await page.locator('//*[@id="textarea-edit-prompt"]').textContent()) ?? "";

  if (value != "prompt_edit_test_44444444444!@#$") {
    expect(false).toBeTruthy();
  }

-  value = await page.locator('//*[@id="textarea-edit-prompt1"]').inputValue();
+  value =
+    (await page.locator('//*[@id="textarea-edit-prompt1"]').textContent()) ??
+    "";

  if (value != "prompt_edit_test_12312312321!@#$") {
    expect(false).toBeTruthy();
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@ -26,7 +26,7 @@ test.describe("save component tests", () => {

    // Read your file into a buffer.
    const jsonContent = readFileSync(
-      "src/frontend/tests/end-to-end/assets/flow_group_test.json",
+      "tests/end-to-end/assets/flow_group_test.json",
      "utf-8",
    );

--- a/src/frontend/tests/end-to-end/store.spec.ts
+++ b/src/frontend/tests/end-to-end/store.spec.ts
@ -259,6 +259,10 @@ test("should share component with share button", async ({ page }) => {
  await page.getByText("Save").last().click();
  await page.getByText("Close").last().click();

+  await page.waitForSelector('[data-testid="icon-Share3"]', {
+    timeout: 100000,
+  });
+
  await page.getByTestId("icon-Share3").first().click();
  await page.getByText("Name:").isVisible();
  await page.getByText("Description:").isVisible();
--- a/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/textAreaModalComponent.spec.ts
@ -21,8 +21,17 @@ test("TextAreaModalComponent", async ({ page }) => {
  }

  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
-  await page.getByTestId("extended-disclosure").click();
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
  await page.getByPlaceholder("Search").click();
  await page.getByPlaceholder("Search").fill("prompt");

--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@ -29,8 +29,17 @@ test("TextInputOutputComponent", async ({ page }) => {
  await page.waitForTimeout(1000);

  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
-  await page.getByTestId("extended-disclosure").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
  await page.getByPlaceholder("Search").click();
  await page.getByPlaceholder("Search").fill("text input");
  await page.waitForTimeout(1000);
@ -56,7 +65,15 @@ test("TextInputOutputComponent", async ({ page }) => {
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();

-  // Click and hold on the first element
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
+    )
+    .waitFor({
+      state: "visible",
+      timeout: 30000,
+    });
+
  await page
    .locator(
      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
@ -64,6 +81,15 @@ test("TextInputOutputComponent", async ({ page }) => {
    .hover();
  await page.mouse.down();

+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
+    )
+    .waitFor({
+      state: "visible",
+      timeout: 30000,
+    });
+
  // Move to the second element
  await page
    .locator(
@ -88,6 +114,15 @@ test("TextInputOutputComponent", async ({ page }) => {
  await page.getByTitle("zoom out").click();
  await page.getByTitle("zoom out").click();

+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
+    )
+    .waitFor({
+      state: "visible",
+      timeout: 30000,
+    });
+
  // Click and hold on the first element
  await page
    .locator(
@ -96,6 +131,15 @@ test("TextInputOutputComponent", async ({ page }) => {
    .hover();
  await page.mouse.down();

+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
+    )
+    .waitFor({
+      state: "visible",
+      timeout: 30000,
+    });
+
  // Move to the second element
  await page
    .locator(
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@ -21,8 +21,16 @@ test("ToggleComponent", async ({ page }) => {
  }

  await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(3000);
-  await page.getByTestId("extended-disclosure").click();
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
  await page.getByPlaceholder("Search").click();
  await page.getByPlaceholder("Search").fill("directory");

--- a/src/frontend/tests/end-to-end/tweaks_test.spec.ts
+++ b/src/frontend/tests/end-to-end/tweaks_test.spec.ts
@ -108,7 +108,13 @@ test("check if tweaks are updating when someothing on the flow changes", async (
    .getByTestId("popover-anchor-input-persist_directory")
    .fill("persist_directory_123123123!@#$&*(&%$@");

-  await page.getByText("API", { exact: true }).first().click();
+  const focusElementsOnBoard = async ({ page }) => {
+    await page.waitForSelector("text=API", { timeout: 30000 });
+    const focusElements = await page.getByText("API", { exact: true }).first();
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });

  await page.getByText("Tweaks").nth(1).click();

--- a/src/frontend/tests/end-to-end/twoEdges.spec.ts
+++ b/src/frontend/tests/end-to-end/twoEdges.spec.ts
@ -24,10 +24,23 @@ test("user should be able to see multiple edges and interact with them", async (
  await page.waitForTimeout(1000);

  await page.getByText("Vector Store RAG", { exact: true }).last().click();
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(5000);
  await page.getByText("Retriever", { exact: true }).first().isVisible();
  await page.getByText("Search Results", { exact: true }).first().isVisible();
-  await page.getByTestId("icon-Eye").nth(24).click();
+
+  const focusElementsOnBoard = async ({ page }) => {
+    await page.waitForSelector('[title="fit view"]', { timeout: 30000 });
+    const focusElements = await page.getByTitle("fit view");
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("output-inspection-retriever").first().click();
  await page.getByText("Retriever", { exact: true }).first().isHidden();
  await page.getByTestId("icon-ChevronDown").last().isVisible();
  await page.getByTestId("icon-ChevronDown").last().click();
--- a/src/frontend/tests/end-to-end/userSettings.spec.ts
+++ b/src/frontend/tests/end-to-end/userSettings.spec.ts
@ -62,10 +62,19 @@ test("should interact with global variables", async ({ page }) => {

  await page.getByText(randomName).isVisible();

-  await page
-    .getByLabel("Press Space to toggle all rows selection (unchecked)")
-    .nth(0)
-    .click();
+  const focusElementsOnBoard = async ({ page }) => {
+    await page.waitForSelector(
+      '[aria-label="Press Space to toggle all rows selection (unchecked)"]',
+      { timeout: 30000 },
+    );
+    const focusElements = await page
+      .getByLabel("Press Space to toggle all rows selection (unchecked)")
+      .first();
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
  await page.getByTestId("icon-Trash2").click();
  await page.getByText("No data available").isVisible();
 });