Python+Selenium UI自动化 - 调用JS代码

当webdriver遇到无法完成的操作时候，这个时候可以使用javascript来完成，webdriver提供了execute_script()接口来调用js代码。

执行js有两种场景：

1、在页面上直接执行js

2、在某个已经定位的元素上执行js

百度新闻网页举例（js代码与浏览器有兼容问题）

1、向下滚动，举例内容为百度新闻网页滚动

语法：document.documentElement.scrollTop=10000

①document.body:网页正文

②scrollTop=10000：滚动一万像素 浏览器滚动条下滑操作

import time
from selenium import webdriver

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')#打开百度新闻页面
driver.maximize_window()

js_str2 = 'document.documentElement.scrollTop=10000'#document.body:网页正文 scrollTop=10000：滚动一万像素 浏览器滚动条下滑操作，js代码与浏览器有兼容问题
driver.execute_script(js_str2)

百度新闻为瀑布流页面，若是想一直滚动，则可写个for循环实现

import time
from selenium import webdriver

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')#打开百度新闻页面
driver.maximize_window()

js_str2 = 'document.documentElement.scrollTop=10000'
for i in range(6):#6为滚动的次数
    time.sleep(2)
    driver.execute_script(js_str2)

2、上下滚动，举例内容为百度新闻网页滚动

import time
from selenium import webdriver

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')#打开百度新闻页面
driver.maximize_window()

js_str3 = 'document.body.scrollTop=%d'
for i in range(10):
    time.sleep(2)
    if(i%2==0):
        driver.execute_script(js_str3%10000)#向上正数
    else:
        driver.execute_script(js_str3%-10000)#向下负数

3、给属性加边框，举例内容为给百度新闻搜索框加红色边框

语法：driver.execute_script("arguments[0].style.border='5px solid red'",input_element)

①arguments[0]：代表元素e style.border：设置边框样式

②5px solid red：五个像素的红色实线

③input_element：选中的元素

若想要修改更多属性，可参考转载文章：UI自动化（2）---CSS基础知识 - MaggieTang - 博客园

import time
from selenium import webdriver
from selenium.webdriver.common.by import By

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')
driver.maximize_window()
time.sleep(3)

input_element = driver.find_element(By.CSS_SELECTOR,'span#s_ipt_wr input.word')#定位到百度新闻页面的输入框
driver.execute_script("arguments[0].style.border='5px solid red'",input_element)#arguments[0]:代表元素e style.border：设置边框样式，5px solid red 五个像素的红色实线

4、移除属性，举例内容为去除“百度一下”按钮的文案（常用场景为定位时间控件时，如控制仅能选择时，改成可以输入）

语法：driver.execute_script('arguments[0].removeAttribute("value"),remove_element)

①remove_element为需要被移除的元素定位值

②value为需要被去除的属性名

import time
from selenium import webdriver
from selenium.webdriver.common.by import By

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')
driver.maximize_window()
time.sleep(3)

remove_element = driver.find_element(By.ID,'s_btn_wr')#定位到百度一下按钮
driver.execute_script('arguments[0].removeAttribute("value"),remove_element)#去除百度一下文案

 5、修改属性，举例为将“百度一下”文案改为“我是丸子”

语法：driver.execute_script('arguments[0].setAttribute("value","我是丸子")',update_element)

import time
from selenium import webdriver
from selenium.webdriver.common.by import By

driver  = webdriver.Chrome()
driver.get('http://news.baidu.com/')
driver.maximize_window()
time.sleep(3)

update_element = driver.find_element(By.ID,'s_btn_wr')#定位到百度一下按钮
driver.execute_script('arguments[0].setAttribute("value","我是丸子")',update_element)#将百度一下文案替换为我是丸子