前端时间控件(web自动化测试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
注意:
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 。
以上总结或许能帮助到你,或许帮助不到你,但还是希望能帮助到你,如有疑问、歧义,评论区留言会及时修正发布,谢谢!
未完,待续…
一直都在努力,希望您也是!
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com