✅ (index.tsx): add data-testid attribute to shared button for testing

✅ (store.spec.ts): update test selector to use new data-testid attribute
♻️ (textInputOutput.spec.ts): refactor element selection and interaction logic for clarity and maintainability

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"

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();

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
+  const component1 = await page.locator(
-    .locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]',
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
+  );
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
 
-  await page
+  const element1 = await page.locator(
-    .locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
+  );
-    )
+
-    .hover();
+  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
+  await component2.hover();
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .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
+  const component3 = await page.locator(
-    .locator(
+    '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]',
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
+  );
-    )
-    .waitFor({
-      state: "visible",
-      timeout: 30000,
-    });
 
-  // Click and hold on the first element
+  const element3 = await page.locator(
-  await page
+    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    .locator(
+  );
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]',
+
-    )
+  const element4 = await page.locator(
-    .hover();
+    '//*[@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
+  await element3.hover();
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
 
   // Release the mouse
   await page.mouse.up();