From ea5ddc0ed58dcf9c2f452c32fef460758eb07c05 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 27 Nov 2023 16:29:43 -0300
Subject: [PATCH] fix(components): fix dropdown component id attribute to
 include index for uniqueness fix(components): fix dict component id attribute
 to include index for uniqueness fix(components): fix code area component id
 attribute to include id for uniqueness fix(modals): fix edit node modal dict
 component id attribute to include id for uniqueness fix(modals): fix dict
 area modal save button data-testid attribute for testing fix(pages): fix node
 toolbar component class name for more options button fix(types): add id
 property to dropdown component type fix(types): add id property to dict
 component type feat(tests): add end-to-end test for dropdown component
 feat(tests): add end-to-end test for dict component feat(tests): add
 end-to-end test for node toolbar component feat(tests): add end-to-end test
 for nested component feat(tests): add input component test feat(tests): add
 toggle component test

---
 .../components/parameterComponent/index.tsx   |   2 +
 .../components/codeAreaComponent/index.tsx    |   1 +
 .../src/components/dictComponent/index.tsx    |   4 +-
 .../components/dropdownComponent/index.tsx    |   8 +-
 .../src/modals/EditNodeModal/index.tsx        |   6 +-
 .../src/modals/dictAreaModal/index.tsx        |   1 +
 .../components/nodeToolbarComponent/index.tsx |   5 +-
 src/frontend/src/types/components/index.ts    |   2 +
 .../end-to-end/dropdownComponent.spec.ts      | 104 ++++++++
 .../tests/end-to-end/nestedComponent.spec.ts  | 239 ++++++++++++++++++
 .../tests/onlyFront/inputComponent.spec.ts    |   8 +-
 .../tests/onlyFront/toggleComponent.spec.ts   |  14 +-
 12 files changed, 376 insertions(+), 18 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/dropdownComponent.spec.ts
 create mode 100644 src/frontend/tests/end-to-end/nestedComponent.spec.ts

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index adbdc15fe..ed4c11722 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -422,6 +422,7 @@ export default function ParameterComponent({
                 options={data.node.template[name].options}
                 onSelect={handleOnNewValue}
                 value={data.node.template[name].value ?? "Choose an option"}
+                id={"dropdown-" + index}
               />
             </div>
             {data.node?.template[name].refresh && (
@@ -513,6 +514,7 @@ export default function ParameterComponent({
                 data.node!.template[name].value = newValue;
                 handleOnNewValue(newValue);
               }}
+              id="div-dict-input"
             />
           </div>
         ) : left === true && type === "dict" ? (
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 8c459f64b..98683f071 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -45,6 +45,7 @@ export default function CodeAreaComponent({
         <div className="flex w-full items-center">
           <span
             id={id}
+            data-testid={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"
diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index b17c678b3..066819ba1 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -10,6 +10,7 @@ export default function DictComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: DictComponentType): JSX.Element {
   useEffect(() => {
     if (disabled) {
@@ -30,7 +31,7 @@ export default function DictComponent({
       )}
     >
       {
-        <div className="flex w-full gap-3">
+        <div className="flex w-full gap-3" data-testid={id}>
           <DictAreaModal
             value={ref.current}
             onChange={(obj) => {
@@ -45,6 +46,7 @@ export default function DictComponent({
                   : "input-disable pointer-events-none cursor-pointer"
               }
               placeholder="Click to edit your dictionary..."
+              data-testid="dict-input"
             />
           </DictAreaModal>
         </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index d6fcec772..abcbfb6d8 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -11,6 +11,7 @@ export default function Dropdown({
   editNode = false,
   numberOfOptions = 0,
   apiModal = false,
+  id = "",
 }: DropDownComponentType): JSX.Element {
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
@@ -33,13 +34,17 @@ export default function Dropdown({
           <>
             <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
+                data-test={`${id ?? ""}`}
                 className={
                   editNode
                     ? "dropdown-component-outline"
                     : "dropdown-component-false-outline"
                 }
               >
-                <span className="dropdown-component-display">
+                <span
+                  className="dropdown-component-display"
+                  data-testid={`${id ?? ""}-display`}
+                >
                   {internalValue}
                 </span>
                 <span className={"dropdown-component-arrow"}>
@@ -86,6 +91,7 @@ export default function Dropdown({
                               selected ? "font-semibold" : "font-normal",
                               "block truncate "
                             )}
+                            data-testid={`${option}-${id ?? ""}-option`}
                           >
                             {option}
                           </span>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 908c013a5..d2bfb960e 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -248,9 +248,9 @@ const EditNodeModal = forwardRef(
                                     disabled={disabled}
                                     editNode={true}
                                     value={
-                                      myData.current.node!.template[
+                                      myData?.current?.node!.template[
                                         templateParam
-                                      ].value.toString() === "{}"
+                                      ]?.value?.toString() === "{}"
                                         ? {
                                             yourkey: "value",
                                           }
@@ -264,6 +264,7 @@ const EditNodeModal = forwardRef(
                                       ].value = newValue;
                                       handleOnNewValue(newValue, templateParam);
                                     }}
+                                    id="editnode-div-dict-input"
                                   />
                                 </div>
                               ) : myData.current.node?.template[templateParam]
@@ -371,6 +372,7 @@ const EditNodeModal = forwardRef(
                                         templateParam
                                       ].value ?? "Choose an option"
                                     }
+                                    id={"dropdown-edit-" + index}
                                   ></Dropdown>
                                 </div>
                               ) : myData.current.node?.template[templateParam]
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index 9cc525b48..8a59344fe 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -54,6 +54,7 @@ export default function DictAreaModal({
           />
           <div className="flex h-fit w-full justify-end">
             <Button
+              data-testid="save-dict-button"
               className="mt-3"
               type="submit"
               onClick={() => {
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index d08702928..ff1c77d95 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -186,10 +186,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
-                        (nodeLength == 0
-                          ? " text-muted-foreground"
-                          : " text-foreground")
+                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                     )}
                   >
                     <IconComponent
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 8d0679581..810a32bf1 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -36,6 +36,7 @@ export type DropDownComponentType = {
   editNode?: boolean;
   apiModal?: boolean;
   numberOfOptions?: number;
+  id?: string;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -78,6 +79,7 @@ export type DictComponentType = {
   onChange: (value) => void;
   disabled: boolean;
   editNode?: boolean;
+  id?: string;
 };
 
 export type TextAreaComponentType = {
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
new file mode 100644
index 000000000..3ffcaa8ef
--- /dev/null
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+
+test("dropDownComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("amazon");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .getByTestId("llmsAmazon Bedrock")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("dropdown-2-display").click();
+  await page.getByTestId("ai21.j2-grande-instruct-0-option").click();
+
+  let value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-grande-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("dropdown-2-display").click();
+  await page.getByTestId("ai21.j2-jumbo-instruct-1-option").click();
+
+  value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-jumbo-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  value = await page.getByTestId("dropdown-edit-1-display").innerText();
+  if (value !== "ai21.j2-jumbo-instruct") {
+    expect(false).toBeTruthy();
+  }
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
+  ).toBeTruthy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showcredentials_profile_name
+  await page.locator('//*[@id="showcredentials_profile_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked()
+  ).toBeTruthy();
+
+  await page.getByTestId("dropdown-edit-1-display").click();
+  await page.getByTestId("ai21.j2-ultra-v1-5-option").click();
+
+  value = await page.getByTestId("dropdown-edit-1-display").innerText();
+  if (value !== "ai21.j2-ultra-v1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  value = await page.getByTestId("dropdown-2-display").innerText();
+  if (value !== "ai21.j2-ultra-v1") {
+    expect(false).toBeTruthy();
+  }
+});
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
new file mode 100644
index 000000000..f4bc6e56f
--- /dev/null
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -0,0 +1,239 @@
+import { expect, test } from "@playwright/test";
+
+test("NestedComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("pinecone");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .getByTestId("vectorstoresPinecone")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeFalsy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeTruthy();
+
+  // showsearch_kwargs
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  // showindex_name
+  await page.locator('//*[@id="showindex_name"]').click();
+
+  expect(
+    await page.locator('//*[@id="showindex_name"]').isChecked()
+  ).toBeTruthy();
+
+  // shownamespace
+  await page.locator('//*[@id="shownamespace"]').click();
+
+  expect(
+    await page.locator('//*[@id="shownamespace"]').isChecked()
+  ).toBeTruthy();
+
+  // showpinecone_api_key
+  await page.locator('//*[@id="showpinecone_api_key"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
+  ).toBeFalsy();
+
+  // showpinecone_env
+  await page.locator('//*[@id="showpinecone_env"]').click();
+
+  expect(
+    await page.locator('//*[@id="showpinecone_env"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.getByTestId("div-dict-input").click();
+
+  const spanElement = await page
+    .locator('//*[@id="radix-:r4i:"]/div[2]/div/div/code/div/div/span[1]')
+    .innerHTML();
+
+  if (spanElement !== "yourkey") {
+    expect(true).toBeFalsy();
+  }
+});
diff --git a/src/frontend/tests/onlyFront/inputComponent.spec.ts b/src/frontend/tests/onlyFront/inputComponent.spec.ts
index d1eece85d..99485301d 100644
--- a/src/frontend/tests/onlyFront/inputComponent.spec.ts
+++ b/src/frontend/tests/onlyFront/inputComponent.spec.ts
@@ -23,7 +23,7 @@ test("InputComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sideChroma"]')
+    .getByTestId("vectorstoresChroma")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -44,7 +44,8 @@ test("InputComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="editAdvancedIcon"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
   expect(
@@ -154,7 +155,8 @@ test("InputComponent", async ({ page }) => {
         '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
       )
       .click();
-    await page.locator('//*[@id="editAdvancedIcon"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showcollection_name"]').click();
     expect(
diff --git a/src/frontend/tests/onlyFront/toggleComponent.spec.ts b/src/frontend/tests/onlyFront/toggleComponent.spec.ts
index 79b85934c..3ab403b75 100644
--- a/src/frontend/tests/onlyFront/toggleComponent.spec.ts
+++ b/src/frontend/tests/onlyFront/toggleComponent.spec.ts
@@ -22,7 +22,7 @@ test("ToggleComponent", async ({ page }) => {
 
   await page.waitForTimeout(2000);
   await page
-    .locator('//*[@id="sideDirectoryLoader"]')
+    .getByTestId("documentloadersDirectoryLoader")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -32,8 +32,8 @@ test("ToggleComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showload_hidden"]').click();
   expect(
@@ -62,8 +62,8 @@ test("ToggleComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   expect(
     await page.locator('//*[@id="toggle-edit-1"]').isChecked()
@@ -144,8 +144,8 @@ test("ToggleComponent", async ({ page }) => {
     await page
       .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
       .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showload_hidden"]').click();
     expect(