Python UI自动化-Selenium【JS操作】

---

前言

在selenium定位元素操作中，如果有些元素定位不到，或者页面元素的属性有需要修改，可以通过js操作来对html页面元素获取、元素属性获取、元素的属性进行修改

---

一、JS执行方式

selenium当中执行js代码有两种方式：
1、driver.execute_script(js代码（语句用；隔开），传入js代码当中的值)

#页面滚动到可滑动最大高度
driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")

2、使用selenium找到的元素对象，可以传递给js代码
js - argument 对象：js代码中使用arguments来接收参数，可以理解是个列表，通过下标取值，从0开始，根据参数的位置

#js代码中使用arguments来接收参数，可以理解是个列表，通过下标取值，从0开始，根据参数的位置
ele_input = driver.find_element(By.ID,"kw")
ele_button = driver.find_element(By.ID,"su")

js_code = 'arguments[0].value="";' \
          'arguments[1].click()'
driver.execute_script(js_code,ele_input,ele_button)

---

二、常用方法举例

1、js操作滚动条

1. 设置滚动条位置,距离顶部xxx像素

driver.execute_script("document.documenElement.scrollTop=xx")

2. 滑动到指定坐标位置

• 1、X轴:网页左上角，从左到右越来越大
• 2、Y轴:网页左上角，从上到下越来越大

#滑动到页面顶部
driver.execute_script("window.scrollTo(0,0)")

3. 基于当前位置滑动指定像素距离

driver.execute_script("window.scrollBy(0,0)")

4. 获取滚动条可滑动最大宽度

driver.execute_script("document.body.scrollWidth")

5. 获取滚动条可滑动最大高度

driver.execute_script("document.body.scrollHeight")

6. 获取当前滚动距离最上方的距离(垂直方向)

driver.execute_script("document.documentElement.scrollTop")

7. 获取当前滚动距离最左侧的距离(水平方向)

driver.execute_script("document.documentElement.scrollLeft")

2、页面需要手动将元素滚到可见区域

两种方式

1. 使用webelement自带的滚动到可见区域的属性

ele.location_once_scrolled_into_view #元素与窗口顶端对齐

2. js的方法
   arguments[0].scrollIntoView(true) #元素与窗口顶端对齐
   arguments[0].scrollIntoView(false) #元素与窗口底端对齐

#与窗口顶端对齐,只要元素在页面就可以用,不管元素所属哪个滚动条
driver.execute_script("arguments[0].scrollIntoView(true)",elem)
#与窗口底部对齐，只要元素在页面就可以用，不管元素所属哪个滚动条
driver.execute_script("arguments[0].scrollIntoView(false)",elem)

参数说明
scrollIntoView是一个与页面(容器)滚动相关的API
element.scrollIntoView() 参数默认为true
参数为true:调用该函数，页面发送滚动，使element的顶部与视图(容器)顶部对齐
参数为false:使element的底部与视图(容器)底部对齐

3、js点击

driver.execute_script("arguments[0].click();",element)

4、js修改value属性值

driver.execute_script("arguments[0].value = arguments[1].value",ele1,value)

---

扩展

如果鼠标从页面上某元素移开，弹出的元素内容就整个消失了，无法查看其对应的HTML来定位元素，可使用f12-控制台中冻结弹窗

//表示在 5000毫秒后，执行debugger命令。执行该命令会浏览器会进入debug状态。
//debug状态有个特性，界面被冻住，不管我们怎么点击界面都不会触发事件。
setTimeout(function(){debugger},5000)

注意

接收js执行之后的返回值，js代码中要写return

driver.execute_script("return document.getElementById('Input').value")