Selenium系列教程 - 调用JavaScript

1. JavaScript的使用(原生js和jq方式)

a. 获取元素的属性

//原生js
.getAttribute("属性")
//jquery
.attr("属性")
------------------------------------------------------------
/*jq获取属性示例代码*/
    var temp = $('.test1').attr('class');
/*js获取属性示例代码*/
    var temp = document.getElementById('test1').getAttribute('data');

b. 设置元素的属性

//原生js
.setAttribute("属性","值")
//jquery
.attr("属性","值")
------------------------------------------------------------
/*jq设置属性示例代码*/
    var temp2= $('.test2').attr('class','test-spe');
/*js设置属性示例代码*/
    var temp2= document.getElementById('test2').setAttribute('data','self-name-2');

c. 删除元素的属性

//原生js
.removeAttribute("属性")
//jquery
.removeAttr("属性")
------------------------------------------------------------
/*jq删除属性示例代码*/
      var temp = $('.test1').removeAttr('data');
/*js删除属性示例代码*/
      var temp = document.getElementById('test1').removeAttribute('data');

d. 点击元素

//原生js、jquery
click()
------------------------------------------------------------
/*jq点击元素示例代码*/
      $('.test1').click();
/*js点击元素示例代码*/
      document.getElementById('test1').click();

2. Selenium如何执行JavaScript

    在selenium中，为我们提供了execute_script()方法，可在浏览器中执行一段JavaScript代码。调用如下：

driver.execute_script(script, *args)

第一种方法：

    直接通过执行JavaScript（如后面的 js1、js2）。

第二种方法：

    可以通过selenium定位元素来执行JavaScript的脚本（如后面的js3、js4）。

• 通过selenium定位百度输入框

search_box = driver.find_element_by_id("kw")

• 把search_box传入JavaScript语句

js4 = "arguments[0].removeAttribute(arguments[1])"
driver.execute_script(js4, search_box, "style")

注：arguments 指的是 execute_script() 方法中 js 代码后面的所有参数，arguments[0] 表示第一个参数，argument[1] 表示第二个参数。

---

实例代码：（百度搜索框增加红色边框）

from selenium import webdriver
import time

driver = webdriver.Chrome()
try:
    driver.maximize_window()
    driver.get("http://www.baidu.com/")
    driver.implicitly_wait(10)
    # 增加红色边框
    js1 = "document.getElementById('kw').setAttribute('style','border:3px solid red');"
    driver.execute_script(js1)  # 调用js方法
    time.sleep(2)
    # 去掉红色边框
    js2 = "document.getElementById('kw').removeAttribute('style');"
    driver.execute_script(js2)
    time.sleep(2)
    # 增加红色边框
    search_box = driver.find_element_by_id("kw")
    js3 = "arguments[0].setAttribute('style','border:3px solid red')"
    driver.execute_script(js3, search_box)
    time.sleep(2)
    # 去掉红色边框
    js4 = "arguments[0].removeAttribute(arguments[1])"
    driver.execute_script(js4, search_box, "style")
    time.sleep(2)

finally:
    driver.quit()

3. 应用场景

a. 日期控件

    在写自动化脚本时会发现时间日期控件各种各样，如果一个个想着怎么去选择，可能你会疯掉！
    那么该怎么办呢？
    其实很简单，我们可以把它当成一个普通的input框来处理！但是，很多此类型的input框都是禁止手动输入的，这时候我们就可以用js把禁止输入的readonly属性干掉就好了。

# 原生js，移除属性
js = "document.getElementById('train_date').removeAttribute('readonly')"
# jQuery，移除属性
js = "$('input[id=train_date]').removeAttr('readonly')"
# jQuery，设置为false
js = "$('input[id=train_date]').attr('readonly',false)"
# jQuery，设置为null,同上
js = "$('input[id=train_date]').attr('readonly',null)"

b. 滚动视图

    有些时候我们需要滚动视图，比如我们需要为界面进行截屏操作。页面如果太长的话，我们的截屏默认截取的为可视部分，未显示的部分就会截不到。另外，在注册时法律条文的阅读，判断用户是否阅读完成的标准是：滚动条是否拉到最下方。这时，我们同样可以执行JavasScript的方法来实现。

# 将页面滚动条拖到底部
js = "document.documentElement.scrollTop=100000"
# 将页面滚动条拖到顶部
js = "document.documentElement.scrollTop=0"
# jquery
js = "$('.card-history>.card-body').scrollTop($('body')[0].scrollHeight)"
js = "$('.card-history>.card-body').scrollTop(0)"

c. 输入文本

    此方法主要应对输入框自动补全以及 readonly 属性的 input（send_keys 不稳定）；或者向副文本框输入内容（老版本的副文本不能用send_keys发送文本）。

# 原生js
js = "document.getElementById('kw').value='hwijew'"
# jQuery
js = "$('#kw').val('hwijew')"

---