How to interact with Ant Design calendar from Selenium?

user_2009808 0
Viewed 307

I have an app using a calendar from Ant Design.

The date picker seems to be a read only attribute. I need to interact with this element from Selenium in Python.

To get around it, I tried the following code:

self.driver.execute_script("document.querySelector('.ant-calendar-picker-input.ant-input').readOnly = false")
self.driver.execute_script("document.querySelector('.ant-calendar-picker-input.ant-input').value ='12-12-2021'")
self.driver.execute_script("document.querySelector('.ant-calendar-picker-input.ant-input').readOnly = true")

With this code the date does not get updated (it does change on the UI, but the date HTML attribute is empty). What am I doing wrong?

Here are screenshots of the HTML code: enter image description here After the date gets updated (manually): enter image description here

Thanks

antd selenium-webdriver selenium html javascript
1 Answers

Based on the HTML that you've shared, I would advise you to use the below code to update the date picker field, you do not need to click in date picker at all, just run the below JS code.

wait = WebDriverWait(driver, 20)
date_to_fill = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "span#codigo_fecha_vencimiento input.ant-calendar-picker-input.ant-input")))
driver.execute_script("arguments[0].setAttribute('value', '15-09-2021')", date_to_fill)

Imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
user_94440730
Related