test: update data-testid attributes for chat memory and OpenAI model elements (#5823)

* 🐛 (generalBugs-shard-9.spec.ts): fix incorrect test selector for elementChatMemoryOutput to match updated element ID
🐛 (generalBugs-shard-3.spec.ts): fix incorrect test selector for elementsOpenAiOutput to match updated element ID

* 📝 (refreshButton.tsx): add data-testid attribute to RefreshButton component for testing purposes
🐛 (Vector Store.spec.ts): fix import statement to include 'expect' in Playwright test file
🐛 (Vector Store.spec.ts): remove unnecessary test.skip block for ASTRA_DB_API_ENDPOINT
🐛 (Vector Store.spec.ts): fix selectors and interactions for refresh buttons and dropdown options in Playwright test file

* ✨ (freeze-path.spec.ts): refactor test cases to use a new helper function moveSlider for interacting with slider elements in a more efficient and readable way

src/frontend/src/components/ui/refreshButton.tsx

@@ -48,6 +48,7 @@ function RefreshButton({
       id={id}
       size={"icon"}
       loading={isLoading}
+      data-testid={id}
     >
       {button_text && <span className="mr-1">{button_text}</span>}
       <IconComponent

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, Page, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
@@ -45,14 +45,6 @@ test(
       .getByTestId("default_slider_display_value")
       .click({ force: true });
 
-    await evaluateReactStateChanges(
-      page,
-      '[data-testid="slider_input"]',
-      "1.0",
-    );
-
-    await page.keyboard.press("Enter");
-
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
     });
@@ -84,11 +76,7 @@ test(
       timeout: 1000,
     });
 
-    await evaluateReactStateChanges(
+    await moveSlider(page, "right", false);
-      page,
-      '[data-testid="slider_input"]',
-      "1.2",
-    );
 
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
@@ -172,3 +160,27 @@ test(
     expect(secondRandomTextGeneratedByAI).toEqual(thirdRandomTextGeneratedByAI);
   },
 );
+
+async function moveSlider(
+  page: Page,
+  side: "left" | "right",
+  advanced: boolean = false,
+) {
+  const thumbSelector = `slider_thumb${advanced ? "_advanced" : ""}`;
+  const trackSelector = `slider_track${advanced ? "_advanced" : ""}`;
+
+  await page.getByTestId(thumbSelector).click();
+
+  const trackBoundingBox = await page.getByTestId(trackSelector).boundingBox();
+
+  if (trackBoundingBox) {
+    const moveDistance =
+      trackBoundingBox.width * 0.1 * (side === "left" ? -1 : 1);
+    const centerX = trackBoundingBox.x + trackBoundingBox.width / 2;
+    const centerY = trackBoundingBox.y + trackBoundingBox.height / 2;
+
+    await page.mouse.move(centerX + moveDistance, centerY);
+    await page.mouse.down();
+    await page.mouse.up();
+  }
+}

src/frontend/tests/core/integrations/Vector Store.spec.ts

@@ -1,4 +1,4 @@
-import { Page, test } from "@playwright/test";
+import { expect, Page, test } from "@playwright/test";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 import { extractAndCleanCode } from "../../utils/extract-and-clean-code";
@@ -11,10 +11,7 @@ test(
       !process?.env?.OPENAI_API_KEY,
       "OPENAI_API_KEY required to run this test",
     );
-    test.skip(
+
-      !process?.env?.ASTRA_DB_API_ENDPOINT,
-      "ASTRA_DB_API_ENDPOINT required to run this test",
-    );
     test.skip(
       !process?.env?.ASTRA_DB_APPLICATION_TOKEN,
       "ASTRA_DB_APPLICATION_TOKEN required to run this test",
@@ -99,15 +96,51 @@ test(
       .getByTestId("popover-anchor-input-token")
       .nth(1)
       .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
-    // Astra DB endpoints
+
     await page
-      .getByTestId("popover-anchor-input-api_endpoint")
+      .getByTestId("popover-anchor-input-collection_name_new")
-      .nth(0)
+      .first()
-      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+      .fill("fe_tests");
     await page
-      .getByTestId("popover-anchor-input-api_endpoint")
+      .getByTestId("popover-anchor-input-collection_name_new")
-      .nth(1)
+      .last()
-      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+      .fill("fe_tests");
+
+    await page.waitForTimeout(500);
+
+    // Click first refresh button and wait for disabled->enabled transition
+    await page.getByTestId("refresh-button-api_endpoint").first().click();
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").first(),
+    ).toHaveAttribute("disabled", "");
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").first(),
+    ).not.toHaveAttribute("disabled", "");
+
+    // Click second refresh button and wait for disabled->enabled transition
+    await page.getByTestId("refresh-button-api_endpoint").last().click();
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").last(),
+    ).toHaveAttribute("disabled", "");
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").last(),
+    ).not.toHaveAttribute("disabled", "");
+
+    await page.getByTestId("dropdown_str_api_endpoint").first().click();
+
+    await page.waitForSelector('[data-testid="langflow-1-option"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("langflow-1-option").last().click();
+
+    await page.getByTestId("dropdown_str_api_endpoint").last().click();
+
+    await page.waitForSelector('[data-testid="langflow-1-option"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("langflow-1-option").last().click();
 
     const fileChooserPromise = page.waitForEvent("filechooser");
     await page.getByTestId("input-file-component").last().click();