如何将元素显示在可视区域中

如何确保元素在可视区域显示：Python实现元素可视化技巧

在Web自动化测试中，确保元素在可视区域显示是非常重要的。当元素不在可视区域内时，可能会导致无法进行操作或获取准确的结果。本篇技术博客将介绍如何使用Python和Selenium库来确保元素在可视区域显示，以及一些实用的技巧。

一、案例

比如使用百度搜索”python“时，定位"相关搜索"，想将它显示在可视区域中

二、解决方案

1. 使用元素本身方法，将元素显示到可视区域:element.location_once_scrolled_into_view

from selenium.webdriver.common.keys import Keys

from selenium import webdriver
dr = webdriver.Chrome()
dr.get("https://www.baidu.com")
dr.implicitly_wait(5)
dr.find_element_by_xpath('//input[@id="kw"]').send_keys("柠檬班",Keys.ENTER)
ele = dr.find_element_by_xpath('//div[contains(text(),"相关搜索")]')

#通过webEmement方法实现
ele.location_once_scrolled_into_view

2.通过js操作元素，定位元素滚动到可视区域

1. 与窗口顶端对齐,只要元素在页面就可以用,不管元素所属哪个滚动条

​ driver.execute_script("arguments[0].scrollIntoView(true)",elem)

​ 2. 与窗口底部对齐,只要元素在页面就可以用,不管元素所属哪个滚动条

​ driver.execute_script("arguments[0].scrollIntoView(false)",elem)

1. 代码优化

from selenium.webdriver.common.keys import Keys
import time
from selenium import webdriver
dr = webdriver.Chrome()
dr.get("https://www.baidu.com")
dr.implicitly_wait(5)
dr.find_element_by_xpath('//input[@id="kw"]').send_keys("柠檬班",Keys.ENTER)
ele = dr.find_element_by_xpath('//div[contains(text(),"相关搜索")]')

time.sleep(3)
#通过js实现

# dr.execute_script("arguments[0].scrollIntoView(true)",ele)
dr.execute_script("arguments[0].scrollIntoView(false)",ele)

2. js中元素滚动相关知识

   1. js设置滚动条位置 :driver.execute_script("document.documentElement.scrollTop=xx")

   2. js的window.scrollTo()方法

      • X轴：网页左上角，从左到右越来越大

      • Y轴：网页左上角，从上到下越来越大

      • window.scrollTo(0,0)：滑动到指定坐标位置

      • window.scrollBy(0,0)：基于当前位置滑动指定像素距离

      • document.body.scrollWidth：获取滚动条可滑动最大宽度

      • document.body.scrollHeight：获取滚动条可滑动最大高度

      • document.documentElement.scrollTop：获取当前滚动距离最上方的距离(垂直方向)

      • document.documentElement.scrollLeft：获取当前滚动距离最左侧的距离(水平方向)

   3. 上下滚动

      • driver.execute_script("window.scrollTo(x轴,y轴)")

      • driver.execute_script("window.scrollTo(0,10000)")

      • driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")

      • driver.execute_script("document.documentElement.scrollTop=0")

   4. 左右滚动

      x轴滑动100像素，y轴不变

      • driver.execute_script("window.scrollTo(100,0)")

      • driver.execute_script("document.documentElement.scrollLeft=100")

      • driver.execute_script("window.scrollTo(0,document.body.scrollWidth)")

   5. 其他操作

      • 执行js获取value属性值（text值获取不到的时候）【重点】

        attend_num = driver.execute_script('return arguments[0].value;',ele)

      • js修改value属性值: driver.execute_script("arguments[0].value=arguments[1]",ele1,value)

      • 鼠标聚焦到element元素上:driver.execute_script("arguments[0].focus();", element)