selenium自動化測試——滾動到指定元素

一、滾動的作用

滾動是指頁面自動或手動向上或向下移動，從而顯示隱藏在瀏覽器視窗外的內容。一些網頁會將部分內容隱藏，需要滾動才能看到；有時，為了更好的用戶體驗，需要實現頁面的滾動，例如：滾動到頂部或底部實現加載更多。

二、selenium中滾動方法介紹

selenium支持三種滾動方式：

1、使用Javascript執行滾動

from selenium.webdriver.common.action_chains import AcitonChains

# 執行Javascript，滾動到目標元素
target_ele = driver.find_element_by_css_selector("#target-element")
driver.execute_script("arguments[0].scrollIntoView();", target_ele)

說明：

①find_element_by_css_selector：查找目標元素；

②execute_script：執行JavaScript腳本，滾動到目標元素。

2、使用Keys.ARROW_DOWN鍵盤按鍵

from selenium.webdriver.common.keys import Keys

# 執行鍵盤按鍵，向下滾動
target_ele = driver.find_element_by_css_selector("#target-element")
target_ele.send_keys(Keys.ARROW_DOWN)

說明：

①find_element_by_css_selector：查找目標元素；

②send_keys(Keys.ARROW_DOWN)：執行向下滾動。

3、使用ActionChains實現鼠標滾輪滾動

from selenium.webdriver.common.action_chains import ActionChains

# 執行鼠標滾輪滾動，滾動到目標元素
target_ele = driver.find_element_by_css_selector("#target-element")
ActionChains(driver).move_to_element(target_ele).perform()

說明：

①find_element_by_css_selector：查找目標元素；

②ActionChains(driver).move_to_element(target_ele).perform()：鼠標移動到目標元素，並向下滾動。

三、滾動到指定元素為中心

有時候，需要滾動到指定元素為中心點，使得該元素在瀏覽器視窗的中心，代碼實現如下：

from selenium.webdriver.common.action_chains import ActionChains

# 執行Javascript，滾動到目標元素
target_ele = driver.find_element_by_css_selector("#target-element")
driver.execute_script("arguments[0].scrollIntoView();", target_ele)

# 獲取當前瀏覽器窗口大小
window_size = driver.get_window_size()

# 計算目標元素在瀏覽器視窗中心點的坐標
x = int(window_size["width"] / 2)
y = int(target_ele.location["y"] + target_ele.size["height"] / 2)

# 執行鼠標移動到目標元素並執行滾輪滾動
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -50).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -70).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -90).perform()

說明：

①find_element_by_css_selector：查找目標元素；

②execute_script：執行JavaScript腳本，滾動到目標元素；

③get_window_size：獲取瀏覽器窗口大小；

④location、size：獲取元素的位置和大小；

⑤ActionChains(driver).move_to_element_with_offset(target_ele, x, y)：鼠標移動到指定元素並執行滾輪。

四、滾動的注意事項

在使用滾動的時候，需要注意以下幾點：

1、等待元素加載完成再執行滾動

有時候，需要等待元素加載完成之後，滾動到目標元素，避免出現找不到元素的情況。

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 等待目標元素加載
target_ele = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CSS_SELECTOR, "#target-element"))
)

# 執行Javascript，滾動到目標元素
driver.execute_script("arguments[0].scrollIntoView();", target_ele)

說明：

①presence_of_element_located：等待元素出現；

②until：等待時間是10秒鐘。

2、滾動時避免遮擋元素

有時候，因為頁面布局等原因，可能會出現目標元素被其它元素遮擋的情況，需要通過設置偏移量來避免。

from selenium.webdriver.common.action_chains import ActionChains

# 執行Javascript，滾動到目標元素
target_ele = driver.find_element_by_css_selector("#target-element")
driver.execute_script("arguments[0].scrollIntoView();", target_ele)

# 計算目標元素在瀏覽器視窗中心點的坐標
window_size = driver.get_window_size()
x = int(window_size["width"] / 2)
y = int(target_ele.location["y"] + target_ele.size["height"] / 2)

# 執行鼠標移動到目標元素並執行滾輪滾動
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -50).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -70).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -90).perform()

說明：

在滾動前，先通過JavaScript將目標元素滾動到瀏覽器視窗的中心，然後通過ActionChains設置偏移量滾動頁面。

3、多次滾動以避免慣性滾動

由於JavaScript滾動和鼠標滾動都是以一定的速度滾動的，可能會出現慣性滾動的情況，需要通過多次滾動以避免。

from selenium.webdriver.common.action_chains import ActionChains

# 執行Javascript，滾動到目標元素
target_ele = driver.find_element_by_css_selector("#target-element")
driver.execute_script("arguments[0].scrollIntoView();", target_ele)

# 獲取當前瀏覽器窗口大小
window_size = driver.get_window_size()

# 計算目標元素在瀏覽器視窗中心點的坐標
x = int(window_size["width"] / 2)
y = int(target_ele.location["y"] + target_ele.size["height"] / 2)

# 執行鼠標移動到目標元素並執行滾輪滾動
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -50).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -70).perform()
ActionChains(driver).move_to_element_with_offset(target_ele, 0, -90).perform()

說明：

通過多次執行滾動，可以將慣性滾動的距離逐漸減小。