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()

说明：

通过多次执行滚动，可以将惯性滚动的距离逐渐减小。