How to fill datepicker input field in chrome headless mode?

I am working on a project which is built on top of React MUI component and the issue I am facing is the datepicker field. This input field is an input with type=’tel’, MUI by default sets this for Datepicker fields. Our team of developers tried to change the input to input type=’text’ but MUI somehow overwrites it. I am writing UI automation tests in Selenium Python and I am facing an issue with filling this input with send_keys(method).

  • I have tried every workaround in the web, but I couldn’t understand why its not working.
  • I have tried to click and then insert, use Datepicker calendar to click by date, month, year and its not possible to perform click operation because in headless mode datepicker icon is not shown.
  • I have tried using Javascript to set the value of the input and it didnt work as well.
  • I have tried adding all necessary chrome arguments and a custom user agent:
    chrome_options.add_argument('--enable-javascript')
    chrome_options.add_argument(f"--window-position={2000},{0}")
    chrome_options.add_argument('--enable-javascript')
    chrome_options.add_argument("--nogpu")
    chrome_options.add_argument("--incognito")
    chrome_options.add_argument("--no-sandbox")
    chrome_options.add_argument('--disable-gpu')
    chrome_options.add_argument('--window-size=1920,1080')
    chrome_options.add_argument('--start-maximized')
    chrome_options.add_experimental_option("excludeSwitches", ["enable-automation"])
    chrome_options.add_experimental_option("useAutomationExtension", False)
    chrome_options.add_argument('--disable-blink-features=AutomationControlled')
    chrome_options.add_argument('--headless')
    

I ran out of options, as I don’t know what to do next