diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 83c6c80c1..a88bd9573 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -67,6 +67,7 @@ export default function FlowToolbar(): JSX.Element {
               ? "button-disable text-muted-foreground"
               : "",
           )}
+          data-testid="shared-button-flow"
         >
           <ForwardedIconComponent
             name="Share3"
diff --git a/src/frontend/tests/end-to-end/store.spec.ts b/src/frontend/tests/end-to-end/store.spec.ts
index 9ca0b040d..35cf060c1 100644
--- a/src/frontend/tests/end-to-end/store.spec.ts
+++ b/src/frontend/tests/end-to-end/store.spec.ts
@@ -259,11 +259,11 @@ test("should share component with share button", async ({ page }) => {
   await page.getByText("Save").last().click();
   await page.getByText("Close").last().click();
 
-  await page.waitForSelector('[data-testid="icon-Share3"]', {
+  await page.waitForSelector('[data-testid="shared-button-flow"]', {
     timeout: 100000,
   });
 
-  await page.getByTestId("icon-Share3").first().click();
+  await page.getByTestId("shared-button-flow").first().click();
   await page.getByText("Name:").isVisible();
   await page.getByText("Description:").isVisible();
   await page.getByText("Set workflow status to public").isVisible();
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 6a8c4b246..9857cfba6 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -69,37 +69,36 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  const component1 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]',
+  );
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-    )
-    .hover();
+  const element1 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
+  );
+
+  const component2 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]',
+  );
+
+  const element2 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
+  );
+
+  // ensure elements popups are not blocking
+  component1.blur();
+  component2.blur();
+
+  // Click and hold on the first element and move to the second element
+  await element1?.dragTo(element2);
+
+  await page.mouse.up();
+
+  await element1.hover();
   await page.mouse.down();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
-
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  await component2.hover();
 
   // Release the mouse
   await page.mouse.up();
@@ -122,38 +121,32 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
+  const component3 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]',
+  );
 
-  // Click and hold on the first element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
-    )
-    .hover();
+  const element3 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
+  );
+
+  const element4 = await page.locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
+  );
+
+  // ensure elements popups are not blocking
+  component2.blur();
+  component3.blur();
+
+  // Click and hold on the first element and move to the second element
+  await element4?.dragTo(element3);
+
+  await page.mouse.up();
+
+  await element4.hover();
   await page.mouse.down();
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
-
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  await element3.hover();
 
   // Release the mouse
   await page.mouse.up();