web自动化之selenium(七)通过操作js操作元素

通过js操作滚动条

js = "window.scrollTo(200,400);" #定义移动的目标位置
driver.execute_script(js)  #执行

js = "window.scrollTo(-200,-400);" #定义移动的目标位置
driver.execute_script(js)  #执行

通过js修改属性

js = "document.querySelector('#radio > input.Mi').removeAttribute('disabled');"
driver.execute_script(js)

其他的js定位方法

# 1、通过元素id属性，获取元素
document.getElementById('id');
# 2、通过元素name属性，获取元素列表
document.getElementsByName('name');
# 3、通过标签名，获取元素列表
document.getElementsByTagName('tag_name');
# 4、通过类名，获取元素列表
document.getElementsByClassName("class_name");
# 5、通过选择器，获取一个元素
document.querySelector("css selector")
# 6、通过CSS选择器，获取元素列表
document.querySelectorAll("css selector")

具体示例：
#到对应的输入框输入一个字，需要接合execute_script()方法来执行
"document.getElementById('kw').value=”selenium”


JS修改元素属性
web自动化主要是对页面元素进行操作，有时候无法定位或者找不到元素，我们可以通过JS进行修改元素属性，然后在进行通过JS定位
# 修改元素属性
document.getElementById("id").setAttribute("属性名","属性值")

# 删除属性
document.getElementById("id").removeAttribute("属性名")

# 修改属性值
document.getELementById("id").属性="属性值"

#css语法
document.querySelector("#radio >input.Mi").removeAttribute('disabled')

JavaScript 是通过JavaScript 返回值来定位元素，比xpath还繁琐，不推荐使用.

JavaScript(js)获取页面元素是通过js的返回值获取元素，有两种方式：DOM、JQuery

js定位元素的方法

1、DOM获取元素

HTML DOM 定义了访问和操作 HTML 文档的标准。每个页面都是一个DOM Tree 结果，如下图

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。我们通过JavaScript返回该节点就是我们的元素。

document.getElementById() 获取带有指定 ID 的元素
document.getElementsByClassName() 获取包含带有指定类名的所有元素的节点列表
document.getElementsByName() 获取指定Name的所有元素的节点列表
document.getElementsByTagName() 获取带有指定标签名称的所有元素的节点列表
注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效
示例：通过DOM的JavaScript脚本获取元素
js='return document.getElementById("query")' js='return document.getElementsByClassName("sec-input")[0]' js='return document.getElementsByName("query")[0]' js='return document.getElementsByTagName("input")[0]' js='return document.getElementById("sf").getElementsByTagName("input") ' #  id=sf的input子元素 element=driver.execute_script(js)  # 执行js获取元素
注意：由于getElements返回的为列表所以需要使用[0]指定为第1个元素，如果查找出对应元素存在多个可以指定第几个。

2、JQuery获取元素

JQuery获取元素也是通过返回值获取，比DOM的兼容性高。
常用语法格式如下：
return $("p:contains('包含的字符')")[0] 根据页面文本获取元素
return $(css定位)[0] css定位获取对象
return $x(xpath定位)[0] xpath定位获取对象

示例：
js = 'return $("input[name=w]+input")[0]' js = 'return $("form#sf input[type=text]")[0]' js = 'return $x("//input[@name=\'w\']/following-sibling::input")[0]' js='$("p:contains(\'搜狗搜索APP\')")[0]' element=driver.execute_script(js)  # 执行js获取元素

附件：JQuery选择器

来自于：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp