Selenium selenium 滑动屏幕常用 js 语句

lyyyyyyy · 2021年04月23日 · 最后由 lyyyyyyy 回复于 2021年05月15日 · 4428 次阅读

UI 自动化中经常会用到屏幕滑动,selenium 提供的接口很少。记录一下常用的 js 语句以免忘记

  • 从 (0,0) 滑动 x,y 距离
window.scroll(x,y)
  • 从当前位置滑动 x,y 距离
window.scrollBy(x,y)
  • 滑动到底部位置
window.scroll(0, document.documentElement.scrollHeight)
  • 滑动到顶部位置
window.scroll(0, 0)
  • 滑动元素至顶部对齐,可以使用 selenium 自带的,也可以用 js
element.location_once_scrolled_into_view
或者
driver.execute_script('arguments[0].scrollIntoView({block: "start"})', element)
或者
driver.execute_script('arguments[0].scrollIntoView(true)', element)
  • 滑动元素至屏幕中间
driver.execute_script('arguments[0].scrollIntoView({block: "center"})', element)
  • 滑动元素至屏幕底部对齐
driver.execute_script('arguments[0].scrollIntoView({block: "end"})', element)
或者
driver.execute_script('arguments[0].scrollIntoView(flase)', element)
  • 缩放页面
js = "document.body.style.zoom='60%'"

封装一下便于调用

import time

from selenium import webdriver
import os

from selenium.webdriver.chrome.options import Options
class Scroll(object):
    """
    browser = driver
    """
    browser: object = None

    @property
    def driver(self):
        return self.__class__.browser

    @driver.setter
    def driver(self, driver):
        self.__class__.browser = driver

    @classmethod
    def scroll(cls, x, y):
        """
        移动x,y距离(以 0,0)为坐标
        :param x:
        :param y:
        :return:
        """
        script = f"window.scroll({x},{y})"
        cls.browser.execute_script(script)

    @classmethod
    def scroll_to_bottom(cls):
        """
        移动到底部
        :return:
        """
        full_screen_height = "document.documentElement.scrollHeight"
        script = f"window.scroll(0, {full_screen_height})"
        cls.browser.execute_script(script)

    @classmethod
    def scroll_to_top(cls):
        """
        回到顶部
        :return:
        """
        script = "window.scroll(0, 0)"
        cls.browser.execute_script(script)

    @staticmethod
    def scroll_to_element_top(element):
        """
        滑动至顶部对齐
        :param element:
        :return:
        """
        var = element.location_once_scrolled_into_view

    @classmethod
    def scroll_to_element_center(cls, element):
        """
        滑动至中间对齐
        :param element:
        :return:
        """
        cls.browser.execute_script('arguments[0].scrollIntoView({block: "center"})', element)

    @classmethod
    def scroll_to_element_bottom(cls, element):
        """
        滑动至底部对齐
        :return:
        """
        cls.browser.execute_script('arguments[0].scrollIntoView(false)', element)



chromedriver = os.getenv("CHROME_DRIVER")
options = Options()
options.add_argument("--start-maximized")

driver = webdriver.Chrome(executable_path=chromedriver, options=options)
driver.get("file:///C:/demo.html")

element = driver.find_element_by_id("demo")
Scroll.browser = driver

Scroll.scroll_until_element_displayed(element)
time.sleep(3)
Scroll.scroll_to_element_top(element)
time.sleep(3)
Scroll.scroll_to_element_center(element)
time.sleep(3)
Scroll.scroll_to_element_bottom(element)
time.sleep(3)
driver.quit()

共收到 9 条回复 时间 点赞

欢迎大佬们补充常用的 js 语句

window.scroll(x,y)

window.scrollBy(x,y)
这两个在 chorome 不生效不知道为啥

我试过的都是可以的
或者你试一下
document.documentElement.scroll(0,100)

selenium 下拉框怎么定位呢?控件不是 select 的

ZYH 回复

要看具体页面才行

1、document.documentElement.scrollTop = 280 直接赋值
2、document.getElementById('scrp').scrollIntoView() 直接定位到元素的位置

  • 有时候我们会截图,但是截图里的重点内容其他人可能看的不太明确,所以想要把它高亮或者用红线圈出来,此时也可以使用 js 来实现。通过 xpath 寻找并使元素用红线圈出(改变元素的 border-color)
def red_border(xpath):
      js = f"document.evaluate(" + "\"" + xpath + "\"" + ", document).iterateNext().style='border-color:red'"
      driver.execute_script(js)
read_border("//*[@id='kw']")

效果如下图

  • 通过 id(name,class 同理)
def yellow_background_by_id(locator):
        js = f"document.getElementById('{locator}').style='background:yellow'"
        driver.execute_script(js)
yellow_background_by_id('kw')

效果图如下

lyyyyyyy 回复

为什么会出现 webdriverexception: Message: Method is not implemented 错误?

第一个还是第二个

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册