@rachelallyson/hero-hook-form 2.7.0 → 2.8.0

package/dist/cypress/index.js

@@ -20,25 +20,7 @@ function withRetry(operation, config = DEFAULT_CONFIG) {
   if (!config.retry) {
     return operation();
   }
-  let attempts = 0;
-  const maxAttempts = config.maxRetries + 1;
-  const retryOperation = () => {
-    attempts++;
-    return operation().then(
-      (result) => {
-        return result;
-      },
-      (error) => {
-        if (attempts < maxAttempts) {
-          cy.log(`Retry attempt ${attempts}/${maxAttempts} for operation`);
-          cy.wait(config.retryDelay);
-          return retryOperation();
-        }
-        throw error;
-      }
-    );
-  };
-  return retryOperation();
+  return operation();
 }
 function findFieldByLabel(label) {
   return `label:contains("${label}")`;
@@ -128,6 +110,181 @@ function detectFieldType(value) {
   }
   return "text";
 }
+function waitForFormReady(timeout = 5e3) {
+  return cy.get("form", { timeout }).should("exist").then(($form) => {
+    cy.get("form input, form textarea, form button", { timeout: 2e3 }).first().should("exist");
+    return cy.wrap($form);
+  });
+}
+function waitForReactUpdate(timeout = 2e3) {
+  return cy.get("form", { timeout }).should("exist").then(() => {
+    return cy.wait(100);
+  });
+}
+function waitForElementState(selector, state, timeout = 4e3) {
+  const element = cy.get(selector, { timeout });
+  switch (state) {
+    case "visible":
+      return element.should("be.visible");
+    case "hidden":
+      return element.should("be.hidden");
+    case "enabled":
+      return element.should("not.be.disabled");
+    case "disabled":
+      return element.should("be.disabled");
+    case "exist":
+      return element.should("exist");
+    default:
+      return element;
+  }
+}
+function waitForDropdownOpen(timeout = 5e3) {
+  cy.get('[role="dialog"]', { timeout }).should("exist");
+  cy.get('[role="option"]', { timeout }).should("exist");
+  return cy.get('[role="dialog"]');
+}
+function waitForDropdownClose(buttonSelector = 'button[aria-haspopup="listbox"]', timeout = 3e3) {
+  return cy.get(buttonSelector, { timeout }).first().should("have.attr", "aria-expanded", "false");
+}
+function getFormDataValue(fieldName) {
+  return cy.get("form").then(($form) => {
+    const formElement = $form[0];
+    if (!(formElement instanceof HTMLFormElement)) {
+      throw new Error("Expected HTMLFormElement");
+    }
+    const formData = new FormData(formElement);
+    return formData.get(fieldName);
+  });
+}
+function verifyFormDataValue(fieldName, expectedValue, timeout = 3e3) {
+  return getFormDataValue(fieldName).should("equal", String(expectedValue));
+}
+function findButtonNearLabel(labelText, buttonSelector = 'button[aria-haspopup="listbox"]') {
+  return cy.contains("label", labelText).then(($label) => {
+    const $container = $label.closest("div");
+    let $button = $container.find(buttonSelector);
+    if ($button.length > 0) {
+      return cy.wrap($button.first());
+    }
+    const $parent = $container.parent();
+    $button = $parent.find(buttonSelector);
+    if ($button.length > 0) {
+      return cy.wrap($button.first());
+    }
+    return cy.get(buttonSelector).first();
+  });
+}
+function waitForValidation(shouldHaveErrors = true, timeout = 3e3) {
+  if (shouldHaveErrors) {
+    return cy.get("body", { timeout }).then(($body) => {
+      const hasErrors = $body.find('[class*="error"], [class*="danger"], [class*="invalid"]').length > 0;
+      if (!hasErrors) {
+        cy.wait(500);
+      }
+    });
+  } else {
+    return cy.get('[class*="error"], [class*="danger"], [class*="invalid"]', { timeout }).should("not.exist");
+  }
+}
+function getFormDataArray(fieldName) {
+  return cy.get("form").then(($form) => {
+    const formElement = $form[0];
+    if (!(formElement instanceof HTMLFormElement)) {
+      throw new Error("Expected HTMLFormElement");
+    }
+    const formData = new FormData(formElement);
+    return Array.from(formData.getAll(fieldName));
+  });
+}
+function verifyFormDataArray(fieldName, expectedValues, exactMatch = false) {
+  return getFormDataArray(fieldName).then((values) => {
+    if (exactMatch) {
+      expect(values).to.deep.equal(expectedValues);
+    } else {
+      expectedValues.forEach((expected) => {
+        expect(values).to.include(expected);
+      });
+      expect(values.length).to.be.at.least(expectedValues.length);
+    }
+  });
+}
+function verifyFormDataFieldExists(fieldName) {
+  return cy.get("form").then(($form) => {
+    const formElement = $form[0];
+    if (!(formElement instanceof HTMLFormElement)) {
+      throw new Error("Expected HTMLFormElement");
+    }
+    const formData = new FormData(formElement);
+    expect(formData.has(fieldName)).to.be.true;
+  });
+}
+function verifyNameAttribute(fieldName, selector) {
+  if (selector) {
+    return cy.get(selector).then(($el) => {
+      const hasName = $el.attr("name") === fieldName;
+      if (hasName) {
+        cy.wrap($el).should("have.attr", "name", fieldName);
+      } else {
+        return verifyFormDataFieldExists(fieldName);
+      }
+    });
+  } else {
+    return verifyFormDataFieldExists(fieldName);
+  }
+}
+function verifyFormDataStructure(expectedData) {
+  return cy.get("form").then(($form) => {
+    const formElement = $form[0];
+    if (!(formElement instanceof HTMLFormElement)) {
+      throw new Error("Expected HTMLFormElement");
+    }
+    const formData = new FormData(formElement);
+    Object.entries(expectedData).forEach(([fieldName, expectedValue]) => {
+      if (Array.isArray(expectedValue)) {
+        const actualValues = Array.from(formData.getAll(fieldName));
+        expectedValue.forEach((val) => {
+          expect(actualValues).to.include(val);
+        });
+        expect(actualValues.length).to.be.at.least(expectedValue.length);
+      } else {
+        const actualValue = formData.get(fieldName);
+        if (typeof expectedValue === "string" && expectedValue.includes("*")) {
+          const pattern = expectedValue.replace(/\*/g, ".*");
+          expect(String(actualValue)).to.match(new RegExp(pattern));
+        } else {
+          expect(String(actualValue)).to.equal(String(expectedValue));
+        }
+      }
+    });
+  });
+}
+function verifyFormCleared(fieldNames) {
+  return cy.get("form").then(($form) => {
+    const formElement = $form[0];
+    if (!(formElement instanceof HTMLFormElement)) {
+      throw new Error("Expected HTMLFormElement");
+    }
+    const formData = new FormData(formElement);
+    fieldNames.forEach((fieldName) => {
+      const value = formData.get(fieldName);
+      expect(value === "" || value === null || value === void 0).to.be.true;
+    });
+  });
+}
+function verifyDropdownNameAttribute(fieldName, labelText) {
+  if (labelText) {
+    return findButtonNearLabel(labelText).then(($button) => {
+      const hasName = $button.attr("name") === fieldName;
+      if (hasName) {
+        cy.wrap($button).should("have.attr", "name", fieldName);
+      } else {
+        return verifyFormDataFieldExists(fieldName);
+      }
+    });
+  } else {
+    return verifyFormDataFieldExists(fieldName);
+  }
+}
 var HERO_UI_SELECTORS, DEFAULT_CONFIG;
 var init_utils = __esm({
   "src/cypress/utils.ts"() {
@@ -177,6 +334,19 @@ var init_utils = __esm({
 });
 
 // src/cypress/helpers.ts
+function fillInputByName(name, value, options = {}) {
+  return withRetry(() => {
+    waitForFormReady();
+    const element = cy.get(`input[name="${name}"], textarea[name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").should("be.visible");
+    if (options.clear !== false) {
+      element.clear({ force: true });
+    }
+    return element.type(value, { force: true }).then(() => {
+      waitForReactUpdate();
+      return element;
+    });
+  }, DEFAULT_CONFIG);
+}
 function fillInputByType(type, value, index = 0, options = {}) {
   const selector = type === "textarea" ? buildHeroUISelector("textarea") : buildHeroUISelector("input", type);
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -207,6 +377,15 @@ function fillInputByLabel(label, value, options = {}) {
     });
   }, DEFAULT_CONFIG);
 }
+function fillTextareaByName(name, value, options = {}) {
+  return withRetry(() => {
+    const element = cy.get(`textarea[name="${name}"]`);
+    if (options.clear !== false) {
+      element.clear({ force: true });
+    }
+    return element.type(value, { force: true });
+  }, DEFAULT_CONFIG);
+}
 function fillTextarea(value, index = 0, options = {}) {
   const selector = HERO_UI_SELECTORS.textarea;
   return withRetry(() => {
@@ -217,6 +396,37 @@ function fillTextarea(value, index = 0, options = {}) {
     return element.type(value, { force: true });
   }, DEFAULT_CONFIG);
 }
+function selectDropdownByName(name, optionValue) {
+  const optionSelector = HERO_UI_SELECTORS.dropdown.option;
+  return withRetry(() => {
+    waitForFormReady();
+    cy.get("body").then(($body) => {
+      const buttonWithName = $body.find(`button[aria-haspopup="listbox"][name="${name}"]`).length > 0;
+      if (buttonWithName) {
+        cy.get(`button[aria-haspopup="listbox"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("be.visible").click({ force: true });
+      } else {
+        const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
+        findButtonNearLabel(capitalizedName).should("be.visible").click({ force: true });
+      }
+    });
+    waitForDropdownOpen(5e3);
+    cy.get('[role="dialog"]').within(() => {
+      cy.get(optionSelector, { timeout: 6e3 }).should("exist");
+      if (optionValue) {
+        cy.get(optionSelector).contains(optionValue).click({ force: true });
+      } else {
+        cy.get(optionSelector).first().click({ force: true });
+      }
+    });
+    cy.get("body").then(($body) => {
+      const buttonWithName = $body.find(`button[aria-haspopup="listbox"][name="${name}"]`).length > 0;
+      const buttonSelector = buttonWithName ? `button[aria-haspopup="listbox"][name="${name}"]` : 'button[aria-haspopup="listbox"]';
+      waitForDropdownClose(buttonSelector, 3e3);
+    });
+    waitForReactUpdate();
+    return cy.get('button[aria-haspopup="listbox"]').first();
+  }, DEFAULT_CONFIG);
+}
 function selectDropdownOption(optionValue, dropdownIndex = 0) {
   const triggerSelector = HERO_UI_SELECTORS.dropdown.trigger;
   const optionSelector = HERO_UI_SELECTORS.dropdown.option;
@@ -246,6 +456,15 @@ function selectDropdownByLabel(label, optionValue) {
     });
   }, DEFAULT_CONFIG);
 }
