selenium 拓展 JavaScript操作元素对象

木头人

Python + C 法力无边

JavaScript操作元素对象可以使用DOM操作元素，如果应用有JQuery可以使用JQuery操作元素对象。

selenium运行JavaScript有两种形式，一种是接收JavaScript脚本语言，另一种是将WebElement传入JavaScript中执行脚本。如下：

driver.execute_script("window.open('https://www.qqcom')")
driver.execute_script('arguments[0].scrollIntoViewIfNeeded(true);',element)

1、打开新窗口

DOM操作：

window.open("https://www.qqcom")

2、滚动浏览器滚动条

DOM操作：

document.body.scrollWidth;    //网页正文全文宽，包括有滚动条时的未见区域
document.body.scrollHeight;   //网页正文全文高，包括有滚动条时的未见区域
document.documentElement.clientWidth;    //可见区域宽度，不有滚动条时的未见区域
document.documentElement.clientHeight;   //可见区域高度，不有滚动条时的未见区域
document.documentElement.scrollTop=100;  //设置或返回匹配元素相对滚动条顶部的偏移
document.documentElement.scrollLeft=100 ; //设置或返回匹配元素相对滚动条左侧的偏移
window.scrollTo(100,400);   //设计滚动条left=100，top=400
document.getElementsByClassName("name")[0].scrollIntoViewIfNeeded(true)  //滚动到name元素显示

JQuery操作：

JQueryelement.height() 设置或返回匹配元素的高度

JQueryelement.width() 设置或返回匹配元素的宽度

JQueryelement.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。

JQueryelement.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。

示例：

$(window).scrollTop(300);    //拖动页面距离顶部300像素
$(document).scrollTop(300)  
$("html,body").scrollTop(300);   
$(window).scrollTop(document.body.scrollHeight); //拖动到底部
$(document).scrollTop($(window).height());   //拖动到底部

3、拖动窗口内元素滚动条

DOM操作：

document.getElementsByClassName("scroll")[0].scrollTop=10000  
document.getElementsByClassName("scroll")[0].scrollLeft=10000

JQuery操作：

$("div.id").scrollTop(300);   
$("div.id").scrollLeft(300);

4、新增与修改元素属性

DOM操作：

改变属性

document.getElementById('query').value='selenium'    // 设置元素值，如果是输入框则输入内容
document.getElementsByClassName("sec-input")[0].disabled=false   // 取消置灰

使元素隐藏或可见

document.getElementById("query").style.display="none"  // 隐藏
document.getElementById("query").style.display="block"  // 可见

JQuery操作：

JQueryelement.attr() 设置或返回匹配元素的属性和值。

$("#query").attr('value','selenium')   //设置元素值，如果是输入框则输入内容
$("#query").attr('disabled',false)      //取消置灰
$("#query").attr('style','display: none;')   // 隐藏

$("#query").attr('style','display: block;') # 可见

5、删除元素属性

DOM操作：移除元素属性

document.getElementById("query").removeAttribute('readonly') // 移除'readonly'属性，是元素可输入
document.getElementById('query').value   // 获取value值

JQuery操作：移除元素属性

JQueryelement.removeAttr() 从所有匹配的元素中移除指定的属性。

$("#query").removeAttr('readonly')  // 移除'readonly'属性，是元素可输入

6、获取元素的内容

DOM操作：

document.getElementById("query").innerHTML     // 获取HTML内容
document.getElementsByClassName('top-nav')[0].innerText   // 获取文本内容
document.getElementsByClassName("sec-input")[0].attributes.属性    //获取元素属性

JQuery操作：

JQueryelement.html() 设置或返回匹配的元素集合中的 HTML 内容。

JQueryelement.val() 设置或返回匹配元素的value属性值

JQueryelement.text() 设置或返回匹配元素的内容。

$('.top-nav').html()  // 获取HTML
$('.top-nav').text()  // 获取text
$('#query').val()  //获取val值

7、操作页面元素

DOM操作：

document.getElementById('stb').click()   // 单击元素

JQuery操作：

$('#stb').click()

8、传入WebElement元素对象js操作

js=’arguments[0].click()’
driver.execute_script(js,element)

注意：execute_script接收两个参数arguments[0] 表示元素，element为需要传入的元素

示例：搜狗浏览器输入值

element=driver.find_element_by_id('query')
driver.execute_script('arguments[0].value="selenium"',element)

示例：符文框输入带html格式的值

driver.get('http://ueditor.baidu.com/website/onlinedemo.html')  # 打开网页