diff --git a/src/frontend/src/components/canvasControlsComponent/index.tsx b/src/frontend/src/components/canvasControlsComponent/index.tsx
new file mode 100644
index 000000000..b14eb9130
--- /dev/null
+++ b/src/frontend/src/components/canvasControlsComponent/index.tsx
@@ -0,0 +1,118 @@
+import IconComponent from "@/components/genericIconComponent";
+import ShadTooltip from "@/components/shadTooltipComponent";
+import { cn } from "@/utils/utils";
+import {
+  ControlButton,
+  Panel,
+  useReactFlow,
+  useStore,
+  useStoreApi,
+  type ReactFlowState,
+} from "reactflow";
+import { shallow } from "zustand/shallow";
+
+type CustomControlButtonProps = {
+  iconName: string;
+  tooltipText: string;
+  onClick: () => void;
+  disabled?: boolean;
+  backgroundClasses?: string;
+  iconClasses?: string;
+  testId?: string;
+};
+
+export const CustomControlButton = ({
+  iconName,
+  tooltipText,
+  onClick,
+  disabled,
+  backgroundClasses,
+  iconClasses,
+  testId,
+}: CustomControlButtonProps): JSX.Element => {
+  return (
+    <ControlButton
+      data-testid={testId}
+      className="!h-8 !w-8 rounded !p-0"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <ShadTooltip content={tooltipText}>
+        <div className={cn("rounded p-2.5", backgroundClasses)}>
+          <IconComponent
+            name={iconName}
+            aria-hidden="true"
+            className={cn("scale-150 text-muted-foreground", iconClasses)}
+          />
+        </div>
+      </ShadTooltip>
+    </ControlButton>
+  );
+};
+
+const selector = (s: ReactFlowState) => ({
+  isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
+  minZoomReached: s.transform[2] <= s.minZoom,
+  maxZoomReached: s.transform[2] >= s.maxZoom,
+});
+
+const CanvasControls = ({ children }) => {
+  const store = useStoreApi();
+  const { fitView, zoomIn, zoomOut } = useReactFlow();
+  const { isInteractive, minZoomReached, maxZoomReached } = useStore(
+    selector,
+    shallow,
+  );
+
+  const onToggleInteractivity = () => {
+    store.setState({
+      nodesDraggable: !isInteractive,
+      nodesConnectable: !isInteractive,
+      elementsSelectable: !isInteractive,
+    });
+  };
+
+  return (
+    <Panel
+      data-testid="canvas_controls"
+      className="react-flow__controls !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent"
+      position="bottom-left"
+    >
+      {/* Zoom In */}
+      <CustomControlButton
+        iconName="ZoomIn"
+        tooltipText="Zoom In"
+        onClick={zoomIn}
+        disabled={maxZoomReached}
+        testId="zoom_in"
+      />
+      {/* Zoom Out */}
+      <CustomControlButton
+        iconName="ZoomOut"
+        tooltipText="Zoom Out"
+        onClick={zoomOut}
+        disabled={minZoomReached}
+        testId="zoom_out"
+      />
+      {/* Zoom To Fit */}
+      <CustomControlButton
+        iconName="maximize"
+        tooltipText="Fit To Zoom"
+        onClick={fitView}
+        testId="fit_view"
+      />
+      {/* Lock/Unlock */}
+      <CustomControlButton
+        iconName={isInteractive ? "LockOpen" : "Lock"}
+        tooltipText={isInteractive ? "Lock" : "Unlock"}
+        onClick={onToggleInteractivity}
+        backgroundClasses={isInteractive ? "" : "bg-destructive"}
+        iconClasses={isInteractive ? "" : "text-primary-foreground"}
+        testId="lock_unlock"
+      />
+      {children}
+    </Panel>
+  );
+};
+
+export default CanvasControls;
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/flowToolbarComponent/index.tsx
similarity index 69%
rename from src/frontend/src/components/chatComponent/index.tsx
rename to src/frontend/src/components/flowToolbarComponent/index.tsx
index d5e46f526..4cb6489ca 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/flowToolbarComponent/index.tsx
@@ -1,8 +1,9 @@
+import ShadTooltip from "@/components/shadTooltipComponent";
 import { ENABLE_API, ENABLE_NEW_IO_MODAL } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
