How to programmatically fill out a Formik form in a React application while its components are not exposed to the DOM

[Nirvanatin]

How can I programmatically fill out a form that is built using Formik in a React application and ensure that the form is filled up identically to how a person would fill out the form manually?

One issue I am encountering is that the page is using the production build of React, and its components are not exposed to the DOM (for example, the Formik context object). I have identified a list of properties that I can view in the React Developer Tools extension, but I am concerned that these properties may not be triggered or filled properly if I try to automate the page.

The list of properties I am considering includes handleChange, handleBlur, touched, validateForm, validateField, isSubmitting, submitCount, and nested objects. The form contains nested objects, such as city or agency IDs, so I need to ensure that these fields are properly populated with the correct values before setting their values. Additionally, I am not sure if any of the form fields have asynchronous updates or side effects. If there are any asynchronous updates, I need to ensure that these updates are properly triggered and resolved before submitting the form.

For certain reasons, I prefer not to use BeautifulSoup or Selenium. I have attempted to use the code provided below, but it has failed to properly fill out the form.

(function () {
  const inputXPath = '/html/body/div/div/div[2]/div/form/div/div/div[4]/div/div/div[1]/div/input';
  const valueToSet = 'John';
  const inputName = 'firstName';
  const touchedValue = true;

  const inputElement = document.evaluate(inputXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

  if (inputElement) {
    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
    const focusEvent = new Event('focus', { bubbles: true });
    const inputEvent = new Event('input', { bubbles: true });
    const blurEvent = new Event('blur', { bubbles: true });
    const changeEvent = new Event('change', { bubbles: true });

    const formikContextXPath = '/html/body/div/div/div[2]/div/form';
    const formikContext = document.evaluate(formikContextXPath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

    if (formikContext && formikContext.hasAttribute('data-formik-context')) {
      const setTouched = (name, value) => {
        formikContext.formik.setTouched({ [name]: value });
      };

      inputElement.dispatchEvent(focusEvent);
      nativeInputValueSetter.call(inputElement, valueToSet);
      inputElement.dispatchEvent(inputEvent);
      inputElement.dispatchEvent(blurEvent);
      inputElement.dispatchEvent(changeEvent);
      setTouched(inputName, touchedValue);

      console.log(`success`);
    } else {
      console.error('Cannot find the Formik context object');
    }
  } else {
    console.error(`Cannot find the XPath`);
  }
})();