selenium自动化js处理日历控件操作

日历控件是在web上常遇到的场景,有些事可以输入,但有些事不能输入的,接下来以12306网站为例,讲解如何解决日历控件为readonly属性的问题

基本思路:先用js去掉readonly属性,然后直接输入日期文本内容

用Google查看输入框的属性：readonly=""，如下：

 

用js去掉readonly属性:

1.用js去掉元素属性基本思路:先定位到元素,然后用removeAttribute("readonly")方法删除属性

2.出发日元素id为:train_date,对应js代码为:'goData = document.getElementById("train_date");'

3.使用removeAttribute()方法删除属性:'goData.removeAttribute("readonly")'

 

输入日期:

1.输入日期前,一定要先清空文本,要不然无法输入成功的

2.这里输入日期后,会自动弹出日历控件,随便点下其它位置就好了

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http://www.12306.cn')

# 准备js语句并去掉元素readonly属性
goData = 'document.getElementById("train_date").removeAttribute("readonly");'

# 调用webdriver里面的方法去执行js
driver.execute_script(goData)

# 清空文本后输入值
driver.find_element_by_id('train_date').clear()
driver.find_element_by_id('train_date').send_keys('2019-07-01')

使用js方法输入日期,这个就不会弹出日历了:

from selenium import webdriver

driver = webdriver.Chrome()
driver.get('http://www.12306.cn')

# 去掉元素readonly属性
goData = 'document.getElementById("train_date").removeAttribute("readonly");'
# 调用webdriver里面的方法去执行js
driver.execute_script(goData)
# 使用js方法输入日期
js_value = 'document.getElementById("train_date").value = "2019-07-01"'
# 调用webdriver里面的方法去执行js
driver.execute_script(js_value)