Selenium2學習（十三）-- JS處理滾動條

前言

    selenium並不是萬能的，有時候頁面上操作無法實現的，這時候就需要借助JS來完成了。

常見場景：

當頁面上的元素超過一屏后，想操作屏幕下方的元素，是不能直接定位到，會報元素不可見的。

這時候需要借助滾動條來拖動屏幕，使被操作的元素顯示在當前的屏幕上。

滾動條是無法直接用定位工具來定位的。selenium里面也沒有直接的方法去控制滾動條，

這時候只能借助J了，還好selenium提供了一個操作js的方法:

execute_script()，可以直接執行js的腳本。

 

一、JavaScript簡介

1.JavaScript是世界上最流行的腳本語言，因為你在電腦、手機、平板上瀏覽的所有的網頁，

以及無數基於HTML5的手機App，交互邏輯都是由JavaScript驅動的。簡單地說，

JavaScript是一種運行在瀏覽器中的解釋型的編程語言。

那么問題來了，為什么我們要學JavaScript？
2.有些特殊的操作selenium2+python無法直接完成的，JS剛好是這方面的強項，所以算是一個很

好的補充。對js不太熟悉的，可以網上找下教程，簡單了解些即可。

http://www.w3school.com.cn/js/index.asp4

 

二、控制滾動條高度

1.滾動條回到頂部：

js="var q=document.getElementById('id').scrollTop=0"
driver.execute_script(js） 
2.滾動條拉到底部

js="var q=document.documentElement.scrollTop=10000"
driver.execute_script(js)

3.這里可以修改scrollTop 的值，來定位右側滾動條的位置，0是最上面，10000是最底部。

版權所有，微信公眾號:yoyoketang

三、橫向滾動條
1.有時候瀏覽器頁面需要左右滾動（一般屏幕最大化后，左右滾動的情況已經很少見了）。
2.通過左邊控制橫向和縱向滾動條scrollTo(x, y）js = "window.scrollTo(100,400);"

driver.execute_script(js)

3.第一個參數x是橫向距離，第二個參數y是縱向距離

 

 

 

四、Chrome瀏覽器

1.以上方法在Firefox上是可以的，但是用Chrome瀏覽器，發現不管用。
谷歌瀏覽器就是這么任性，不聽話，於是用以下方法解決谷歌瀏覽器滾動條的問題。

2.Chrome瀏覽器解決辦法：

js = "var q=document.body.scrollTop=0"
driver.execute_script(js)

 

五、元素聚焦
1.雖然用上面的方法可以解決拖動滾動條的位置問題，但是有時候無法確定我需要操作的元素

在什么位置，有可能每次打開的頁面不一樣，元素所在的位置也不一樣，怎么辦呢？

2.這個時候我們可以先讓頁面直接跳到元素出現的位置，然后就可以操作了。同樣需要借助JS去實現。 
3.元素聚焦：

target = driver.find_element_by_xxxx()
driver.execute_script("arguments[0].scrollIntoView();", target)

 

六、獲取瀏覽器名稱:driver.name

1.為了解決不同瀏覽器操作方法不一樣的問題，可以寫個函數去做兼容。

2.先用driver.name獲取瀏覽器名稱，然后用if語句做個判斷

 

七、兼容性
1.兼容谷歌和firefox/IE

 

八、scrollTo函數

樓下有個小伙伴說這個scrollTo函數不存在兼容性問題，小編借花獻佛了。

--scrollHeight 獲取對象的滾動高度。 
--scrollLeft 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離。 
--scrollTop 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離。 
--scrollWidth 獲取對象的滾動寬度。

 

scrollTo函數不存在兼容性問題，直接用這個函數就可以了

#滾動到底部
js = "window.scrollTo(0,document.body.scrollHeight)" 
driver.execute_script(js)

#滾動到頂部
js = "window.scrollTo(0,0)" 
driver.execute_script(js)

九、參考代碼如下：
# coding:utf-8
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("https://www.baidu.com")
print driver.name
## 回到頂部
#def scroll_top():
#     if driver.name == "chrome":
#        js = "var q=document.body.scrollTop=0"
#     else:
#         js = "var q=document.documentElement.scrollTop=0"
#     return driver.execute_script(js)
# 拉到底部
#def scroll_foot():
#    if driver.name == "chrome":
#         js = "var q=document.body.scrollTop=10000"
#     else:
#         js = "var q=document.documentElement.scrollTop=10000"
#     return driver.execute_script(js)

#滾動到底部
js = "window.scrollTo(0,document.body.scrollHeight)" 
driver.execute_script(js)

#滾動到頂部
js = "window.scrollTo(0,0)" 
driver.execute_script(js)

# 聚焦元素
target = driver.find_element_by_xxxx()
driver.execute_script("arguments[0].scrollIntoView();", target)