From fac5c75fe6c6e258ae88d8e67d563519d115af6f Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Thu, 20 Jun 2024 18:30:11 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20(tests):=20update=20locators=20in?= =?UTF-8?q?=20end-to-end=20tests=20for=20chat,=20dropdown,=20and=20file=20?= =?UTF-8?q?upload=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ (tests): update locators and tooltips in end-to-end tests for filterEdge ✅ (tests): add random name generation in store.spec.ts for unique flow names ✅ (tests): update locators in textInputOutput.spec.ts for consistency ✅ (twoEdges.spec.ts): update test to click correct icon-Eye element and remove redundant checks --- .../tests/end-to-end/chatInputOutput.spec.ts | 4 +- .../end-to-end/chatInputOutputUser.spec.ts | 4 +- .../end-to-end/dropdownComponent.spec.ts | 2 +- .../end-to-end/fileUploadComponent.spec.ts | 36 ++++++++- .../tests/end-to-end/filterEdge.spec.ts | 78 ++++++++++++++----- src/frontend/tests/end-to-end/store.spec.ts | 3 + .../tests/end-to-end/textInputOutput.spec.ts | 8 +- .../tests/end-to-end/twoEdges.spec.ts | 5 +- 8 files changed, 106 insertions(+), 34 deletions(-) diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts index a5a1719fa..e71178040 100644 --- a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts +++ b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts @@ -62,7 +62,7 @@ test("chat_io_teste", async ({ page }) => { // Click and hold on the first element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[8]/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[9]/button/div[1]', ) .hover(); await page.mouse.down(); @@ -70,7 +70,7 @@ test("chat_io_teste", async ({ page }) => { // Move to the second element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div[1]', ) .hover(); diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts index 98744a4f1..012259747 100644 --- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts +++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts @@ -74,11 +74,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => { await page.getByText("Save Changes", { exact: true }).click(); await page - .getByTestId("popover-anchor-input-sender_name") + .getByTestId("textarea-sender_name") .nth(1) .fill("TestSenderNameUser"); await page - .getByTestId("popover-anchor-input-sender_name") + .getByTestId("textarea-sender_name") .nth(0) .fill("TestSenderNameAI"); diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts index fba4b0a73..9e3fafa36 100644 --- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts +++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts @@ -181,7 +181,7 @@ test("dropDownComponent", async ({ page }) => { await page.getByTestId("code-button-modal").click(); await page .locator("#CodeEditor div") - .filter({ hasText: "import BedrockChat" }) + .filter({ hasText: "import ChatBedrock" }) .nth(1) .click(); await page.locator("textarea").press("Control+a"); diff --git a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts index 33b3a332f..1b6f5b6e7 100644 --- a/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts +++ b/src/frontend/tests/end-to-end/fileUploadComponent.spec.ts @@ -61,10 +61,24 @@ test("should be able to upload a file", async ({ page }) => { await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click(); + await page.getByPlaceholder("Search").click(); + await page.getByPlaceholder("Search").fill("parse data"); + await page + .getByTestId("helpersParse Data") + .first() + .dragTo(page.locator('//*[@id="react-flow-id"]')); + + await page.mouse.up(); + await page.mouse.down(); + await page.getByTitle("fit view").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); + // Click and hold on the first element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div[1]', ) .hover(); await page.mouse.down(); @@ -72,7 +86,25 @@ test("should be able to upload a file", async ({ page }) => { // Move to the second element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[4]/div/button/div[1]', + ) + .hover(); + + // Release the mouse + await page.mouse.up(); + + // Click and hold on the first element + await page + .locator( + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[7]/button/div[1]', + ) + .hover(); + await page.mouse.down(); + + // Move to the second element + await page + .locator( + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]', ) .hover(); diff --git a/src/frontend/tests/end-to-end/filterEdge.spec.ts b/src/frontend/tests/end-to-end/filterEdge.spec.ts index ff2ebd015..a85f2c3e5 100644 --- a/src/frontend/tests/end-to-end/filterEdge.spec.ts +++ b/src/frontend/tests/end-to-end/filterEdge.spec.ts @@ -40,16 +40,28 @@ test("LLMChain - Tooltip", async ({ page }) => { await page .locator( - '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div[1]', ) .hover() .then(async () => { await expect(page.getByTestId("tooltip-Chains").first()).toBeVisible(); - - await expect(page.getByTestId("tooltip-Inputs").first()).toBeVisible(); - - await expect(page.getByTestId("tooltip-Outputs").first()).toBeVisible(); - + await expect( + page.getByTestId("tooltip-Model Specs").first(), + ).toBeVisible(); + await expect( + page.getByTestId("tooltip-Vector Search").first(), + ).toBeVisible(); + await expect( + page.getByTestId("tooltip-Text Splitters").first(), + ).toBeVisible(); + await expect( + page.getByTestId("tooltip-Retrievers").first(), + ).toBeVisible(); + await expect(page.getByTestId("tooltip-Tools").first()).toBeVisible(); + await expect(page.getByTestId("tooltip-Memories").first()).toBeVisible(); + await expect(page.getByTestId("tooltip-Agents").first()).toBeVisible(); + await expect(page.getByTestId("tooltip-Helpers").first()).toBeVisible(); + await expect(page.getByTestId("tooltip-Utilities").first()).toBeVisible(); await page.getByTestId("icon-X").click(); await page.waitForTimeout(500); }); @@ -60,7 +72,7 @@ test("LLMChain - Tooltip", async ({ page }) => { await page.getByTitle("zoom out").click(); await page .locator( - '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div[1]', ) .hover() .then(async () => { @@ -69,19 +81,43 @@ test("LLMChain - Tooltip", async ({ page }) => { ).toBeVisible(); await page.waitForTimeout(2000); - await expect( - page.getByTestId("tooltip-Model Specs").first(), - ).toBeVisible(); + await expect(page.getByTestId("tooltip-Models").first()).toBeVisible(); await page.getByTestId("icon-Search").click(); await page.waitForTimeout(500); }); await page.getByTitle("fit view").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); await page .locator( - '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div[1]', + ) + .hover() + .then(async () => { + await page.waitForTimeout(2000); + + await expect(page.getByTestId("tooltip-Chains").first()).toBeVisible(); + await expect( + page.getByTestId("tooltip-Experimental").first(), + ).toBeVisible(); + await expect(page.getByTestId("tooltip-Agents").first()).toBeVisible(); + await expect(page.getByTestId("tooltip-Helpers").first()).toBeVisible(); + + await page.waitForTimeout(500); + }); + + await page.getByTitle("fit view").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); + await page.getByTitle("zoom out").click(); + + await page + .locator( + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[5]/div/button/div[1]', ) .hover() .then(async () => { @@ -136,7 +172,7 @@ test("LLMChain - Filter", async ({ page }) => { await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div[1]', ) .click(); @@ -178,19 +214,23 @@ test("LLMChain - Filter", async ({ page }) => { await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div[1]', ) .click(); + await expect(page.getByTestId("disclosure-models")).toBeVisible(); + await expect(page.getByTestId("disclosure-model specs")).toBeVisible(); + await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[3]/div/button/div[1]', ) .click(); - await expect(page.getByTestId("saved_componentsChat Input")).toBeVisible(); - await expect(page.getByTestId("outputsChat Output")).toBeVisible(); - await expect(page.getByTestId("helpersID Generator")).toBeVisible(); - await expect(page.getByTestId("vectorstoresChroma DB")).toBeVisible(); - await expect(page.getByTestId("disclosure-vector stores")).toBeVisible(); + await expect(page.getByTestId("disclosure-saved")).toBeVisible(); + + await expect(page.getByTestId("disclosure-helpers")).toBeVisible(); + await expect(page.getByTestId("disclosure-agents")).toBeVisible(); + await expect(page.getByTestId("disclosure-chains")).toBeVisible(); + await expect(page.getByTestId("disclosure-experimental")).toBeVisible(); }); diff --git a/src/frontend/tests/end-to-end/store.spec.ts b/src/frontend/tests/end-to-end/store.spec.ts index 8e443ecdd..bcd5ec15b 100644 --- a/src/frontend/tests/end-to-end/store.spec.ts +++ b/src/frontend/tests/end-to-end/store.spec.ts @@ -245,6 +245,8 @@ test("should share component with share button", async ({ page }) => { } await page.waitForTimeout(1000); + const randomName = Math.random().toString(36).substring(2); + await page.getByRole("heading", { name: "Basic Prompting" }).click(); await page.waitForTimeout(1000); const flowName = await page.getByTestId("flow_name").innerText(); @@ -253,6 +255,7 @@ test("should share component with share button", async ({ page }) => { const flowDescription = await page .getByPlaceholder("Flow description") .inputValue(); + await page.getByPlaceholder("Flow name").fill(randomName); await page.getByText("Save").last().click(); await page.getByText("Close").last().click(); diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts index 1d9d9bdd8..163ee528e 100644 --- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts +++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts @@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => { // Click and hold on the first element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[5]/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]', ) .hover(); await page.mouse.down(); @@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => { // Move to the second element await page .locator( - '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]', ) .hover(); @@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => { // 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/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[15]/button/div[1]', ) .hover(); await page.mouse.down(); @@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => { // 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/div', + '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]', ) .hover(); diff --git a/src/frontend/tests/end-to-end/twoEdges.spec.ts b/src/frontend/tests/end-to-end/twoEdges.spec.ts index ad83c39fd..abae18ba3 100644 --- a/src/frontend/tests/end-to-end/twoEdges.spec.ts +++ b/src/frontend/tests/end-to-end/twoEdges.spec.ts @@ -27,15 +27,12 @@ test("user should be able to see multiple edges and interact with them", async ( await page.waitForTimeout(3000); await page.getByText("Retriever", { exact: true }).first().isVisible(); await page.getByText("Search Results", { exact: true }).first().isVisible(); - await page.getByTestId("icon-Eye").nth(19).click(); - await page.getByTestId("icon-Eye").nth(20).click(); + await page.getByTestId("icon-Eye").nth(24).click(); await page.getByText("Retriever", { exact: true }).first().isHidden(); - await page.getByText("Search Results", { exact: true }).first().isHidden(); await page.getByTestId("icon-ChevronDown").last().isVisible(); await page.getByTestId("icon-ChevronDown").last().click(); await page.getByText("Retriever", { exact: true }).first().isVisible(); await page.getByText("Search Results", { exact: true }).first().isVisible(); await page.getByTestId("icon-EyeOff").nth(0).isVisible(); - await page.getByTestId("icon-EyeOff").nth(1).isVisible(); });