web自动化测试js处理日期控件

–

js处理日期控件方法

元素定位中我们会碰到一些日历控件，针对像有readonly这种的我们就可以使用js或者jQuery提供的方法来处理它，当然，如果你jQuery玩的特别好，那元素定对你来说就更是毛毛雨了。

下面以12306网站为栗子：

从截图中可以看到是有raadonly的，readonly去掉后我们就可以使用send_keys进入输入数据操作了。

js写不好，我们可以在浏览器Console控制台下操作，因为有自动补充语句功能过，可以在这边操作完了复制到代码中运行…

我使用了getElementById方法定位的，当然你也可以根据标签选择其他方法：

• Console控制台输入的代码是移除readonly：
  
• Elements中readonly已经被移除：
  

做完以上这些操作后，我们把浏览器Console中的代码，复制到自动化代码中运行：

import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys


with webdriver.Chrome() as driver:
    driver.get('https://www.12306.cn/index/')
    js = 'document.getElementById("train_date").removeAttribute("readonly");'
    driver.execute_script(js)
    driver.find_element_by_id("train_date").send_keys(Keys.COMMAND + 'a')
    time.sleep(1)
    driver.find_element_by_id("train_date").send_keys(Keys.BACKSPACE)
    time.sleep(1)
    driver.find_element_by_id("train_date").send_keys('2021-03-15')
    print(driver.find_element_by_id("train_date").get_attribute('value'))
    time.sleep(2)
    

运行后的结果输出到控制台上：

/Users/lifeng/python-virtualenv/venv/bin/python3 /Users/lifeng/python-projects/test-python/selenium_script.py
设置前：2021-03-13
设置后：2021-03-15

Process finished with exit code 0

注意：
document.getElementById(“train_date”).removeAttribute(“readonly”);最后的" ; " 尽可能加上，实操中发现加了后几乎都能成功，输入值也能设置成功；不加会出现运行成功，但是输入值没有设置成功

可能会有疑问，为什么上述代码中要有全选和退格操作：全选是为了选中输入框中的默认值，用于退格删除操作，就是为了防止输入框中显示两个值：

还有就是使用jQuery的提供的方法去处理：

    
    js = r"$('input[id=train_date]').removeAttr('readonly');"
    js = r"$('input[id=train_date]').attr('readonly', 'false');"
    

您可以实操下，但是并不是所有的前端框架都支持含$符号的，不支持的可能会抛出错误：
selenium.common.exceptions.JavascriptException: Message: javascript error: $ is not defined 。

–

以上总结或许能帮助到你，或许帮助不到你，但还是希望能帮助到你，如有疑问、歧义，评论区留言会及时修正发布，谢谢！

未完，待续…
一直都在努力，希望您也是！