refactor: Improve Reactflow wrapping around toolbars, canvas controls, etc (#8130)

* update the wrapping of the reactflow * [autofix.ci] apply automated fixes * test button fix * [autofix.ci] apply automated fixes * selector fix * fix slash --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-05-21 13:46:46 -05:00 · 2025-05-21 13:46:46 -05:00 · 3889d5ff3b
commit 3889d5ff3b
parent 076b228599
36 changed files with 101 additions and 106 deletions
--- a/src/frontend/src/components/core/canvasControlsComponent/index.tsx
+++ b/src/frontend/src/components/core/canvasControlsComponent/index.tsx
@ -109,7 +109,7 @@ const CanvasControls = ({ children }) => {
  return (
    <Panel
      data-testid="canvas_controls"
-      className="react-flow__controls !m-2 flex !flex-row 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"
+      className="react-flow__controls !left-auto !m-2 flex !flex-row 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 */}
--- a/src/frontend/src/components/core/flowToolbarComponent/index.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/index.tsx
@ -49,7 +49,7 @@ const FlowToolbar = memo(function FlowToolbar(): JSX.Element {

  return (
    <>
-      <Panel className="!m-2" position="top-right">
+      <Panel className="!top-auto !m-2" position="top-right">
        <div
          className={cn(
            "hover:shadow-round-btn-shadow flex h-11 items-center justify-center gap-7 rounded-md border bg-background px-1.5 shadow transition-all",
--- a/src/frontend/src/modals/IOModal/new-modal.tsx
+++ b/src/frontend/src/modals/IOModal/new-modal.tsx
@ -14,6 +14,7 @@ import { useUtilityStore } from "@/stores/utilityStore";
 import { swatchColors } from "@/utils/styleUtils";
 import { useCallback, useEffect, useState } from "react";
 import { v5 as uuidv5 } from "uuid";
+import { useShallow } from "zustand/react/shallow";
 import LangflowLogoColor from "../../assets/LangflowLogoColor.svg?react";
 import IconComponent from "../../components/common/genericIconComponent";
 import ShadTooltip from "../../components/common/shadTooltipComponent";
@ -28,6 +29,7 @@ import BaseModal from "../baseModal";
 import { ChatViewWrapper } from "./components/chat-view-wrapper";
 import { SelectedViewField } from "./components/selected-view-field";
 import { SidebarOpenView } from "./components/sidebar-open-view";
+
 export default function IOModal({
  children,
  open,
@ -37,29 +39,33 @@ export default function IOModal({
  canvasOpen,
  playgroundPage,
 }: IOModalPropsType): JSX.Element {
-  const allNodes = useFlowStore((state) => state.nodes);
  const setIOModalOpen = useFlowsManagerStore((state) => state.setIOModalOpen);
-  const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput",
+  const inputs = useFlowStore((state) => state.inputs);
+  const outputs = useFlowStore((state) => state.outputs);
+  const nodes = useFlowStore((state) => state.nodes);
+  const buildFlow = useFlowStore((state) => state.buildFlow);
+  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
+  const isBuilding = useFlowStore((state) => state.isBuilding);
+  const { flowIcon, flowId, flowGradient, flowName } = useFlowStore(
+    useShallow((state) => ({
+      flowIcon: state.currentFlow?.icon,
+      flowId: state.currentFlow?.id,
+      flowGradient: state.currentFlow?.gradient,
+      flowName: state.currentFlow?.name,
+    })),
  );
-  const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput",
-  );
-  const outputs = useFlowStore((state) => state.outputs).filter(
+  const filteredInputs = inputs.filter((input) => input.type !== "ChatInput");
+  const chatInput = inputs.find((input) => input.type === "ChatInput");
+  const filteredOutputs = outputs.filter(
    (output) => output.type !== "ChatOutput",
  );
-  const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput",
-  );
-  const nodes = useFlowStore((state) => state.nodes).filter(
+  const chatOutput = outputs.find((output) => output.type === "ChatOutput");
+  const filteredNodes = nodes.filter(
    (node) =>
      inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id),
+      filteredOutputs.some((output) => output.id === node.id),
  );
  const haveChat = chatInput || chatOutput;
-  const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
-  );
  const setErrorData = useAlertStore((state) => state.setErrorData);
  const setSuccessData = useAlertStore((state) => state.setSuccessData);
  const deleteSession = useMessagesStore((state) => state.deleteSession);
@ -68,14 +74,12 @@ export default function IOModal({
  const currentFlowId = playgroundPage
    ? uuidv5(`${clientId}_${realFlowId}`, uuidv5.DNS)
    : realFlowId;
-  const currentFlow = useFlowStore((state) => state.currentFlow);
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const { mutate: deleteSessionFunction } = useDeleteMessages();
  const [visibleSession, setvisibleSession] = useState<string | undefined>(
    currentFlowId,
  );
-  const flowName = useFlowStore((state) => state.currentFlow?.name);
  const PlaygroundTitle = playgroundPage && flowName ? flowName : "Playground";

  useEffect(() => {
@ -113,10 +117,10 @@ export default function IOModal({

  function startView() {
    if (!chatInput && !chatOutput) {
-      if (inputs.length > 0) {
-        return inputs[0];
+      if (filteredInputs.length > 0) {
+        return filteredInputs[0];
      } else {
-        return outputs[0];
+        return filteredOutputs[0];
      }
    } else {
      return undefined;
@ -127,10 +131,6 @@ export default function IOModal({
    { type: string; id: string } | undefined
  >(startView());

-  const buildFlow = useFlowStore((state) => state.buildFlow);
-  const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
-
-  const isBuilding = useFlowStore((state) => state.isBuilding);
  const messages = useMessagesStore((state) => state.messages);
  const [sessions, setSessions] = useState<string[]>(
    Array.from(
@ -184,10 +184,6 @@ export default function IOModal({
    [isBuilding, setIsBuilding, chatValue, chatInput?.id, sessionId, buildFlow],
  );

-  useEffect(() => {
-    setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
-  }, [allNodes.length]);
-
  useEffect(() => {
    const sessions = new Set<string>();
    messages
@ -270,9 +266,9 @@ export default function IOModal({
  }, [playgroundPage, messages]);

  const swatchIndex =
-    (currentFlow?.gradient && !isNaN(parseInt(currentFlow?.gradient))
-      ? parseInt(currentFlow?.gradient)
-      : getNumberFromString(currentFlow?.gradient ?? currentFlow?.id ?? "")) %
+    (flowGradient && !isNaN(parseInt(flowGradient))
+      ? parseInt(flowGradient)
+      : getNumberFromString(flowGradient ?? flowId ?? "")) %
    swatchColors.length;

  return (
@ -313,7 +309,7 @@ export default function IOModal({
                      )}
                    >
                      <IconComponent
-                        name={currentFlow?.icon ?? "Workflow"}
+                        name={flowIcon ?? "Workflow"}
                        className="h-3.5 w-3.5"
                      />
                    </div>
@ -392,11 +388,11 @@ export default function IOModal({
                  selectedViewField={selectedViewField}
                  setSelectedViewField={setSelectedViewField}
                  haveChat={haveChat}
-                  inputs={inputs}
-                  outputs={outputs}
+                  inputs={filteredInputs}
+                  outputs={filteredOutputs}
                  sessions={sessions}
                  currentFlowId={currentFlowId}
-                  nodes={nodes}
+                  nodes={filteredNodes}
                />
              )}
              <ChatViewWrapper
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
@ -48,7 +48,7 @@ export const MemoizedCanvasControls = memo(
 export const MemoizedSidebarTrigger = memo(() => (
  <Panel
    className={cn(
-      "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 transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent",
+      "react-flow__controls !top-auto !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent",
      "pointer-events-auto opacity-100 group-data-[open=true]/sidebar-wrapper:pointer-events-none group-data-[open=true]/sidebar-wrapper:-translate-x-full group-data-[open=true]/sidebar-wrapper:opacity-0",
    )}
    position="top-left"
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@ -141,11 +141,12 @@ export default function Page({
  const shadowBoxHeight = NOTE_NODE_MIN_HEIGHT * (zoomLevel || 1);
  const shadowBoxBackgroundColor = COLOR_OPTIONS[Object.keys(COLOR_OPTIONS)[0]];

-  function handleGroupNode() {
+  const handleGroupNode = useCallback(() => {
    takeSnapshot();
-    if (validateSelection(lastSelection!, edges).length === 0) {
-      const clonedNodes = cloneDeep(nodes);
-      const clonedEdges = cloneDeep(edges);
+    const edgesState = useFlowStore.getState().edges;
+    if (validateSelection(lastSelection!, edgesState).length === 0) {
+      const clonedNodes = cloneDeep(useFlowStore.getState().nodes);
+      const clonedEdges = cloneDeep(edgesState);
      const clonedSelection = cloneDeep(lastSelection);
      updateIds({ nodes: clonedNodes, edges: clonedEdges }, clonedSelection!);
      const { newFlow } = generateFlow(
@ -169,10 +170,10 @@ export default function Page({
    } else {
      setErrorData({
        title: INVALID_SELECTION_ERROR_ALERT,
-        list: validateSelection(lastSelection!, edges),
+        list: validateSelection(lastSelection!, edgesState),
      });
    }
-  }
+  }, [lastSelection, setNodes, setErrorData, takeSnapshot]);

  useEffect(() => {
    const handleMouseMove = (event) => {
@ -556,6 +557,27 @@ export default function Page({
    <div className="h-full w-full bg-canvas" ref={reactFlowWrapper}>
      {showCanvas ? (
        <div id="react-flow-id" className="h-full w-full bg-canvas">
+          {!view && (
+            <>
+              <MemoizedCanvasControls
+                setIsAddingNote={setIsAddingNote}
+                position={position.current}
+                shadowBoxWidth={shadowBoxWidth}
+                shadowBoxHeight={shadowBoxHeight}
+              />
+              <FlowToolbar />
+            </>
+          )}
+          <MemoizedSidebarTrigger />
+          <div className={cn(componentsToUpdate.length === 0 && "hidden")}>
+            <UpdateAllComponents />
+          </div>
+          <SelectionMenu
+            lastSelection={lastSelection}
+            isVisible={selectionMenuVisible}
+            nodes={lastSelection?.nodes}
+            onClick={handleGroupNode}
+          />
          <ReactFlow<AllNodeType, EdgeType>
            nodes={nodes}
            edges={edges}
@ -595,29 +617,6 @@ export default function Page({
            onEdgeClick={handleEdgeClick}
          >
            <MemoizedBackground />
-            {!view && (
-              <>
-                <MemoizedCanvasControls
-                  setIsAddingNote={setIsAddingNote}
-                  position={position.current}
-                  shadowBoxWidth={shadowBoxWidth}
-                  shadowBoxHeight={shadowBoxHeight}
-                />
-                <FlowToolbar />
-              </>
-            )}
-            <MemoizedSidebarTrigger />
-            <div className={cn(componentsToUpdate.length === 0 && "hidden")}>
-              <UpdateAllComponents />
-            </div>
-            <SelectionMenu
-              lastSelection={lastSelection}
-              isVisible={selectionMenuVisible}
-              nodes={lastSelection?.nodes}
-              onClick={() => {
-                handleGroupNode();
-              }}
-            />
          </ReactFlow>
          <div
            id="shadow-box"
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@ -33,8 +33,7 @@ test(
    await page.getByText("Chat Input", { exact: true }).click();
    await page.getByTestId("edit-button-modal").last().click();
    await page.getByText("Close").last().click();
-
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    // Read the image file as a binary string
    const filePath = "tests/assets/chain.png";
--- a/src/frontend/tests/core/features/playground.spec.ts
+++ b/src/frontend/tests/core/features/playground.spec.ts
@ -71,7 +71,7 @@ test(
    await page.getByTestId("handle-textoutput-shownode-message-right").click();
    await page.getByTestId("handle-chatoutput-noshownode-text-target").click();

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 100000,
    });
--- a/src/frontend/tests/core/features/saveComponents.spec.ts
+++ b/src/frontend/tests/core/features/saveComponents.spec.ts
@ -35,7 +35,7 @@ test.describe("save component tests", () => {

      // Now dispatch
      await page.dispatchEvent(
-        "//*[@id='react-flow-id']/div[1]/div[1]/div",
+        "//*[@data-testid='rf__wrapper']/div[1]/div",
        "drop",
        {
          dataTransfer,
@ -48,9 +48,8 @@ test.describe("save component tests", () => {
        expect(true).toBeTruthy();
      }

-      await page
-        .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[3]')
-        .click();
+      // Log button element
+      await page.getByTestId("fit_view").click();

      await zoomOut(page, 2);

--- a/src/frontend/tests/core/integrations/Basic
+++ b/src/frontend/tests/core/integrations/Basic
@ -32,7 +32,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Blog
+++ b/src/frontend/tests/core/integrations/Blog
@ -50,7 +50,7 @@ withEventDeliveryModes(
      timeout: 30000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByPlaceholder(
        "No chat input variables found. Click to run your flow.",
--- a/src/frontend/tests/core/integrations/Document
+++ b/src/frontend/tests/core/integrations/Document
@ -38,7 +38,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Dynamic
+++ b/src/frontend/tests/core/integrations/Dynamic
@ -42,7 +42,7 @@ test.skip(
    await page.getByText("built successfully").last().click({
      timeout: 15000,
    });
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.waitForTimeout(1000);
    expect(page.getByText("apple").last()).toBeVisible();
    const textContents = await page
--- a/src/frontend/tests/core/integrations/Hierarchical
+++ b/src/frontend/tests/core/integrations/Hierarchical
@ -48,7 +48,7 @@ test.skip(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    expect(await page.locator(".markdown").count()).toBeGreaterThan(0);

--- a/src/frontend/tests/core/integrations/Image
+++ b/src/frontend/tests/core/integrations/Image
@ -39,7 +39,7 @@ withEventDeliveryModes(

    await initialGPTsetup(page);

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 100000,
--- a/src/frontend/tests/core/integrations/Instagram
+++ b/src/frontend/tests/core/integrations/Instagram
@ -50,7 +50,7 @@ test(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Invoice
+++ b/src/frontend/tests/core/integrations/Invoice
@ -44,7 +44,7 @@ test(
    });

    // Switch to Playground
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    // Wait for the playground to be ready
    const inputPlaceholder = page
--- a/src/frontend/tests/core/integrations/Market
+++ b/src/frontend/tests/core/integrations/Market
@ -50,7 +50,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Memory
+++ b/src/frontend/tests/core/integrations/Memory
@ -31,7 +31,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page
      .getByText("No input message provided.", { exact: true })
--- a/src/frontend/tests/core/integrations/Prompt
+++ b/src/frontend/tests/core/integrations/Prompt
@ -39,7 +39,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/SEO
+++ b/src/frontend/tests/core/integrations/SEO
@ -39,7 +39,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/SaaS
+++ b/src/frontend/tests/core/integrations/SaaS
@ -39,7 +39,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Sequential
+++ b/src/frontend/tests/core/integrations/Sequential
@ -37,7 +37,7 @@ test.skip(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    expect(await page.locator(".markdown").count()).toBeGreaterThan(0);

--- a/src/frontend/tests/core/integrations/Text
+++ b/src/frontend/tests/core/integrations/Text
@ -50,7 +50,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("Add a Chat Input component to your flow to send messages.", {
        exact: true,
--- a/src/frontend/tests/core/integrations/Travel
+++ b/src/frontend/tests/core/integrations/Travel
@ -71,7 +71,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector("text=default session", {
      timeout: 30000,
--- a/src/frontend/tests/core/integrations/Twitter
+++ b/src/frontend/tests/core/integrations/Twitter
@ -41,7 +41,7 @@ withEventDeliveryModes(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page
      .getByText("No input message provided.", { exact: true })
      .last()
--- a/src/frontend/tests/core/integrations/Vector
+++ b/src/frontend/tests/core/integrations/Vector
@ -254,7 +254,7 @@ withEventDeliveryModes(
      timeout: 30000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 60000,
    });
--- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts
+++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
@ -350,7 +350,7 @@ test(
    await page.getByTestId("dropdown_str_model_name").click();
    await page.getByTestId("gpt-4o-1-option").click();
    await page.getByTestId("fit_view").click();
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 100000,
    });
--- a/src/frontend/tests/core/integrations/textInputOutput.spec.ts
+++ b/src/frontend/tests/core/integrations/textInputOutput.spec.ts
@ -144,7 +144,7 @@ test.skip(
    await page.getByTestId("dropdown_str_model_name").click();
    await page.getByTestId("gpt-4o-1-option").click();
    await page.waitForTimeout(1000);
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.getByTestId("button_run_text_output").click();
    await page
      .getByTestId(/^rf__node-TextOutput-[a-zA-Z0-9]+$/)
@ -167,7 +167,7 @@ test.skip(
      .getByTestId(/^rf__node-TextInput-[a-zA-Z0-9]+$/)
      .getByTestId("textarea_str_input_value")
      .fill("This is a test, again just to be sure!");
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.getByText("Run Flow", { exact: true }).click();
    await page.waitForTimeout(5000);
    textInputContent = await page
--- a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
@ -105,7 +105,7 @@ AI:

    await page.locator('//*[@id="react-flow-id"]').hover();

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="button-send"]', {
      timeout: 100000,
--- a/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
@ -303,7 +303,7 @@ test(
      .first()
      .click();

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector("text=Run Flow", {
      timeout: 30000,
@ -369,7 +369,9 @@ test(
        timeout: 1000,
      });
      await page.getByTestId(`remove-file-button-${renamedTxtFile}`).click();
-      await page.getByText("Playground", { exact: true }).last().click();
+      await page
+        .getByRole("button", { name: "Playground", exact: true })
+        .click();
      await page.getByTestId("icon-MoreHorizontal").last().click();
      await page.getByText("Delete", { exact: true }).last().click();

--- a/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
@ -26,7 +26,7 @@ test(
    await page.mouse.up();
    await page.mouse.down();

-    await page.locator('//*[@id="react-flow-id"]/div/div[2]/button[3]').click();
+    await page.getByTestId("fit_view").click();

    await adjustScreenView(page);
    await page.getByTestId("generic-node-title-arrangement").click();
--- a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
+++ b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
@ -44,7 +44,7 @@ test(
    await page.getByTestId("edit-button-modal").last().click();
    await page.getByText("Close").last().click();

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    // Read the image file as a binary string
    const filePath = "tests/assets/chain.png";
--- a/src/frontend/tests/extended/features/stop-button-playground.spec.ts
+++ b/src/frontend/tests/extended/features/stop-button-playground.spec.ts
@ -109,7 +109,7 @@ class CustomComponent(Component):

    await page.getByTestId("button_run_chat output").click();

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="button-stop"]', {
      timeout: 30000,
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
@ -24,7 +24,7 @@ test(

    await initialGPTsetup(page);

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 100000,
@ -56,7 +56,7 @@ test(
      .fill(
        "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
      );
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="button-send"]', {
      timeout: 100000,
@ -83,7 +83,7 @@ test(
      .nth(0)
      .fill("TestSenderNameAI");

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="button-send"]', {
      timeout: 100000,
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
@ -41,7 +41,7 @@ test(
      timeout: 15000,
    });

-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();

    await page.waitForSelector('[data-testid="button-send"]', {
      timeout: 100000,
--- a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
@ -81,7 +81,7 @@ test(
      .click();

    await page.getByTestId("fit_view").click();
-    await page.getByText("Playground", { exact: true }).last().click();
+    await page.getByRole("button", { name: "Playground", exact: true }).click();
    await page.waitForSelector('[data-testid="input-chat-playground"]', {
      timeout: 100000,
    });