17-通过JS代码处理日历控件（去掉readonly属性）

        日历控件是web页面上很常见的一个功能，有些输入框是可以直接输入日期的，有些是不能的。以智行火车票网站为例，详细讲解如何解决日历控件有readonly属性的问题。

        基本思路：先通过JS代码去掉readonly属性，然后直接输入日期文本内容。

一、日历控件

1）打开智行火车票的查询界面，无法在日期输入框直接输入时间。

2）常规思路是点开日历控件弹出框，从日历控件上点日期，这种操作比较麻烦，并且我们测试的重点不在日历控件上，只是想输入一个时间，然后去做下一步的操作。

3）日期输入框具有属性：readonly="readonly"，如下图所示：

二、切换iframe

        查看网页源码，日期输入框所在页面是在一个iframe中，所以需要先进行切换。

driver.switch_to.frame(driver.find_element('tag name', 'iframe'))

三、通过JS代码去掉readonly属性

        这种元素对象具有readonly属性，因此是无法直接输入的，这时候需要先去掉该元素对象的readonly属性，然后就可以直接输入日期了。

        基本思路：先定位到该元素对象，然后用removeAttribute("readonly")方法删除属性。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('https://www.suanya.cn/')
time.sleep(3)

# 切换iframe
driver.switch_to.frame(driver.find_element('tag name', 'iframe'))

# 去掉readonly属性
js = 'document.getElementById("train_date").removeAttribute("readonly");'
driver.execute_script(js)

四、通过send_keys()方法输入日期

1）输入日期前，先清空日期输入框中的内容。

2）通过send_keys()方法输入日期后，会自动弹出日历控件，随便点下其它位置就好了。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('https://www.suanya.cn/')
time.sleep(3)

# 切换iframe
driver.switch_to.frame(driver.find_element('tag name', 'iframe'))

# 去掉readonly属性
js = 'document.getElementById("train_date").removeAttribute("readonly");'
driver.execute_script(js)

# 通过send_keys()方法输入日期
driver.find_element('css selector', '.calendar-input.input_txt270').clear()
driver.find_element('css selector', '.calendar-input.input_txt270').send_keys('2024-6-1')

五、通过JS代码输入日期

        也可以通过JS代码输入日期，原理很简单，直接修改日期输入框的value值就可以了。并且使用该方式输入日期后，不会自动弹出日历控件。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get('https://www.suanya.cn/')
time.sleep(3)

# 切换iframe
driver.switch_to.frame(driver.find_element('tag name', 'iframe'))

# 去掉readonly属性
js = 'document.getElementById("train_date").removeAttribute("readonly");'
driver.execute_script(js)

# 通过send_keys()方法输入日期
# driver.find_element('css selector', '.calendar-input.input_txt270').clear()
# driver.find_element('css selector', '.calendar-input.input_txt270').send_keys('2024-6-1')

# 通过JS代码输入日期
js_value = 'document.getElementById("train_date").value="2024-6-1"'
driver.execute_script(js_value)