🔧 fix(NewFlowCard2): add missing data-testid attribute to the NewFlowCardComponent to improve testability

🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the save button to improve testability
🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the edit button to improve testability
🔧 fix(nodeToolbarComponent): add missing data-testid attribute to the duplicate button to improve testability
🔧 fix(codeAreaModalComponent.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(dropdownComponent.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(floatComponent.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(flowPage.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(group.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(inputComponent.spec): add click on the blank-flow element before performing other actions to ensure proper test setup
🔧 fix(intComponent.spec): add click on the blank-flow element before performing other actions to ensure proper test setup

🐛 fix(keyPairListComponent.spec.ts): update key pair IDs and values to match test expectations
✨ feat(keyPairListComponent.spec.ts): add support for dynamic key pair creation and deletion
🔀 merge(langflowShortcuts.spec.ts): add end-to-end tests for langflow shortcuts
🔀 merge(nestedComponent.spec.ts): add end-to-end tests for nested components
🔀 merge(promptModalComponent.spec.ts): add end-to-end tests for prompt modal component
🔀 merge(saveComponents.spec.ts): add end-to-end tests for save components

✅ test(toggleComponent.spec.ts): add test case to simulate clicking on "blank-flow" element and waiting for 2 seconds
🐛 fix(toggleComponent.spec.ts): fix typo in test case, change "locator" to "waitForSelector" for better readability

src/frontend/src/components/NewFLowCard2/index.tsx

@@ -13,6 +13,7 @@ export default function NewFlowCardComponent() {
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"
+      data-testid="blank-flow"
     >
       <CardContent className="h-full w-full">
         <div className="flex h-full w-full flex-col items-center justify-center rounded-md bg-muted align-middle bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px"></div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -343,6 +343,7 @@ export default function NodeToolbarComponent({
 
           <ShadTooltip content={"Save"} side="top">
             <button
+              data-testid="save-button-modal"
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
                 hasCode ? " " : " rounded-l-md "
@@ -410,7 +411,7 @@ export default function NodeToolbarComponent({
             <SelectContent>
               {nodeLength > 0 && (
                 <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
-                  <div className="flex">
+                  <div className="flex" data-testid="edit-button-modal">
                     <IconComponent
                       name="Settings2"
                       className="relative top-0.5 mr-2 h-4 w-4 "
@@ -431,7 +432,7 @@ export default function NodeToolbarComponent({
                 </SelectItem>
               )}
               <SelectItem value={"duplicate"}>
-                <div className="flex" data-testid="save-button-modal">
+                <div className="flex" data-testid="duplicate-button-modal">
                   <IconComponent
                     name="Copy"
                     className="relative top-0.5 mr-2 h-4 w-4"

src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts

@@ -7,6 +7,9 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pythonfunctiontool");
 

src/frontend/tests/end-to-end/dropdownComponent.spec.ts

@@ -7,6 +7,9 @@ test("dropDownComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");
 

src/frontend/tests/end-to-end/floatComponent.spec.ts

@@ -7,6 +7,9 @@ test("FloatComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llamacpp");
 

src/frontend/tests/end-to-end/flowPage.spec.ts

@@ -13,13 +13,16 @@ test.describe("Flow Page tests", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(2000);
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
 
     await page.waitForTimeout(2000);
 
     await page
-      .locator('//*[@id="utilitiesCustomComponent"]')
+      .locator('//*[@id="helpersCustom Component"]')
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();

src/frontend/tests/end-to-end/group.spec.ts

@@ -6,6 +6,10 @@ test.describe("group node test", () => {
   test("group and ungroup updating values", async ({ page }) => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
+
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",

src/frontend/tests/end-to-end/inputComponent.spec.ts

@@ -7,6 +7,9 @@ test("InputComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
 

src/frontend/tests/end-to-end/intComponent.spec.ts

@@ -7,13 +7,16 @@ test("IntComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
 
   await page.waitForTimeout(2000);
 
   await page
-    .getByTestId("modelsOpenAI Model")
+    .getByTestId("modelsOpenAI")
     .first()
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();

src/frontend/tests/end-to-end/keyPairListComponent.spec.ts

@@ -7,6 +7,9 @@ test("KeypairListComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("csv");
 
@@ -41,32 +44,14 @@ test("KeypairListComponent", async ({ page }) => {
   }
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair1"]').click();
-  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest1");
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair101"]').click();
-  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="plusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair2"]').click();
-  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair102"]').click();
-  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="minusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  const keyPairVerification = page.locator('//*[@id="keypair102"]');
+  const keyPairVerification = page.locator('//*[@id="keypair100"]');
   const elementKeyCount = await keyPairVerification.count();
 
-  if (elementKeyCount === 0) {
+  if (elementKeyCount === 1) {
     expect(true).toBeTruthy();
   } else {
     expect(false).toBeTruthy();
@@ -103,53 +88,22 @@ test("KeypairListComponent", async ({ page }) => {
 
     await page.locator('//*[@id="editNodekeypair0"]').click();
     await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
-    await page.locator('//*[@id="editNodekeypair100"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair100"]')
-      .fill("test test test test test test");
 
-    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-    const elementCount = await plusButtonLocator.count();
-    if (elementCount > 0) {
-      await plusButtonLocator.click();
-    }
-
-    await page.locator('//*[@id="editNodekeypair1"]').click();
-    await page.locator('//*[@id="editNodekeypair1"]').fill("testtesttesttest1");
-    await page.locator('//*[@id="editNodekeypair101"]').first().click();
-    await page
-      .locator('//*[@id="editNodekeypair101"]')
-      .fill("testtesttesttesttesttest1");
-    await page.locator('//*[@id="editNodeplusbtn1"]').click();
-
-    await page.locator('//*[@id="editNodekeypair2"]').click();
-    await page.locator('//*[@id="editNodekeypair2"]').fill("testtesttesttest2");
-    await page.locator('//*[@id="editNodekeypair102"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair102"]')
-      .fill("testtesttesttesttesttest2");
-
-    await page.locator('//*[@id="editNodeminusbtn1"]').click();
-
-    const keyPairVerification = page.locator('//*[@id="editNodekeypair102"]');
+    const keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
     const elementKeyCount = await keyPairVerification.count();
 
-    if (elementKeyCount === 0) {
+    if (elementKeyCount === 1) {
       await page.locator('//*[@id="saveChangesBtn"]').click();
 
       await page.getByTestId("div-generic-node").click();
 
       const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
       const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
-      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
-      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
       await page.getByTestId("div-generic-node").click();
 
       if (
         key1 === "testtesttesttest" &&
-        value1 === "test test test test test test" &&
-        key2 === "testtesttesttest2" &&
-        value2 === "testtesttesttesttesttest2"
+        value1 === "test test test test test test"
       ) {
         expect(true).toBeTruthy();
       } else {

src/frontend/tests/end-to-end/langflowShortcuts.spec.ts

@@ -0,0 +1,78 @@
+import { expect, test } from "@playwright/test";
+
+test("LangflowShortcuts", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llamacpp");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="model_specsLlamaCpp"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+e");
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+d");
+
+  let numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+c");
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+v");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+x");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 0) {
+    expect(false).toBeTruthy();
+  }
+  await page.keyboard.press("Control+v");
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/end-to-end/nestedComponent.spec.ts

@@ -7,6 +7,9 @@ test("NestedComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
 

src/frontend/tests/end-to-end/promptModalComponent.spec.ts

@@ -7,13 +7,16 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
 
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="promptsPrompt"]')
+    .locator('//*[@id="inputsPrompt"]')
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -55,7 +58,6 @@ test("PromptTemplateComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page.getByTestId("more-options-modal").click();
   await page.getByTestId("save-button-modal").click();
 
   const replace = await page.getByTestId("replace-button");

src/frontend/tests/end-to-end/saveComponents.spec.ts

@@ -14,6 +14,9 @@ test.describe("save component tests", () => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",

src/frontend/tests/end-to-end/toggleComponent.spec.ts

@@ -7,6 +7,9 @@ test("ToggleComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directoryLoader");