如何将元素显示在可视区域中
如何确保元素在可视区域显示: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操作元素,定位元素滚动到可视区域
- 与窗口顶端对齐,只要元素在页面就可以用,不管元素所属哪个滚动条
driver.execute_script("arguments[0].scrollIntoView(true)",elem)
2. 与窗口底部对齐,只要元素在页面就可以用,不管元素所属哪个滚动条
driver.execute_script("arguments[0].scrollIntoView(false)",elem)
- 代码优化
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)
-
js中元素滚动相关知识
-
js设置滚动条位置 :
driver.execute_script("document.documentElement.scrollTop=xx")
-
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:获取当前滚动距离最左侧的距离(水平方向)
-
-
上下滚动
-
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")
-
-
左右滚动
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)")
-
-
其他操作
-
执行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)
-
-
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」