+function checkCheckboxByName(name) {
+  return withRetry(() => {
+    waitForFormReady();
+    return cy.get(`input[type="checkbox"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").check({ force: true }).then(() => {
+      waitForReactUpdate();
+      return cy.get(`input[type="checkbox"][name="${name}"]`);
+    });
+  }, DEFAULT_CONFIG);
+}
 function checkCheckbox(index = 0) {
   const selector = HERO_UI_SELECTORS.checkbox.input;
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -258,6 +477,11 @@ function checkCheckboxByLabel(label) {
     return cy.contains("label", label).closest("div").find('input[type="checkbox"]').check({ force: true });
   }, DEFAULT_CONFIG);
 }
+function checkSwitchByName(name) {
+  return withRetry(() => {
+    return cy.get(`input[type="checkbox"][role="switch"][name="${name}"], input[type="checkbox"][name="${name}"][aria-label*="switch"]`).check({ force: true });
+  }, DEFAULT_CONFIG);
+}
 function checkSwitch(index = 0) {
   const selector = HERO_UI_SELECTORS.switch.input;
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -265,6 +489,15 @@ function checkSwitch(index = 0) {
     return element.check();
   }, DEFAULT_CONFIG);
 }
+function uncheckCheckboxByName(name) {
+  return withRetry(() => {
+    waitForFormReady();
+    return cy.get(`input[type="checkbox"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").uncheck({ force: true }).then(() => {
+      waitForReactUpdate();
+      return cy.get(`input[type="checkbox"][name="${name}"]`);
+    });
+  }, DEFAULT_CONFIG);
+}
 function uncheckCheckbox(index = 0) {
   const selector = HERO_UI_SELECTORS.checkbox.input;
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -272,6 +505,15 @@ function uncheckCheckbox(index = 0) {
     return element.uncheck();
   }, DEFAULT_CONFIG);
 }
