25. 页面滚动与截图

本节目标：掌握页面滚动和截图功能，学完能控制页面滚动到指定位置，并对页面或元素进行截图保存。

元素滚动

滚动功能藏在元素的 scroll 属性中。可以滚动可滚动的容器元素，也可以让元素滚动到可见位置。

按像素滚动

from DrissionPage import Chromium

tab = Chromium().latest_tab
tab.get('https://www.baidu.com')

ele = tab.ele('tag:body')

# 向下滚动 200 像素
ele.scroll.down(200)
# 或者简写
ele.scroll(200)

# 向上滚动 100 像素
ele.scroll.up(100)

# 向右滚动 50 像素
ele.scroll.right(50)

# 向左滚动 50 像素
ele.scroll.left(50)

滚动到极端位置

# 滚动到顶部
ele.scroll.to_top()

# 滚动到底部
ele.scroll.to_bottom()

# 滚动到垂直中间
ele.scroll.to_half()

# 滚动到最右边
ele.scroll.to_rightmost()

# 滚动到最左边
ele.scroll.to_leftmost()

滚动到指定坐标

# 滚动到指定位置 (x, y)
ele.scroll.to_location(100, 300)

滚动使元素可见

# 滚动页面直到目标元素可见
target = tab.ele('#footer')
target.scroll.to_see()

# 尽量滚动到视口中央
target.scroll.to_center()

Note

和 scroll.to_center() 会滚动页面让目标元素进入视口。后者尽量把元素放到屏幕中央，适合需要精确操作的场景。

页面截图

基本截图

get_screenshot() 方法可以对整个页面截图，支持多种输出方式。

# 截取当前可视区域，保存到当前文件夹
tab.get_screenshot()

# 指定路径和文件名
tab.get_screenshot(path='tmp', name='pic.jpg')

# 整页截图（包含滚动区域）
tab.get_screenshot(path='tmp', name='full.jpg', full_page=True)

截图参数说明

# 参数优先级：as_bytes > as_base64 > path

# 保存到文件
tab.get_screenshot(path='images', name='screenshot.png', full_page=True)

# 返回图片字节
img_bytes = tab.get_screenshot(as_bytes='png')

# 返回 base64 字符串
img_base64 = tab.get_screenshot(as_base64='png')

# 指定截取范围（左上角和右下角坐标）
tab.get_screenshot(left_top=(0, 0), right_bottom=(500, 400))

支持的图片格式：jpg、jpeg、png、webp。

元素截图

可以对指定元素进行截图。

# 找到图片元素并截图
img = tab.ele('tag:img')
img.get_screenshot()

# 指定文件名
img.get_screenshot(name='element.png')

# 返回字节形式
bytes_data = img.get_screenshot(as_bytes='png')

# 截图前是否滚动到视口中央（默认 True）
img.get_screenshot(scroll_to_center=True)

元素范围超出视口时，需要 Chrome 90 以上版本内核支持才能完整截图。

页面录像

设置录制模式

录制模式有 5 种，通过 screencast.set_mode.xxx_mode() 设置。

# 持续录制页面，停止时生成没有声音的视频
tab.screencast.set_mode.video_mode()

# 页面有变化时才录制，停止时生成没有声音的视频
tab.screencast.set_mode.frugal_video_mode()

# 可生成有声音的视频，但需要手动启动
tab.screencast.set_mode.js_video_mode()

# 持续对页面进行截图
tab.screencast.set_mode.imgs_mode()

# 页面有变化时才保存页面图像
tab.screencast.set_mode.frugal_imgs_mode()

开始和停止录制

from DrissionPage import Chromium

tab = Chromium().latest_tab

# 设置视频存放路径
tab.screencast.set_save_path('video')

# 设置录制模式
tab.screencast.set_mode.video_mode()

# 开始录制
tab.screencast.start()

# 等待一段时间
tab.wait(3)

# 停止录制
video_path = tab.screencast.stop(video_name='my_video', suffix='mp4')
print(f'视频保存到: {video_path}')

录像注意事项

# 录制视频需要安装 opencv-python
# pip install opencv-python

# video_mode 和 frugal_video_mode 的保存路径必须是英文
tab.screencast.set_save_path('video_english')

# js_video_mode 需要用鼠标手动选择录制目标
# 录制时，保存路径和文件名必须是英文

Warning

和 frugal_video_mode 需要安装 opencv-python。录制前确保路径为英文不会出现乱码问题。

实用示例：长页面截图

from DrissionPage import Chromium

tab = Chromium().latest_tab
tab.get('https://example.com/long-page')

# 整页截图，保存完整内容
tab.get_screenshot(path='images', name='long_page.png', full_page=True)

实用示例：批量截图页面元素

# 截取页面中所有图片元素
images = tab.eles('tag:img')
for i, img in enumerate(images):
    img.get_screenshot(name=f'img_{i}.png')