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/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,
    });