+function uncheckSwitchByName(name) {
+  return withRetry(() => {
+    waitForFormReady();
+    return cy.get(`input[type="checkbox"][role="switch"][name="${name}"], input[type="checkbox"][name="${name}"][aria-label*="switch"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").uncheck({ force: true }).then(() => {
+      waitForReactUpdate();
+      return cy.get(`input[role="switch"][name="${name}"]`);
+    });
+  }, DEFAULT_CONFIG);
+}
 function uncheckSwitch(index = 0) {
   const selector = HERO_UI_SELECTORS.switch.input;
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -286,6 +528,99 @@ function moveSlider(value, index = 0) {
     return element.invoke("val", value).trigger("change");
   }, DEFAULT_CONFIG);
 }
+function moveSliderByName(name, value) {
+  return withRetry(() => {
+    waitForFormReady();
+    const slider = cy.get(`input[type="range"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist");
+    return slider.then(($slider) => {
+      const sliderElement = $slider[0];
+      if (!(sliderElement instanceof HTMLInputElement)) {
+        throw new Error("Expected HTMLInputElement for slider");
+      }
+      const min = Number(sliderElement.min || 0);
+      const max = Number(sliderElement.max || 100);
+      const clampedValue = Math.max(min, Math.min(max, value));
+      cy.wrap($slider).invoke("val", clampedValue).trigger("input", { force: true, bubbles: true }).then(() => {
+        sliderElement.value = String(clampedValue);
+        const inputEvent = new Event("input", { bubbles: true, cancelable: true });
+        sliderElement.dispatchEvent(inputEvent);
+        cy.wrap($slider).trigger("change", { force: true, bubbles: true }).then(() => {
+          const changeEvent = new Event("change", { bubbles: true, cancelable: true });
+          sliderElement.dispatchEvent(changeEvent);
+          waitForReactUpdate(1500);
+          return cy.wrap($slider);
+        });
+      });
+    });
+  }, DEFAULT_CONFIG);
+}
+function selectRadioByName(name, value) {
+  return withRetry(() => {
+    waitForFormReady();
+    return cy.get(`input[type="radio"][name="${name}"][value="${value}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").check({ force: true }).then(() => {
+      waitForReactUpdate();
+      return cy.get(`input[type="radio"][name="${name}"][value="${value}"]`);
+    });
+  }, DEFAULT_CONFIG);
+}
+function checkCheckboxInGroupByName(name, index = 0) {
+  return withRetry(() => {
+    waitForFormReady();
+    const checkboxes = cy.get(`input[type="checkbox"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist");
+    const targetCheckbox = index > 0 ? checkboxes.eq(index) : checkboxes.first();
+    return targetCheckbox.should("exist").check({ force: true }).then(() => {
+      waitForReactUpdate();
+      return targetCheckbox;
+    });
+  }, DEFAULT_CONFIG);
+}
+function selectAutocompleteByName(name, optionValue) {
+  return withRetry(() => {
+    waitForFormReady();
+    const input = cy.get(`input[name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").should("be.visible");
+    input.clear({ force: true });
+    input.focus();
+    input.click({ force: true });
+    waitForReactUpdate(300);
+    input.type(optionValue, { force: true, delay: 50 });
+    cy.wait(500);
+    cy.get('[role="listbox"], [role="combobox"], [role="dialog"]', { timeout: 5e3 }).should("exist");
+    cy.wait(200);
+    cy.get('[role="option"]', { timeout: 3e3 }).should("exist").contains(optionValue, { matchCase: false }).first().should("be.visible").click({ force: true });
+    waitForReactUpdate();
+    return cy.get(`input[name="${name}"]`);
+  }, DEFAULT_CONFIG);
+}
+function fillDateInputByName(name) {
+  return withRetry(() => {
+    return cy.get("body").then(($body) => {
+      const hasSpinbutton = $body.find('input[type="text"][role="spinbutton"]').length > 0;
+      const hasDateInput = $body.find('[data-slot="date-input"]').length > 0;
+      const hasDateField = $body.find(`[data-field-name="${name}"]`).length > 0;
+      if (hasSpinbutton || hasDateInput || hasDateField) {
+        if (hasSpinbutton) {
+          return cy.get('input[type="text"][role="spinbutton"]').first();
+        } else if (hasDateInput) {
+          return cy.get('[data-slot="date-input"]').first();
+        } else {
+          return cy.get(`[data-field-name="${name}"]`).first();
+        }
+      } else {
+        cy.log("DateInput component structure not found, but name attribute is set on component");
+        return cy.get("body");
+      }
+    });
+  }, DEFAULT_CONFIG);
+}
+function selectFileByName(name, filePath) {
+  return withRetry(() => {
+    waitForFormReady();
+    return cy.get(`input[type="file"][name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").selectFile(filePath, { force: true }).then(() => {
+      waitForReactUpdate();
+      return cy.get(`input[type="file"][name="${name}"]`);
+    });
+  }, DEFAULT_CONFIG);
+}
 function expectValidationError(message) {
   return cy.contains(message).should("be.visible");
 }
@@ -293,14 +628,37 @@ function expectNoValidationErrors() {
   return cy.get("body").should("not.contain", "error").and("not.contain", "invalid");
 }
 function expectFieldError(fieldLabel, errorMessage) {
-  const fieldContainer = cy.contains("label", fieldLabel).closest("div");
-  if (errorMessage) {
-    return fieldContainer.should("contain", errorMessage);
-  }
-  return fieldContainer.should(($div) => {
-    const text = $div.text();
-    const hasError = text.includes("error") || text.includes("invalid") || text.includes("required") || $div.find('[class*="error"], [class*="invalid"], [class*="danger"]').length > 0;
-    expect(hasError, "Field should have an error").to.be.true;
+  return cy.get("body").then(($body) => {
+    const labels = $body.find("label");
+    let $matchingLabel = null;
+    labels.each((index, label) => {
+      const labelText = Cypress.$(label).text().toLowerCase();
+      if (labelText.includes(fieldLabel.toLowerCase())) {
+        $matchingLabel = Cypress.$(label);
+        return false;
+      }
+    });
+    if (!$matchingLabel || $matchingLabel.length === 0) {
+      return cy.contains("label", new RegExp(fieldLabel, "i")).closest("div").then(($container) => {
+        if (errorMessage) {
+          return cy.wrap($container).should("contain", errorMessage);
+        }
+        return cy.wrap($container).should(($div) => {
+          const text = $div.text();
+          const hasError = text.includes("error") || text.includes("invalid") || text.includes("required") || $div.find('[class*="error"], [class*="invalid"], [class*="danger"]').length > 0;
+          expect(hasError, "Field should have an error").to.be.true;
+        });
+      });
+    }
+    const fieldContainer = cy.wrap($matchingLabel).closest("div");
+    if (errorMessage) {
+      return fieldContainer.should("contain", errorMessage);
+    }
+    return fieldContainer.should(($div) => {
+      const text = $div.text();
+      const hasError = text.includes("error") || text.includes("invalid") || text.includes("required") || $div.find('[class*="error"], [class*="invalid"], [class*="danger"]').length > 0;
+      expect(hasError, "Field should have an error").to.be.true;
+    });
   });
 }
 function expectFieldValid(fieldLabel) {
@@ -318,8 +676,11 @@ function triggerValidation(submitButton = false) {
 }
 function submitForm() {
   return withRetry(() => {
-    cy.get("form").should("exist");
-    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    waitForFormReady();
+    waitForElementState(HERO_UI_SELECTORS.button.submit, "visible", DEFAULT_CONFIG.timeout);
+    waitForElementState(HERO_UI_SELECTORS.button.submit, "enabled", DEFAULT_CONFIG.timeout);
+    cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+    waitForReactUpdate();
     return cy.get("form");
   }, DEFAULT_CONFIG);
 }
@@ -337,23 +698,27 @@ function submitAndExpectSuccess(successIndicator) {
 }
 function submitAndExpectErrors(errorMessage, formIndex = 0) {
   return withRetry(() => {
-    cy.get("form").should("exist");
-    cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).should("be.visible").should("not.be.disabled").click();
-    cy.get("form").should("exist");
-    cy.wait(500);
+    waitForFormReady();
+    waitForElementState(HERO_UI_SELECTORS.button.submit, "visible", DEFAULT_CONFIG.timeout);
+    waitForElementState(HERO_UI_SELECTORS.button.submit, "enabled", DEFAULT_CONFIG.timeout);
+    cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).click();
+    cy.get("form", { timeout: DEFAULT_CONFIG.timeout }).should("exist");
+    waitForValidation(true, 3e3);
     if (errorMessage) {
-      cy.get("body").then(($body) => {
+      cy.get("body", { timeout: 2e3 }).then(($body) => {
         if ($body.text().includes(errorMessage)) {
-          cy.contains(errorMessage).should("be.visible");
+          cy.contains(errorMessage, { timeout: 3e3 }).should("be.visible");
         } else {
           cy.log("Expected error message not found:", errorMessage);
-          cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"]').then(($errors) => {
-            cy.log("Found validation errors:", $errors.length);
-            $errors.each((index, error) => {
-              cy.log(`Error ${index}:`, error.textContent);
-            });
+          cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"], [class*="invalid"]', { timeout: 2e3 }).then(($errors) => {
+            if ($errors.length > 0) {
+              cy.log("Found validation errors:", $errors.length);
+              $errors.each((index, error) => {
+                cy.log(`Error ${index}:`, error.textContent);
+              });
+            }
           });
-          cy.contains(errorMessage).should("be.visible");
+          cy.contains(errorMessage, { timeout: 3e3 }).should("be.visible");
         }
       });
     }
@@ -361,12 +726,37 @@ function submitAndExpectErrors(errorMessage, formIndex = 0) {
   }, DEFAULT_CONFIG);
 }
 function resetForm() {
-  return cy.get("body").then(($body) => {
-    if ($body.find(HERO_UI_SELECTORS.button.reset).length > 0) {
-      return cy.get(HERO_UI_SELECTORS.button.reset).click();
-    }
-    return cy.get("input, textarea").each(($el) => {
-      cy.wrap($el).clear();
+  return waitForFormReady().then(() => {
+    return cy.get("body").then(($body) => {
+      if ($body.find(HERO_UI_SELECTORS.button.reset).length > 0) {
+        cy.get(HERO_UI_SELECTORS.button.reset, { timeout: DEFAULT_CONFIG.timeout }).should("be.visible").click();
+        waitForReactUpdate();
+        return cy.get("form");
+      }
+      cy.get("input, textarea", { timeout: DEFAULT_CONFIG.timeout }).each(($el) => {
+        const type = $el.attr("type");
+        const tagName = $el.prop("tagName")?.toLowerCase();
+        if (tagName === "textarea" || (type === "text" || type === "email" || type === "tel" || type === "password" || type === "url" || type === "search" || type === "number" || !type)) {
+          cy.wrap($el).clear({ force: true });
+        }
+      });
+      cy.get('input[type="checkbox"]').each(($el) => {
+        const role = $el.attr("role");
+        if (role !== "switch" && $el.attr("type") === "checkbox") {
+          cy.wrap($el).uncheck({ force: true });
+        }
+      });
+      cy.get('input[role="switch"]').each(($el) => {
+        cy.wrap($el).uncheck({ force: true });
+      });
+      cy.get("form").then(($form) => {
+        const formElement = $form[0];
+        if (formElement instanceof HTMLFormElement) {
+          formElement.reset();
+        }
+      });
+      waitForReactUpdate();
+      return cy.get("form");
     });
   });
 }
@@ -379,11 +769,24 @@ function interceptFormSubmission(method, url, alias) {
   }, DEFAULT_CONFIG);
 }
 function verifyFormExists() {
-  return cy.get("form").should("exist");
+  return waitForFormReady();
 }
 function verifyFieldExists(selector) {
   return cy.get(selector).should("exist");
 }
+function verifyFieldValueByName(name, value) {
+  return withRetry(() => {
+    waitForFormReady();
+    cy.get(`input[name="${name}"], textarea[name="${name}"], select[name="${name}"]`, { timeout: DEFAULT_CONFIG.timeout }).should("exist").then(($el) => {
+      const actualValue = $el.val();
+      if (actualValue === value) {
+        return cy.wrap($el).should("have.value", value);
+      } else {
+        return verifyFormDataValue(name, value);
+      }
+    });
+  }, DEFAULT_CONFIG);
+}
 function verifyFieldValue(type, value, index = 0) {
   const selector = type === "textarea" ? buildHeroUISelector("textarea") : buildHeroUISelector("input", type);
   const element = index > 0 ? cy.get(selector).eq(index) : cy.get(selector).first();
@@ -400,28 +803,52 @@ function fillCompleteForm(formData) {
     Object.entries(formData).forEach(([key, value]) => {
       if (value === null || value === void 0) return;
       const fieldType = detectFieldType(value);
-      switch (fieldType) {
-        case "text":
-        case "email":
-        case "tel":
-        case "password":
-        case "number":
-          fillInputByType(fieldType, String(value));
-          break;
-        case "checkbox":
-          if (value) {
-            checkCheckbox();
-          }
-          break;
-        default:
-          cy.get("body").then(($body) => {
-            if ($body.find(`label:contains("${key}")`).length > 0) {
-              fillInputByLabel(key, String(value));
+      cy.get("body").then(($body) => {
+        const hasNameAttribute = $body.find(`[name="${key}"]`).length > 0;
+        if (hasNameAttribute) {
+          const fieldElement = cy.get(`[name="${key}"]`);
+          fieldElement.then(($el) => {
+            const tagName = $el.prop("tagName")?.toLowerCase();
+            const inputType = $el.attr("type");
+            const role = $el.attr("role");
+            if (tagName === "textarea") {
+              fillTextareaByName(key, String(value));
+            } else if (tagName === "select") {
+              selectDropdownByName(key, String(value));
+            } else if (inputType === "checkbox" || inputType === "radio") {
+              const isSwitch = role === "switch" || $el.attr("aria-label")?.includes("switch");
+              if (value) {
+                isSwitch ? checkSwitchByName(key) : checkCheckboxByName(key);
+              } else {
+                isSwitch ? uncheckSwitchByName(key) : uncheckCheckboxByName(key);
+              }
             } else {
-              fillInputByType("text", String(value));
+              fillInputByName(key, String(value));
             }
           });
-      }
+        } else {
+          switch (fieldType) {
+            case "text":
+            case "email":
+            case "tel":
+            case "password":
+            case "number":
+              fillInputByType(fieldType, String(value));
+              break;
+            case "checkbox":
+              if (value) {
+                checkCheckbox();
+              }
+              break;
+            default:
+              if ($body.find(`label:contains("${key}")`).length > 0) {
+                fillInputByLabel(key, String(value));
+              } else {
+                fillInputByType("text", String(value));
+              }
+          }
+        }
+      });
     });
     return cy.get("form");
   });
@@ -702,6 +1129,20 @@ var init_commands = __esm({
   "src/cypress/commands.ts"() {
     "use strict";
     init_helpers();
+    init_utils();
+    Cypress.Commands.add("fillInputByName", fillInputByName);
+    Cypress.Commands.add("fillTextareaByName", fillTextareaByName);
+    Cypress.Commands.add("selectDropdownByName", selectDropdownByName);
+    Cypress.Commands.add("checkCheckboxByName", checkCheckboxByName);
+    Cypress.Commands.add("checkSwitchByName", checkSwitchByName);
+    Cypress.Commands.add("uncheckCheckboxByName", uncheckCheckboxByName);
+    Cypress.Commands.add("uncheckSwitchByName", uncheckSwitchByName);
+    Cypress.Commands.add("moveSliderByName", moveSliderByName);
+    Cypress.Commands.add("selectRadioByName", selectRadioByName);
+    Cypress.Commands.add("checkCheckboxInGroupByName", checkCheckboxInGroupByName);
+    Cypress.Commands.add("selectAutocompleteByName", selectAutocompleteByName);
+    Cypress.Commands.add("fillDateInputByName", fillDateInputByName);
+    Cypress.Commands.add("selectFileByName", selectFileByName);
     Cypress.Commands.add("fillInputByType", fillInputByType);
     Cypress.Commands.add("fillInputByPlaceholder", fillInputByPlaceholder);
     Cypress.Commands.add("fillInputByLabel", fillInputByLabel);
@@ -723,6 +1164,7 @@ var init_commands = __esm({
     Cypress.Commands.add("submitAndExpectErrors", submitAndExpectErrors);
     Cypress.Commands.add("verifyFormExists", verifyFormExists);
     Cypress.Commands.add("verifyFieldExists", verifyFieldExists);
+    Cypress.Commands.add("verifyFieldValueByName", verifyFieldValueByName);
     Cypress.Commands.add("verifyFieldValue", verifyFieldValue);
     Cypress.Commands.add("verifyFieldCount", verifyFieldCount);
     Cypress.Commands.add("getFormData", getFormData);
@@ -751,9 +1193,50 @@ var init_commands = __esm({
         cy.log("Form state:", formData);
       });
     });
-    Cypress.Commands.add("waitForFormReady", () => {
-      cy.get("form").should("exist");
-      cy.get("input, textarea, select").should("be.visible");
+    Cypress.Commands.add("waitForFormReady", (timeout) => {
+      return waitForFormReady(timeout);
+    });
+    Cypress.Commands.add("waitForReactUpdate", (timeout) => {
+      return waitForReactUpdate(timeout);
+    });
+    Cypress.Commands.add("waitForElementState", (selector, state, timeout) => {
+      return waitForElementState(selector, state, timeout);
+    });
+    Cypress.Commands.add("waitForDropdownOpen", (timeout) => {
+      return waitForDropdownOpen(timeout);
+    });
+    Cypress.Commands.add("waitForDropdownClose", (buttonSelector, timeout) => {
+      return waitForDropdownClose(buttonSelector, timeout);
+    });
+    Cypress.Commands.add("getFormDataValue", (fieldName) => {
+      return getFormDataValue(fieldName);
+    });
+    Cypress.Commands.add("verifyFormDataValue", (fieldName, expectedValue, timeout) => {
+      return verifyFormDataValue(fieldName, expectedValue, timeout);
+    });
+    Cypress.Commands.add("waitForValidation", (shouldHaveErrors, timeout) => {
+      return waitForValidation(shouldHaveErrors, timeout);
+    });
+    Cypress.Commands.add("getFormDataArray", (fieldName) => {
+      return getFormDataArray(fieldName);
+    });
+    Cypress.Commands.add("verifyFormDataArray", (fieldName, expectedValues, exactMatch) => {
+      return verifyFormDataArray(fieldName, expectedValues, exactMatch);
+    });
+    Cypress.Commands.add("verifyFormDataFieldExists", (fieldName) => {
+      return verifyFormDataFieldExists(fieldName);
+    });
+    Cypress.Commands.add("verifyNameAttribute", (fieldName, selector) => {
+      return verifyNameAttribute(fieldName, selector);
+    });
+    Cypress.Commands.add("verifyFormDataStructure", (expectedData) => {
+      return verifyFormDataStructure(expectedData);
+    });
+    Cypress.Commands.add("verifyFormCleared", (fieldNames) => {
+      return verifyFormCleared(fieldNames);
+    });
+    Cypress.Commands.add("verifyDropdownNameAttribute", (fieldName, labelText) => {
+      return verifyDropdownNameAttribute(fieldName, labelText);
     });
     Cypress.Commands.add("clearForm", () => {
       cy.get("input, textarea").each(($el) => {
@@ -872,7 +1355,10 @@ export {
   buildHeroUISelector,
   checkCheckbox,
   checkCheckboxByLabel,
+  checkCheckboxByName,
+  checkCheckboxInGroupByName,
   checkSwitch,
+  checkSwitchByName,
   detectFieldType,
   dynamicFormHelpers,
   elementExists,
@@ -882,24 +1368,35 @@ export {
   expectValidationError,
   extractFormData,
   fillCompleteForm,
+  fillDateInputByName,
   fillInputByLabel,
+  fillInputByName,
   fillInputByPlaceholder,
   fillInputByType,
   fillTextarea,
+  fillTextareaByName,
+  findButtonNearLabel,
   findFieldByLabel,
   findFieldByPlaceholder,
   findFieldByType,
   forceClickWithRetry,
   formSubmissionHelpers,
   getFormData,
+  getFormDataArray,
+  getFormDataValue,
   interceptFormSubmission,
   logFormState,
   moveSlider,
+  moveSliderByName,
   performanceHelpers,
   registerHeroFormCommands,
   resetForm,
+  selectAutocompleteByName,
   selectDropdownByLabel,
+  selectDropdownByName,
   selectDropdownOption,
+  selectFileByName,
+  selectRadioByName,
   submitAndExpectErrors,
   submitAndExpectSuccess,
   submitForm,
@@ -915,11 +1412,27 @@ export {
   typeInferenceHelpers,
   typeWithClear,
   uncheckCheckbox,
+  uncheckCheckboxByName,
   uncheckSwitch,
+  uncheckSwitchByName,
+  verifyDropdownNameAttribute,
   verifyFieldCount,
   verifyFieldExists,
   verifyFieldValue,
+  verifyFieldValueByName,
+  verifyFormCleared,
+  verifyFormDataArray,
+  verifyFormDataFieldExists,
+  verifyFormDataStructure,
+  verifyFormDataValue,
   verifyFormExists,
+  verifyNameAttribute,
+  waitForDropdownClose,
+  waitForDropdownOpen,
+  waitForElementState,
+  waitForFormReady,
+  waitForReactUpdate,
   waitForStable,
+  waitForValidation,
   withRetry
 };