I often build ActionChains to interact with MUI components. Here is one that enters the date MM/DD/YYYY but ensures we start typing in the MM portion of the input. I have to wait for the animation of the field label to move out of the way before the input will accept anything.

actions = ActionChains(driver, duration=CHAIN_DURATION)
actions.move_to_element(element)
actions.click(element)
actions.pause(.25) # animation of label to move out of the way.
actions.send_keys(Keys.ARROW_LEFT)
actions.send_keys(Keys.ARROW_LEFT)
actions.send_keys(date_str)
actions.send_keys(Keys.TAB)
actions.perform()

The problem is this animation speed is variable (and it's not always known how fast each component will be). What I wish I had was the ability to perform a WebDriverWait.until(expected_condition) in the middle of the ActionChain. In this case I would wait until the label element (different from the input element) has stopped moving.

Is this possible in some way?

I often build ActionChains to interact with MUI components. Here is one that enters the date MM/DD/YYYY but ensures we start typing in the MM portion of the input. I have to wait for the animation of the field label to move out of the way before the input will accept anything.

actions = ActionChains(driver, duration=CHAIN_DURATION)
actions.move_to_element(element)
actions.click(element)
actions.pause(.25) # animation of label to move out of the way.
actions.send_keys(Keys.ARROW_LEFT)
actions.send_keys(Keys.ARROW_LEFT)
actions.send_keys(date_str)
actions.send_keys(Keys.TAB)
actions.perform()

The problem is this animation speed is variable (and it's not always known how fast each component will be). What I wish I had was the ability to perform a WebDriverWait.until(expected_condition) in the middle of the ActionChain. In this case I would wait until the label element (different from the input element) has stopped moving.

Is this possible in some way?

• python
• selenium-webdriver
• material-ui
• mui-x-date-picker

Share Improve this question Follow edited Mar 27 at 12:36 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Mar 6 at 15:52 Marcel WilsonMarcel Wilson 4,59022 gold badges3434 silver badges6767 bronze badges 5

• 1 I don't think you can and I don't know what you would wait for anyway. How would you wait for the animation to finish unless there was some jQuery, etc. actions going on in the background that you could poll? – JeffC Commented Mar 6 at 17:21
• 1 Although... you could wait for the exceptions to stop, e.g. wait for ElementNotInteractableException (or whatever) to stop firing. Once it stops, you know the element is ready. – JeffC Commented Mar 6 at 17:29
• Sadly, we never hit an exception. The selenium sees the component and sends the keys to it but the values never register. My hunch is it's either animation is in the way, or possibly some javascript hasn't finished. – Marcel Wilson Commented Mar 7 at 18:41
• For movement based animations I built a custom expected condition that polls the coordinates of the element. It keeps looping while the coordinates are changing. – Marcel Wilson Commented Mar 7 at 18:43
• Can you share the URL or a demo page with this type of control on it? I feel like it can be done but I need a demo page to be able to experiment. – JeffC Commented Mar 8 at 2:55

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I found a sample page with a MUI date control, https://mui/x/react-date-pickers/date-range-picker. The code below works with it.

Basically I send the desired date to the INPUT until the placeholder text disappears.

import time
from selenium import webdriver
from selenium.webdrivermon.by import By

driver = webdriver.Chrome()

url = "https://mui/x/react-date-pickers/date-range-picker/"
driver.get(url)

target_date = "03072025"
date_field = driver.find_elements(By.CSS_SELECTOR, "input")[0]
date_field.click()
while date_field.get_attribute("value") == "MM/DD/YYYY":
    date_field.send_keys(target_date)
    time.sleep(0.1)

time.sleep(0.5) # additional wait may be needed?
date_field.clear()
date_field.send_keys(target_date)

driver.quit()

What you need to do is the following:

1. Find out the locator for input "MM/DD/YYYY" element using xpath, css or ID

2. Click on the element or its direct parent element

3. Use a while loop that checks for the DOM Property "value" of the element to change to MM/DD/YYYY and exit once it changes to it.

4. Then SendKeys or type each character slowly to the element

You do not need any arbitrary pauses, delays, sleeps or actions chain