selenium常用操作之JS处理日历控件

在web自动化中，我们会遇到日历控制这种场景，大致分为两种。

1.可以直接输入日期；

2.不能够直接输入日期，只能选择。

对于可以直接输入日期的我们可以用webdriver 去设置日期，流程为：

1. 定位到该日期输入的input

2. 直接使用sendKeys 方法 ，输入正确格式的日期

示例代码如下：

driver.find_element_by_xpath("///input[@name="phone" and @datatype="m"]")).sendKeys("2020-03-13")

但是，有的日期控件是readonly的

比如12306的这个

<input id="train_date" class="inp-txt" type="text" value="" name="leftTicketDTO.train_date" autocomplete="off" maxlength="10" readonly="readonly">

这个时候，没法调用WebElement的sendKeys()

---

方法1：

1. 定位到该日期输入的input

2. 使用JS remove readonly attribute，然后使用sendKeys 方法 ，输入正确格式的日期

#去掉只读属性
js_pha='document.getElementById("train_datte").readonly=false'#或js_pha='document.getElementById("train_datte").removeAttribute("readonly")'

driver.excute_script(js_pha)
#或者：driver.execute_script('arguments[0].removeAttribute("readonly")',driver.find_element_by_id("train_date"))

#清除原来的内容并写入日期 
driver.find_element_by_id("train_date").clear() driver.find_element_by_id("train_date").sendKeys("2020-03-13")

　　

方法2：

1. 定位到该日期输入的input

2. 使用JS remove readonly attribute，然后使用JS修改日期

#去掉只读属性
js_pha='document.getElementById("train_datte").readonly=false'#或js_pha='document.getElementById("train_datte").removeAttribute("readonly")'

driver.excute_script(js_pha)
#或者：driver.execute_script('arguments[0].removeAttribute("readonly")',driver.find_element_by_id("train_date"))

#直接通过js语句来修改日期
driver.execute_script('document.getElementById("train_date").value=2020-3-13')