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

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

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

一、案例

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

image-20230526111012415

二、解决方案

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)
  1. 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)

原文地址:https://www.cnblogs.com/CCX330/p/17434323.html