-import { Transition } from "@headlessui/react";
 import { useEffect, useMemo, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
+import { Panel } from "reactflow";
 import ApiModal from "../../modals/apiModal";
 import IOModalOld from "../../modals/IOModal";
 import IOModalNew from "../../modals/IOModal/newModal";
@@ -12,7 +13,7 @@ import { useShortcutsStore } from "../../stores/shortcuts";
 import { useStoreStore } from "../../stores/storeStore";
 import { classNames, isThereModal } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
-import { Separator } from "../ui/separator";
+
 const IOModal = ENABLE_NEW_IO_MODAL ? IOModalNew : IOModalOld;
 
 export default function FlowToolbar(): JSX.Element {
@@ -66,27 +67,39 @@ export default function FlowToolbar(): JSX.Element {
         open={openShareModal}
         setOpen={setOpenShareModal}
       >
-        <button
-          disabled={!hasApiKey || !validApiKey || !hasStore}
-          className={classNames(
-            "relative inline-flex h-full w-full items-center justify-center gap-[4px] bg-muted px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-background hover:bg-hover",
+        <ShadTooltip
+          content={
             !hasApiKey || !validApiKey || !hasStore
-              ? "button-disable text-muted-foreground"
-              : "",
-          )}
-          data-testid="shared-button-flow"
+              ? "Store API Key Required"
+              : ""
+          }
+          side="bottom"
+          align="end"
         >
-          <ForwardedIconComponent
-            name="Share3"
+          <button
+            disabled={!hasApiKey || !validApiKey || !hasStore}
             className={classNames(
-              "-m-0.5 -ml-1 h-6 w-6",
+              "share-button",
               !hasApiKey || !validApiKey || !hasStore
-                ? "extra-side-bar-save-disable"
+                ? "text-muted-foreground"
                 : "",
             )}
-          />
-          Share
-        </button>
+            data-testid="shared-button-flow"
+          >
+            <>
+              <ForwardedIconComponent
+                name="Share2"
+                className={classNames(
+                  "-m-0.5 -ml-1 h-4 w-4",
+                  !hasApiKey || !validApiKey || !hasStore
+                    ? "extra-side-bar-save-disable"
+                    : "",
+                )}
+              />
+              Share
+            </>
+          </button>
+        </ShadTooltip>
       </ShareModal>
     ),
     [
@@ -101,52 +114,40 @@ export default function FlowToolbar(): JSX.Element {
 
   return (
     <>
-      <Transition
-        show={true}
-        appear={true}
-        enter="transition ease-out duration-300"
-        enterFrom="translate-y-96"
-        enterTo="translate-y-0"
-        leave="transition ease-in duration-300"
-        leaveFrom="translate-y-0"
-        leaveTo="translate-y-96"
-      >
+      <Panel className="!m-2" position="top-right">
         <div
           className={
-            "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center gap-7 rounded-sm border bg-muted shadow-md transition-all"
+            "hover:shadow-round-btn-shadow flex items-center justify-center gap-7 rounded-md border bg-background p-1.5 shadow transition-all"
           }
         >
-          <div className="flex">
-            <div className="flex h-full w-full gap-1 rounded-sm transition-all">
+          <div className="flex gap-1.5">
+            <div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
               {hasIO ? (
                 <IOModal open={open} setOpen={setOpen} disable={!hasIO}>
                   <div
                     data-testid="playground-btn-flow-io"
-                    className="relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-hover"
+                    className="relative inline-flex w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-accent"
                   >
                     <ForwardedIconComponent
-                      name="BotMessageSquareIcon"
-                      className={"h-5 w-5 transition-all"}
+                      name="Play"
+                      className={"h-4 w-4 transition-all"}
                     />
                     Playground
                   </div>
                 </IOModal>
               ) : (
                 <div
-                  className={`relative inline-flex w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out`}
+                  className={`relative inline-flex w-full cursor-not-allowed items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out`}
                   data-testid="playground-btn-flow"
                 >
                   <ForwardedIconComponent
-                    name="BotMessageSquareIcon"
-                    className={"h-5 w-5 transition-all"}
+                    name="Play"
+                    className={"h-4 w-4 transition-all"}
                   />
                   Playground
                 </div>
               )}
             </div>
-            <div>
-              <Separator orientation="vertical" />
-            </div>
             {ENABLE_API && (
               <>
                 <div className="flex cursor-pointer items-center gap-2">
@@ -158,21 +159,18 @@ export default function FlowToolbar(): JSX.Element {
                     >
                       <div
                         className={classNames(
-                          "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
+                          "relative inline-flex w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
                         )}
                       >
                         <ForwardedIconComponent
                           name="Code2"
-                          className={"h-5 w-5"}
+                          className={"h-4 w-4"}
                         />
                         API
                       </div>
                     </ApiModal>
                   )}
                 </div>
-                <div>
-                  <Separator orientation="vertical" />
-                </div>
               </>
             )}
             <div className="flex items-center gap-2">
@@ -188,7 +186,7 @@ export default function FlowToolbar(): JSX.Element {
             </div>
           </div>
         </div>
-      </Transition>
+      </Panel>
     </>
   );
 }
diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
index 387f24e30..2b2fff604 100644
--- a/src/frontend/src/components/shadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/shadTooltipComponent/index.tsx
@@ -10,6 +10,7 @@ export default function ShadTooltip({
   styleClasses,
   delayDuration = 500,
   open,
+  align,
   setOpen,
 }: ShadToolTipType): JSX.Element {
   return content ? (
@@ -21,9 +22,13 @@ export default function ShadTooltip({
     >
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
-        className={cn("max-w-96", styleClasses)}
+        className={cn(
+          "max-w-96 bg-tooltip text-tooltip-foreground",
+          styleClasses,
+        )}
         side={side}
         avoidCollisions={false}
+        align={align}
         sticky="always"
       >
         {content}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index bfbc1f758..1b4eeb548 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -1,8 +1,10 @@
 import { DefaultEdge } from "@/CustomEdges";
 import NoteNode from "@/CustomNodes/NoteNode";
-import IconComponent from "@/components/genericIconComponent";
+import CanvasControls, {
+  CustomControlButton,
+} from "@/components/canvasControlsComponent";
+import FlowToolbar from "@/components/flowToolbarComponent";
 import LoadingComponent from "@/components/loadingComponent";
-import ShadTooltip from "@/components/shadTooltipComponent";
 import {
   NOTE_NODE_MIN_HEIGHT,
   NOTE_NODE_MIN_WIDTH,
@@ -26,13 +28,13 @@ import { useHotkeys } from "react-hotkeys-hook";
 import ReactFlow, {
   Background,
   Connection,
-  ControlButton,
-  Controls,
   Edge,
   NodeDragHandler,
   OnSelectionChangeParams,
   SelectionDragHandler,
   updateEdge,
+  useReactFlow,
+  useViewport,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import {
@@ -117,6 +119,9 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const [isAddingNote, setIsAddingNote] = useState(false);
   const [isHighlightingCursor, setIsHighlightingCursor] = useState(false);
 
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const { zoom } = useViewport();
+
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (!document.hidden) {
@@ -617,25 +622,20 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
           >
             <Background className="" />
             {!view && (
-              <Controls className="fill-foreground stroke-foreground text-primary [&>button]:border-b-border [&>button]:bg-muted hover:[&>button]:bg-border">
-                <ControlButton
-                  data-testid="add_note"
-                  onClick={() => {
-                    setIsAddingNote(true);
-                  }}
-                  className="postion react-flow__controls absolute -top-10"
-                >
-                  <ShadTooltip content="Add note">
-                    <div>
-                      <IconComponent
-                        name="SquarePen"
-                        aria-hidden="true"
-                        className="scale-125"
-                      />
-                    </div>
-                  </ShadTooltip>
-                </ControlButton>
-              </Controls>
+              <>
+                <CanvasControls>
+                  <CustomControlButton
+                    iconName="sticky-note"
+                    tooltipText="Add Note"
+                    onClick={() => {
+                      setIsAddingNote(true);
+                    }}
+                    iconClasses="text-primary"
+                    testId="add_note"
+                  />
+                </CanvasControls>
+                <FlowToolbar />
+              </>
             )}
             <SelectionMenu
               lastSelection={lastSelection}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index 243afb1fb..e20719d1c 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -9,7 +9,7 @@ import { useTypesStore } from "@/stores/typesStore";
 import { customStringify } from "@/utils/reactflowUtils";
 import { useEffect } from "react";
 import { useBlocker, useParams } from "react-router-dom";
-import FlowToolbar from "../../components/chatComponent";
+import FlowToolbar from "../../components/flowToolbarComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -171,7 +171,6 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
               <div className="h-full w-full">
                 <Page />
               </div>
-              {!view && <FlowToolbar />}
             </main>
           </div>
         )}
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 3a1b1c9b1..bd37d942b 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -97,9 +97,6 @@
   .extra-side-bar-save-disable {
     @apply text-muted-foreground;
   }
-  .extra-side-bar-save-disable:hover {
-    @apply hover:text-accent-foreground;
-  }
   .side-bar-button-size {
     @apply h-5 w-5;
   }
@@ -222,7 +219,7 @@
     @apply w-6 fill-build-trigger stroke-build-trigger stroke-1;
   }
   .message-button-position {
-    @apply fixed bottom-4 right-4;
+    @apply fixed top-20 right-4;
   }
   .message-button-icon {
     @apply fill-medium-indigo stroke-medium-indigo stroke-1;
@@ -1191,4 +1188,8 @@
   .color-option-container {
     @apply w-fit;
   }
+
+  .share-button {
+    @apply relative inline-flex h-full w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent;
+  }
 }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index a9b5477f9..d0f89e04f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -240,6 +240,7 @@ export type ShadToolTipType = {
   setOpen?: (open: boolean) => void;
   content?: ReactNode | null;
   side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
   asChild?: boolean;
   children?: ReactElement;
   delayDuration?: number;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index e7ad7098b..431392a75 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -100,6 +100,7 @@ import {
   ListOrdered,
   Loader2,
   Lock,
+  LockOpen,
   LogIn,
   LogOut,
   LucideSend,
@@ -183,6 +184,8 @@ import {
   X,
   XCircle,
   Zap,
+  ZoomIn,
+  ZoomOut,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -557,6 +560,7 @@ export const nodeIconsLucide: iconsType = {
   Download,
   Eraser,
   Lock,
+  LockOpen,
   LucideSend,
   Sparkles,
   DownloadCloud,
@@ -667,4 +671,6 @@ export const nodeIconsLucide: iconsType = {
   TavilyIcon,
   DuckDuckGo: DuckDuckGoIcon,
   OpenSearch,
+  ZoomIn,
+  ZoomOut,
 };
diff --git a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
index bf72f8e1a..f37fa96f8 100644
--- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
+++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
@@ -172,14 +172,14 @@ test("search components", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByText("Chat Input").first().click();
   await page.getByTestId("more-options-modal").click();
diff --git a/src/frontend/tests/core/features/auto-login-off.spec.ts b/src/frontend/tests/core/features/auto-login-off.spec.ts
index 3f46d7f3a..389452f10 100644
--- a/src/frontend/tests/core/features/auto-login-off.spec.ts
+++ b/src/frontend/tests/core/features/auto-login-off.spec.ts
@@ -128,12 +128,12 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("flow-configuration-button").click();
   await page.getByText("Settings", { exact: true }).last().click();
@@ -199,12 +199,12 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("flow-configuration-button").click();
   await page.getByText("Settings", { exact: true }).last().click();
diff --git a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
index 963ad57c4..c2468f017 100644
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@@ -35,14 +35,14 @@ test("user must be able to send an image on chat", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/features/filterEdge-shard-0.spec.ts b/src/frontend/tests/core/features/filterEdge-shard-0.spec.ts
index 233dac0ee..bddeb76d4 100644
--- a/src/frontend/tests/core/features/filterEdge-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/filterEdge-shard-0.spec.ts
@@ -36,10 +36,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const outputElements = await page
     .getByTestId("handle-retrievalqa-shownode-text-right")
@@ -71,10 +71,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
     ).toBeVisible();
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const rqaChainInputElements1 = await page
     .getByTestId("handle-retrievalqa-shownode-language model-left")
@@ -104,10 +104,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
       page.getByTestId("input-tooltip-languagemodel").first(),
     ).toBeVisible();
   });
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const rqaChainInputElements0 = await page
     .getByTestId("handle-retrievalqa-shownode-retriever-left")
@@ -138,10 +138,10 @@ test("user must see on handle hover a tooltip with possibility connections", asy
     ).toBeVisible();
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const rqaChainInputElements2 = await page
     .getByTestId("handle-retrievalqa-shownode-memory-left")
diff --git a/src/frontend/tests/core/features/filterSidebar.spec.ts b/src/frontend/tests/core/features/filterSidebar.spec.ts
index 405a6b3fb..511adc75a 100644
--- a/src/frontend/tests/core/features/filterSidebar.spec.ts
+++ b/src/frontend/tests/core/features/filterSidebar.spec.ts
@@ -46,10 +46,10 @@ test("user must see on handle click the possibility connections - LLMChain", asy
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.waitForTimeout(500);
 
   await page.getByTestId("handle-apirequest-shownode-urls-left").click();
diff --git a/src/frontend/tests/core/features/freeze-path.spec.ts b/src/frontend/tests/core/features/freeze-path.spec.ts
index 4b7994537..0ed448973 100644
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@@ -40,14 +40,14 @@ test("user must be able to freeze a path", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/features/freeze.spec.ts b/src/frontend/tests/core/features/freeze.spec.ts
index 7220641e0..ad457de90 100644
--- a/src/frontend/tests/core/features/freeze.spec.ts
+++ b/src/frontend/tests/core/features/freeze.spec.ts
@@ -39,7 +39,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     .getByTestId("inputsText Input")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -61,7 +61,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     .getByTestId("dataURL")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -83,7 +83,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     .getByTestId("helpersSplit Text")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -105,7 +105,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     .getByTestId("helpersParse Data")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -127,7 +127,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     .getByTestId("outputsChat Output")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -146,7 +146,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
     outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
   }
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   //connection 1
   const urlOutput = await page
@@ -172,7 +172,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
   await splitTextInput.hover();
   await page.mouse.up();
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   //connection 3
   const splitTextOutput = await page
@@ -198,7 +198,7 @@ test.skip("user must be able to freeze a component", async ({ page }) => {
   await chatOutputInput.hover();
   await page.mouse.up();
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page
     .getByTestId("textarea_str_input_value")
diff --git a/src/frontend/tests/core/features/globalVariables.spec.ts b/src/frontend/tests/core/features/globalVariables.spec.ts
index b9dcc4daf..6b8d28804 100644
--- a/src/frontend/tests/core/features/globalVariables.spec.ts
+++ b/src/frontend/tests/core/features/globalVariables.spec.ts
@@ -46,14 +46,14 @@ test("user must be able to save or delete a global variable", async ({
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const genericName = Math.random().toString();
   const credentialName = Math.random().toString();
diff --git a/src/frontend/tests/core/features/group.spec.ts b/src/frontend/tests/core/features/group.spec.ts
index d075692c3..963ba3903 100644
--- a/src/frontend/tests/core/features/group.spec.ts
+++ b/src/frontend/tests/core/features/group.spec.ts
@@ -26,7 +26,7 @@ test.describe("group node test", () => {
       .first()
       .click();
     await page.waitForTimeout(1000);
-    await page.getByLabel("fit view").first().click();
+    await page.getByTestId("fit_view").first().click();
 
     await page.getByTestId("title-OpenAI").click();
     await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
diff --git a/src/frontend/tests/core/features/playground.spec.ts b/src/frontend/tests/core/features/playground.spec.ts
index f51f91fa2..61ac32af2 100644
--- a/src/frontend/tests/core/features/playground.spec.ts
+++ b/src/frontend/tests/core/features/playground.spec.ts
@@ -62,18 +62,18 @@ test("fresh start playground", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const elementsChatInput = await page
     .locator('[data-testid="handle-chatinput-shownode-message-right"]')
@@ -110,7 +110,7 @@ test("fresh start playground", async ({ page }) => {
   // Release the mouse
   await page.mouse.up();
 
-  await page.getByLabel("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.getByText("Playground", { exact: true }).last().click();
   await page.waitForSelector('[data-testid="input-chat-playground"]', {
     timeout: 100000,
diff --git a/src/frontend/tests/core/features/saveComponents.spec.ts b/src/frontend/tests/core/features/saveComponents.spec.ts
index 5a8416b78..3976e7672 100644
--- a/src/frontend/tests/core/features/saveComponents.spec.ts
+++ b/src/frontend/tests/core/features/saveComponents.spec.ts
@@ -117,10 +117,10 @@ test.describe("save component tests", () => {
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page.getByTitle("fit view").click();
-    await page.getByTitle("zoom out").click();
-    await page.getByTitle("zoom out").click();
-    await page.getByTitle("zoom out").click();
+    await page.getByTestId("fit_view").click();
+    await page.getByTestId("zoom_out").click();
+    await page.getByTestId("zoom_out").click();
+    await page.getByTestId("zoom_out").click();
     textArea = page.getByTestId("div-textarea-description");
     elementCountText = await textArea?.count();
     if (elementCountText > 0) {
diff --git a/src/frontend/tests/core/features/stop-building.spec.ts b/src/frontend/tests/core/features/stop-building.spec.ts
index 964e29537..2d453ffbe 100644
--- a/src/frontend/tests/core/features/stop-building.spec.ts
+++ b/src/frontend/tests/core/features/stop-building.spec.ts
@@ -42,7 +42,7 @@ test("user must be able to stop a building", async ({ page }) => {
     .getByTestId("inputsText Input")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -64,7 +64,7 @@ test("user must be able to stop a building", async ({ page }) => {
     .getByTestId("dataURL")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -86,7 +86,7 @@ test("user must be able to stop a building", async ({ page }) => {
     .getByTestId("helpersSplit Text")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -108,7 +108,7 @@ test("user must be able to stop a building", async ({ page }) => {
     .getByTestId("helpersParse Data")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -130,7 +130,7 @@ test("user must be able to stop a building", async ({ page }) => {
     .getByTestId("outputsChat Output")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -149,7 +149,7 @@ test("user must be able to stop a building", async ({ page }) => {
     outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
   }
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   //connection 1
   const urlOutput = await page
@@ -175,7 +175,7 @@ test("user must be able to stop a building", async ({ page }) => {
   await splitTextInput.hover();
   await page.mouse.up();
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   //connection 3
   const splitTextOutput = await page
@@ -201,7 +201,7 @@ test("user must be able to stop a building", async ({ page }) => {
   await chatOutputInput.hover();
   await page.mouse.up();
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("textarea_str_input_value").first().fill(",");
 
@@ -252,8 +252,8 @@ class CustomComponent(Component):
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("title-Custom Component").first().click();
 
diff --git a/src/frontend/tests/core/features/tweaksTest.spec.ts b/src/frontend/tests/core/features/tweaksTest.spec.ts
index e9db4696e..3a5a61df3 100644
--- a/src/frontend/tests/core/features/tweaksTest.spec.ts
+++ b/src/frontend/tests/core/features/tweaksTest.spec.ts
@@ -103,14 +103,14 @@ test("check if tweaks are updating when someothing on the flow changes", async (
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("popover-anchor-input-collection_name").click();
   await page
     .getByTestId("popover-anchor-input-collection_name")
diff --git a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts
index 112ca3ee2..6c7a0ffd0 100644
--- a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts	
+++ b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts	
@@ -40,14 +40,14 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Blog Writer.spec.ts b/src/frontend/tests/core/integrations/Blog Writer.spec.ts
index 4c8f66825..a7aaa6c35 100644
--- a/src/frontend/tests/core/integrations/Blog Writer.spec.ts	
+++ b/src/frontend/tests/core/integrations/Blog Writer.spec.ts	
@@ -41,10 +41,10 @@ test("Blog Writer", async ({ page }) => {
   await page.getByRole("heading", { name: "Blog Writer" }).click();
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Document QA.spec.ts b/src/frontend/tests/core/integrations/Document QA.spec.ts
index efed090e7..63486ef8c 100644
--- a/src/frontend/tests/core/integrations/Document QA.spec.ts	
+++ b/src/frontend/tests/core/integrations/Document QA.spec.ts	
@@ -41,10 +41,10 @@ test("Document QA", async ({ page }) => {
   await page.getByRole("heading", { name: "Document QA" }).click();
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts
index 88620c0bf..a849217ff 100644
--- a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts	
+++ b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts	
@@ -45,14 +45,14 @@ test("Dynamic Agent", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Dynamic Agent" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts
index 4e4604cfd..8c3252c30 100644
--- a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts	
+++ b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts	
@@ -41,10 +41,10 @@ test("Memory Chatbot", async ({ page }) => {
   await page.getByRole("heading", { name: "Memory Chatbot" }).click();
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
 
diff --git a/src/frontend/tests/core/integrations/Simple Agent.spec.ts b/src/frontend/tests/core/integrations/Simple Agent.spec.ts
index 7061571cb..b30c1e2ee 100644
--- a/src/frontend/tests/core/integrations/Simple Agent.spec.ts	
+++ b/src/frontend/tests/core/integrations/Simple Agent.spec.ts	
@@ -49,14 +49,14 @@ test("Simple Agent", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Simple Agent" }).first().click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts
index 97ed8f872..1b061f4f8 100644
--- a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts	
+++ b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts	
@@ -45,14 +45,14 @@ test("Travel Planning Agent", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Travel Planning Agents" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts
index cc5dbd51e..2a0f74b69 100644
--- a/src/frontend/tests/core/integrations/Vector Store.spec.ts	
+++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts	
@@ -45,14 +45,14 @@ test("Vector Store RAG", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/integrations/decisionFlow.spec.ts b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
index ebe1b8bd7..86c9d28b0 100644
--- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts
+++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
@@ -220,7 +220,7 @@ test("should create a flow with decision", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   //----------------------------------
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await moveElementByX(page, "Chat Output", 500, 1);
   await page.waitForTimeout(500);
@@ -233,7 +233,7 @@ test("should create a flow with decision", async ({ page }) => {
   await moveElementByX(page, "Prompt", 2500, 0);
   await page.waitForTimeout(500);
   await moveElementByX(page, "Pass", 3000, 2);
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.waitForTimeout(500);
   await moveElementByXY(page, "Pass", 0, 200, 1);
   await page.waitForTimeout(500);
@@ -250,7 +250,7 @@ test("should create a flow with decision", async ({ page }) => {
   await moveElementByXY(page, "Chat Input", 1000, 200, 0);
 
   await page.waitForTimeout(500);
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   //---------------------------------- EDIT PROMPT
   await page.getByTestId("promptarea_prompt_template").first().click();
@@ -395,7 +395,7 @@ test("should create a flow with decision", async ({ page }) => {
     .fill(process.env.OPENAI_API_KEY ?? "");
   await page.getByTestId("dropdown_str_model_name").click();
   await page.getByTestId("gpt-4o-1-option").click();
-  await page.getByLabel("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.getByText("Playground", { exact: true }).last().click();
   await page.waitForSelector('[data-testid="input-chat-playground"]', {
     timeout: 100000,
diff --git a/src/frontend/tests/core/integrations/similarity.spec.ts b/src/frontend/tests/core/integrations/similarity.spec.ts
index ff3eb1b0c..438c54ee4 100644
--- a/src/frontend/tests/core/integrations/similarity.spec.ts
+++ b/src/frontend/tests/core/integrations/similarity.spec.ts
@@ -40,7 +40,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("embeddingsOpenAI Embeddings")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -57,7 +57,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("embeddingsOpenAI Embeddings")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -79,7 +79,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("embeddingsText Embedder")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -96,7 +96,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("embeddingsText Embedder")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -118,7 +118,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("embeddingsEmbedding Similarity")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -140,7 +140,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("helpersParse Data")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -162,7 +162,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("outputsText Output")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -182,7 +182,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .getByTestId("helpersFilter Data")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -201,7 +201,7 @@ test("user must be able to check similarity between embedding texts", async ({
     outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
   }
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page
     .getByTestId("textarea_str_template")
@@ -232,7 +232,7 @@ test("user must be able to check similarity between embedding texts", async ({
     .nth(0)
     .fill("similarity_score");
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.mouse.wheel(0, 500);
   //connection 1
   const openAiEmbeddingOutput_0 = await page
diff --git a/src/frontend/tests/core/integrations/starter-projects.spec.ts b/src/frontend/tests/core/integrations/starter-projects.spec.ts
index fbee3dbfc..b5c5c8ae0 100644
--- a/src/frontend/tests/core/integrations/starter-projects.spec.ts
+++ b/src/frontend/tests/core/integrations/starter-projects.spec.ts
@@ -74,12 +74,12 @@ test("vector store from starter projects should have its connections and nodes o
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   const edges = await page.locator(".react-flow__edge-interaction").count();
   const nodes = await page.getByTestId("div-generic-node").count();
diff --git a/src/frontend/tests/core/integrations/textInputOutput.spec.ts b/src/frontend/tests/core/integrations/textInputOutput.spec.ts
index 56c6a3b21..3c5dddc75 100644
--- a/src/frontend/tests/core/integrations/textInputOutput.spec.ts
+++ b/src/frontend/tests/core/integrations/textInputOutput.spec.ts
@@ -72,14 +72,14 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let visibleElementHandle;
 
@@ -129,16 +129,16 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const elementsOpenAiOutput = await page
     .getByTestId("handle-openaimodel-shownode-text-right")
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
index 9188f9e30..43d3e996c 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
@@ -34,11 +34,11 @@ test("should be able to move flow from folder, rename it and be displayed on cor
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("flow-configuration-button").click();
   await page.getByText("Settings").click();
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
index 4ac3987a8..cdd62a946 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
@@ -43,9 +43,9 @@ test("should be able to see output preview from grouped components and connect c
     .getByTestId("inputsText Input")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -126,7 +126,7 @@ test("should be able to see output preview from grouped components and connect c
     .getByTestId("outputsText Output")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("fit view").click({
+  await page.getByTestId("fit_view").click({
     force: true,
   });
 
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
index d7ebc853f..612880b24 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
@@ -36,7 +36,7 @@ test("memory should work as expect", async ({ page }) => {
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
@@ -82,7 +82,7 @@ test("memory should work as expect", async ({ page }) => {
 
   await page.waitForTimeout;
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/core/unit/chatInputOutput.spec.ts b/src/frontend/tests/core/unit/chatInputOutput.spec.ts
index 24c9f2425..c6da3a6a9 100644
--- a/src/frontend/tests/core/unit/chatInputOutput.spec.ts
+++ b/src/frontend/tests/core/unit/chatInputOutput.spec.ts
@@ -56,18 +56,18 @@ test("chat_io_teste", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const elementsChatInput = await page
     .locator('[data-testid="handle-chatinput-shownode-message-right"]')
@@ -104,7 +104,7 @@ test("chat_io_teste", async ({ page }) => {
   // Release the mouse
   await page.mouse.up();
 
-  await page.getByLabel("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.getByText("Playground", { exact: true }).last().click();
   await page.waitForSelector('[data-testid="input-chat-playground"]', {
     timeout: 100000,
diff --git a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
index 30938217c..94a682589 100644
--- a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
@@ -45,10 +45,10 @@ test("CodeAreaModalComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("div-generic-node").click();
 
   await page.getByTestId("code-button-modal").click();
diff --git a/src/frontend/tests/core/unit/dropdownComponent.spec.ts b/src/frontend/tests/core/unit/dropdownComponent.spec.ts
index 765ac39cc..91398c67e 100644
--- a/src/frontend/tests/core/unit/dropdownComponent.spec.ts
+++ b/src/frontend/tests/core/unit/dropdownComponent.spec.ts
@@ -46,10 +46,10 @@ test("dropDownComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("title-Amazon Bedrock").click();
 
   await page.getByTestId("dropdown_str_model_id").click();
diff --git a/src/frontend/tests/core/unit/fileUploadComponent.spec.ts b/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
index 08b59e8b8..82d48da88 100644
--- a/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
@@ -46,10 +46,10 @@ test("should be able to upload a file", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   const fileChooserPromise = page.waitForEvent("filechooser");
   await page.getByTestId("icon-FileSearch2").click();
   const fileChooser = await fileChooserPromise;
@@ -67,10 +67,10 @@ test("should be able to upload a file", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("parse data");
@@ -81,10 +81,10 @@ test("should be able to upload a file", async ({ page }) => {
 
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let visibleElementHandle;
 
diff --git a/src/frontend/tests/core/unit/floatComponent.spec.ts b/src/frontend/tests/core/unit/floatComponent.spec.ts
index d1efbb38f..abe31497b 100644
--- a/src/frontend/tests/core/unit/floatComponent.spec.ts
+++ b/src/frontend/tests/core/unit/floatComponent.spec.ts
@@ -43,10 +43,10 @@ test("FloatComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
   await page.locator('//*[@id="float-input"]').click();
diff --git a/src/frontend/tests/core/unit/inputComponent.spec.ts b/src/frontend/tests/core/unit/inputComponent.spec.ts
index 6f3091d02..498d15d7d 100644
--- a/src/frontend/tests/core/unit/inputComponent.spec.ts
+++ b/src/frontend/tests/core/unit/inputComponent.spec.ts
@@ -43,14 +43,14 @@ test("InputComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("popover-anchor-input-collection_name").click();
   await page
     .getByTestId("popover-anchor-input-collection_name")
diff --git a/src/frontend/tests/core/unit/inputListComponent.spec.ts b/src/frontend/tests/core/unit/inputListComponent.spec.ts
index c70d4ca34..dc2d78bc8 100644
--- a/src/frontend/tests/core/unit/inputListComponent.spec.ts
+++ b/src/frontend/tests/core/unit/inputListComponent.spec.ts
@@ -34,10 +34,10 @@ test("InputListComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("inputlist_str_urls_0").fill("test test test test");
 
diff --git a/src/frontend/tests/core/unit/intComponent.spec.ts b/src/frontend/tests/core/unit/intComponent.spec.ts
index ea4d773bf..33d730849 100644
--- a/src/frontend/tests/core/unit/intComponent.spec.ts
+++ b/src/frontend/tests/core/unit/intComponent.spec.ts
@@ -44,14 +44,14 @@ test("IntComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
@@ -78,14 +78,14 @@ test("IntComponent", async ({ page }) => {
 
   await page.getByTestId("title-OpenAI").click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
diff --git a/src/frontend/tests/core/unit/keyPairListComponent.spec.ts b/src/frontend/tests/core/unit/keyPairListComponent.spec.ts
index 144ba785c..ddb54151e 100644
--- a/src/frontend/tests/core/unit/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/core/unit/keyPairListComponent.spec.ts
@@ -43,10 +43,10 @@ test("KeypairListComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
diff --git a/src/frontend/tests/core/unit/linkComponent.spec.ts b/src/frontend/tests/core/unit/linkComponent.spec.ts
index 11c59897f..353802bcf 100644
--- a/src/frontend/tests/core/unit/linkComponent.spec.ts
+++ b/src/frontend/tests/core/unit/linkComponent.spec.ts
@@ -60,8 +60,8 @@ test("user should interact with link component", async ({ context, page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("title-Custom Component").first().click();
 
@@ -90,8 +90,8 @@ test("user should interact with link component", async ({ context, page }) => {
   await page.locator('//*[@id="checkAndSaveBtn"]').click();
   await page.waitForTimeout(500);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   expect(await page.getByText("BUTTON").isVisible()).toBeTruthy();
   expect(await page.getByText("Click me").isVisible()).toBeTruthy();
diff --git a/src/frontend/tests/core/unit/nestedComponent.spec.ts b/src/frontend/tests/core/unit/nestedComponent.spec.ts
index 425ba76c0..1563d0501 100644
--- a/src/frontend/tests/core/unit/nestedComponent.spec.ts
+++ b/src/frontend/tests/core/unit/nestedComponent.spec.ts
@@ -44,10 +44,10 @@ test("NestedComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.click('//*[@id="react-flow-id"]');
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("dict_nesteddict_headers").first().click();
   await page
diff --git a/src/frontend/tests/core/unit/promptModalComponent.spec.ts b/src/frontend/tests/core/unit/promptModalComponent.spec.ts
index 67afc6a42..2d3de858c 100644
--- a/src/frontend/tests/core/unit/promptModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/promptModalComponent.spec.ts
@@ -43,10 +43,10 @@ test("PromptTemplateComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("promptarea_prompt_template").click();
 
   await page
diff --git a/src/frontend/tests/core/unit/sliderComponent.spec.ts b/src/frontend/tests/core/unit/sliderComponent.spec.ts
index 01ad32912..3d81159ba 100644
--- a/src/frontend/tests/core/unit/sliderComponent.spec.ts
+++ b/src/frontend/tests/core/unit/sliderComponent.spec.ts
@@ -53,9 +53,9 @@ test("user should be able to use slider input", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("title-Ollama").click();
   await page.getByTestId("code-button-modal").click();
@@ -80,7 +80,7 @@ test("user should be able to use slider input", async ({ page }) => {
   await page.locator('//*[@id="checkAndSaveBtn"]').click();
   await page.waitForTimeout(500);
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await mutualValidation(page);
 
@@ -88,7 +88,7 @@ test("user should be able to use slider input", async ({ page }) => {
 
   await page.waitForTimeout(500);
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByText("Advanced", { exact: true }).click();
diff --git a/src/frontend/tests/core/unit/tableInputComponent.spec.ts b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
index b90052bc7..fe807bd96 100644
--- a/src/frontend/tests/core/unit/tableInputComponent.spec.ts
+++ b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
@@ -57,8 +57,8 @@ test("user must be able to interact with table input component", async ({
     .getByTestId("helpersCustom Component")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("div-generic-node").click();
   await page.getByTestId("code-button-modal").click();
diff --git a/src/frontend/tests/core/unit/textAreaModalComponent.spec.ts b/src/frontend/tests/core/unit/textAreaModalComponent.spec.ts
index c6b291dc1..de70c7d31 100644
--- a/src/frontend/tests/core/unit/textAreaModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/textAreaModalComponent.spec.ts
@@ -44,14 +44,14 @@ test("TextAreaModalComponent", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("promptarea_prompt_template").click();
 
   await page.getByTestId("modal-promptarea_prompt_template").fill("{text}");
diff --git a/src/frontend/tests/core/unit/toggleComponent.spec.ts b/src/frontend/tests/core/unit/toggleComponent.spec.ts
index 5a3c59338..c7dda4be3 100644
--- a/src/frontend/tests/core/unit/toggleComponent.spec.ts
+++ b/src/frontend/tests/core/unit/toggleComponent.spec.ts
@@ -49,14 +49,14 @@ test("ToggleComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("div-generic-node").click();
 
@@ -70,11 +70,11 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByText("Close").last().click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("toggle_bool_load_hidden").click();
   expect(
@@ -103,14 +103,14 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.getByTestId("div-generic-node").click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
diff --git a/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts b/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
index 955bec8ba..c620ab7a5 100644
--- a/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
+++ b/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
@@ -32,14 +32,14 @@ test("user should be able to download a flow or a component", async ({
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
@@ -135,14 +135,14 @@ test("user should be able to duplicate a flow or a component", async ({
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByText("Chat Input", { exact: true }).click();
   await page.getByTestId("more-options-modal").click();
diff --git a/src/frontend/tests/extended/features/auto-save-off.spec.ts b/src/frontend/tests/extended/features/auto-save-off.spec.ts
index 141f93f73..26972a4e5 100644
--- a/src/frontend/tests/extended/features/auto-save-off.spec.ts
+++ b/src/frontend/tests/extended/features/auto-save-off.spec.ts
@@ -65,11 +65,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 5000,
   });
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   expect(await page.getByText("Saved").isVisible()).toBeTruthy();
 
@@ -122,11 +122,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 5000,
   });
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("icon-ChevronLeft").last().click();
 
@@ -154,11 +154,11 @@ test("user should be able to manually save a flow when the auto_save is off", as
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 5000,
   });
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByTestId("save-flow-button").click();
   await page.getByTestId("icon-ChevronLeft").last().click();
diff --git a/src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts b/src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts
index 88c12fa93..8077b05ad 100644
--- a/src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts
+++ b/src/frontend/tests/extended/features/filterEdge-shard-1.spec.ts
@@ -47,10 +47,10 @@ test("user must see on handle click the possibility connections - RetrievalQA",
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.waitForTimeout(500);
 
   let visibleElementHandle;
diff --git a/src/frontend/tests/extended/features/flowPage.spec.ts b/src/frontend/tests/extended/features/flowPage.spec.ts
index 4bbb08955..965195d1a 100644
--- a/src/frontend/tests/extended/features/flowPage.spec.ts
+++ b/src/frontend/tests/extended/features/flowPage.spec.ts
@@ -42,9 +42,9 @@ test.describe("Flow Page tests", () => {
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
-    await page.getByTitle("fit view").click();
-    await page.getByTitle("zoom out").click();
-    await page.getByTitle("zoom out").click();
-    await page.getByTitle("zoom out").click();
+    await page.getByTestId("fit_view").click();
+    await page.getByTestId("zoom_out").click();
+    await page.getByTestId("zoom_out").click();
+    await page.getByTestId("zoom_out").click();
   });
 });
diff --git a/src/frontend/tests/extended/features/langflowShortcuts.spec.ts b/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
index 2501b1cf5..be252f3aa 100644
--- a/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
@@ -50,14 +50,14 @@ test("LangflowShortcuts", async ({ page }) => {
 
   await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
   await page.getByTestId("generic-node-title-arrangement").click();
   await page.keyboard.press(`${control}+Shift+A`);
   await page.getByText("Close").last().click();
diff --git a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
index a848d130f..312eacd58 100644
--- a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
+++ b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
@@ -51,14 +51,14 @@ test("user should not be able to upload a file larger than the limit", async ({
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/extended/features/sticky-notes.spec.ts b/src/frontend/tests/extended/features/sticky-notes.spec.ts
index 3ffe20492..24ce31c35 100644
--- a/src/frontend/tests/extended/features/sticky-notes.spec.ts
+++ b/src/frontend/tests/extended/features/sticky-notes.spec.ts
@@ -80,13 +80,13 @@ The future of AI is both exciting and uncertain. As the technology continues to
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("note_node").click();
 
@@ -145,9 +145,9 @@ The future of AI is both exciting and uncertain. As the technology continues to
 
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   targetElement.focus();
   targetElement.click();
diff --git a/src/frontend/tests/extended/features/stop-button-playground.spec.ts b/src/frontend/tests/extended/features/stop-button-playground.spec.ts
index be420a581..87d22050f 100644
--- a/src/frontend/tests/extended/features/stop-button-playground.spec.ts
+++ b/src/frontend/tests/extended/features/stop-button-playground.spec.ts
@@ -44,10 +44,10 @@ test("User must be able to stop building from inside Playground", async ({
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("chat output");
@@ -58,10 +58,10 @@ test("User must be able to stop building from inside Playground", async ({
     .getByTestId("outputsChat Output")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("div-generic-node").nth(0).click();
 
@@ -112,9 +112,9 @@ class CustomComponent(Component):
 
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   //connection 1
   const elementCustomComponentOutput = await page
diff --git a/src/frontend/tests/extended/features/twoEdges.spec.ts b/src/frontend/tests/extended/features/twoEdges.spec.ts
index 52f756ad2..6ed078605 100644
--- a/src/frontend/tests/extended/features/twoEdges.spec.ts
+++ b/src/frontend/tests/extended/features/twoEdges.spec.ts
@@ -35,16 +35,16 @@ test("user should be able to see multiple edges and interact with them", async (
   await page.getByText("Search Results", { exact: true }).first().isVisible();
 
   const focusElementsOnBoard = async ({ page }) => {
-    await page.waitForSelector('[title="fit view"]', { timeout: 30000 });
-    const focusElements = await page.getByTitle("fit view");
+    await page.waitForSelector('[data-testid="fit_view"]', { timeout: 30000 });
+    const focusElements = await page.getByTestId("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("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("input-inspection-retriever").first().click();
   await page.getByText("Retriever", { exact: true }).first().isHidden();
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
index db05bfc7e..0cdae402b 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
@@ -34,14 +34,14 @@ test("user must be able to see output inspection", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
index 4594886b3..3275beec5 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
@@ -34,14 +34,14 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/extended/integrations/duckduckgo.spec.ts b/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
index 81a2007be..6f25abbe6 100644
--- a/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
+++ b/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
@@ -43,7 +43,7 @@ test("user should be able to use duckduckgo search component", async ({
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page
     .getByTestId("popover-anchor-input-input_value")
@@ -51,7 +51,7 @@ test("user should be able to use duckduckgo search component", async ({
 
   await page.getByTestId("button_run_duckduckgo search").click();
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   const result = await Promise.race([
     page.waitForSelector("text=built successfully", { timeout: 30000 }),
diff --git a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
index c039c4efe..d50754490 100644
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
@@ -36,14 +36,14 @@ test("user must be able to send an image on chat using advanced tool on ChatInpu
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
index 08d08d468..6ac852b70 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
@@ -37,14 +37,14 @@ test("should delete rows from table message", async ({ page }) => {
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
index 4a3c9fd96..c1adc4277 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
@@ -38,7 +38,7 @@ test("freeze must work correctly", async ({ page }) => {
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
 
   await page.getByText("openai").first().click();
   await page.keyboard.press("Delete");
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
index b60f3f86f..fbe3e3d54 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
@@ -46,9 +46,9 @@ test("user should be able to use ComposIO without getting api_key error", async
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
 
@@ -99,9 +99,9 @@ test("user should be able to use connect tools", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
 
@@ -117,9 +117,9 @@ test("user should be able to use connect tools", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   //connection
   const searchApiOutput = await page
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts
index 3e442068d..4916f0a92 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-12.spec.ts
@@ -46,12 +46,12 @@ test("user should be able to connect RetrieverTool to another components", async
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
   await page
     .locator('//*[@id="react-flow-id"]')
     .hover()
@@ -76,8 +76,8 @@ test("user should be able to connect RetrieverTool to another components", async
 
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("fit view").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("fit_view").click();
 
   //connection
   const chromaDbOutput = await page
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-2.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-2.spec.ts
index 09672bc54..3e80aa900 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-2.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-2.spec.ts
@@ -52,14 +52,14 @@ test("should use webhook component on API", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.waitForTimeout(1000);
   await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
index ff617db5d..76a8751a7 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
@@ -57,10 +57,10 @@ test("should copy code from playground modal", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("chat input");
@@ -76,10 +76,10 @@ test("should copy code from playground modal", async ({ page }) => {
   await page.getByPlaceholder("Search").fill("openai");
   await page.waitForTimeout(1000);
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page
     .getByTestId("modelsOpenAI")
@@ -87,15 +87,15 @@ test("should copy code from playground modal", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
 
@@ -126,8 +126,8 @@ test("should copy code from playground modal", async ({ page }) => {
   }
 
   // Click and hold on the first element
-  await page.getByTitle("zoom in").click();
-  await page.getByTitle("zoom in").click();
+  await page.getByTestId("zoom_in").click();
+  await page.getByTestId("zoom_in").click();
 
   await visibleElementHandle.hover();
   await page.mouse.down();
@@ -176,7 +176,7 @@ test("should copy code from playground modal", async ({ page }) => {
   // await visibleElementHandle.hover();
   await page.mouse.up();
 
-  await page.getByLabel("fit view").click();
+  await page.getByTestId("fit_view").click();
   await page.getByText("Playground", { exact: true }).last().click();
   await page.waitForSelector('[data-testid="input-chat-playground"]', {
     timeout: 100000,
@@ -256,7 +256,7 @@ test("playground button should be enabled or disabled", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.waitForSelector('[title="fit view"]', {
+  await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-6.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-6.spec.ts
index 5290b4dcc..a53231ebc 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-6.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-6.spec.ts
@@ -40,8 +40,8 @@ test("should be able to see error when something goes wrong on Code Modal", asyn
     .getByTestId("helpersCustom Component")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   await page.getByTestId("div-generic-node").click();
   await page.getByTestId("code-button-modal").click();
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
index 0f8eeb1c7..145eff8bf 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
@@ -41,9 +41,9 @@ test("should be able to select all with ctrl + A on advanced modal", async ({
     .getByTestId("embeddingsOllama Embeddings")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-8.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-8.spec.ts
index d5a47d12c..cc207dafd 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-8.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-8.spec.ts
@@ -40,8 +40,8 @@ test("should interact with api request", async ({ page }) => {
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
-  await page.getByTitle("fit view").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
-  await page.getByTitle("zoom out").click();
+  await page.getByTestId("fit_view").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
+  await page.getByTestId("zoom_out").click();
 });
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 000000000..5fca3f84b
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}
\ No newline at end of file