selenium 常见操作,使用 js 操作-日期框及文本框

在使用 selenium 对页面进行相关操作时,有时候会遇到以下三种情况:

1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框;

2.检索框:可以直接输入文本,但必须要点击根据输入的文本检索出来的下拉列表的某-项;

3.置灰的文本框:无法直接输入文本

按照常规套路,我们通常都会采取各种元素定位方法按照操作步骤一步步来实现 ,但是遇到上面三种奇葩,页面定位操作就显得有些捉襟见肘了,因此我们可以通过 selenium 中的 javascript 操作来处理它。

  我们以12306铁路官网的查票系统来演示,先看看出发地文本框,这个就是典型的检索框,根据下面两张图的对比,当我们在出发地通过输入检索信息选择了"上海”之后,第一个input 标签的 value 由空值变更为“SHH" (代表上海), 第二个 input 标签的 "class" 由 input 变更为 "input inp-txt_select" (虽然最终不需要通过js去改变这个值也能达到效果), 另外第二个 input 标签的 value 改变了隐藏属性,由“简拼/全拼/汉字” 变更为了“上海”, 通过js可以获取到。

====

 

我们先来通过 F12 的 Console 来获取并改变它的文本框的值,具体步骤见下图 :

通过js操作,我们知道它的初始值为空

  当我们把第一个标签的value的值改变为“SHH” , 第二个标签的value的值改变为“上海”时,文本框自动变更为“上海”,到达地检索框的操作方法一 致。

针对日期框,跟上面的检索框处理方法略有差别,先看看日期框的页面元素属性

  我们已经注意到它有两个关键属性value和readonly ,通过js发现, readonly的属性值为true , 表示禁止输入,那么我们可以直接通过修改readonly的值为false来达到我们的目的

  置灰输入框操作方法跟上面大同小异,这里就不依依演示了,在 selenium 中,driver对象有一个方法可以专门操作js ,这个方法名为:execute. script() ,源代码如下:

使用方法通过以下代码来示例:

‘‘‘
使用js完成12306的查票操作
‘‘‘
from datetime import datetime
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.12306.cn/index/")  # 打开12306官网

start_area_js = ‘‘‘
                var a = document.getElementById("fromStation");
                a.value = ‘NJH‘;
                ‘‘‘
driver.execute_script(start_area_js)

start_input_js = ‘‘‘
                var j = document.getElementById(‘fromStationText‘);
                j.className = ‘input inp-txt_select‘;
                j.value = ‘南京‘;
                ‘‘‘
driver.execute_script(start_input_js)

# 修改到达地
end_area_js = ‘‘‘
                var b = document.getElementById("toStation");
                b.value = ‘SHH‘;
                ‘‘‘
driver.execute_script(end_area_js)

end_input_js = ‘‘‘
                var k = document.getElementById(‘toStationText‘);
                k.className = ‘input inp-txt_select‘;
                k.value = ‘上海‘;
                ‘‘‘
driver.execute_script(end_input_js)

# 修改出发日期,利用f表达式使用datetime.now()动态获取当天日期(格式:年-月-日)
# 方法一
# 通过操作js语句document下的getElementById()方法传入id值
train_date_js = f‘‘‘
                var c = document.getElementById(‘train_date‘);
                c.readOnly = false;
                c.value = ‘{datetime.strftime(datetime.now(), "%Y-%m-%d")}‘
                ‘‘‘
driver.execute_script(train_date_js)

# 方法二
# 通过创建WebElement对象传入arguments中,方括号里面的索引值+1跟execute_script()里的参数索引保持对应
ele = driver.find_element_by_xpath("//input[@id=‘train_date‘]")
train_date_js = f‘‘‘
                var c = arguments[0];
                c.readOnly = false;
                c.value = ‘{datetime.strftime(datetime.now(), "%Y-%m-%d")}‘
                ‘‘‘
driver.execute_script(train_date_js, ele)

# 点击查询
select_button_ele = driver.find_element_by_xpath(
    "//input[@id=‘train_date‘]/ancestor::div[@class=‘form-item‘]/following-sibling::div//a[contains(text(),‘查‘)]")
select_button_js = ‘‘‘
                var d = arguments[0];
                d.click();
‘‘‘
driver.execute_script(select_button_js, select_button_ele)

尊重原创:该篇文章摘自作者:小公瑾  出处为:https://www.cnblogs.com/xiaogongjin/

原文地址:https://www.cnblogs.com/shouhu/p/12227311.html

时间: 2024-08-24 07:10:55

selenium 常见操作,使用 js 操作-日期框及文本框的相关文章

JS将光标移动到文本框后面

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

js自动过滤替换页面文本框和文本域内容中的特殊字符并进行提示

在开发java web页面时需要校验用户的输入内容是否合法,在进行校验时我们可以单独把校验特殊字符这块抽取出来,只需要在每个页面引用下该js即可实现校验不需要再页面设置其他东西,js会自动捕捉页面文本框和文本域,同时也方便了以后代码的复用. 代码如下: var tagname=''; var attrid=''; var tagvalue=''; document.oninput = function(e){ var o = e.srcElement || e.target; getValue(

jQuery实现限制input框 textarea文本框输入字符数量的方法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery实现限制input框 textarea文本框输入字符数量的方法</title> </head> <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>&l

下拉框与文本框重叠,即可以录入又可以选择的效果。

<div style="position:relative;"> <span style="margin-left: 100px; width: 18px; overflow: hidden;"> <select id="brand" name="brandId" style="width:150px; margin-left:-100px;height:21px;">

下拉框与文本框之间的转换

<html> <head> <meta charset="utf-8"> <title>下拉框与文本框之间的转换</title> <script language="JavaScript"> function demo(){ var sel=document.all["sel"]; var tx=document.all["txt"]; //alert(s

selenium 常见操作,js操作-将元素滚动到页面可见区域

我们在自动化测试中,会遇到需要把浏览器页面的元素移动到可见区域,就需要使用页面向上或者向下滚动 js操作-滚动条:使用: selenium 当中使用 execute_script   (译:埃克斯Q特.思怪泼特) 方法 执行 js 语句: 页面元素滚动到可见区域常用的操作: 1.移动到元素element对象的“底端”与当前窗口的“底部”对齐: driver.execute_script("arguments[0].scrollIntoView(false);",element) 2.移

Selenium Webdriver——JS处理rich text(富文本框)

126邮件正文邮件的rich text 先让selenium切换到iframe中 driver.switchTo().frame(driver.findElement(By.className("APP-editor-iframe"))); 然后执行JS WebElement editor = driver.findElement(By.tagName("body")); JavascriptExecutor jsExecutor = (JavascriptExec

使用EasyUI,关于日期格式的文本框按照正常方式获取不到值的问题

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q