使用Python在selenium中实现动态截图

前言

在做自动化中，有些页面去截图时，可能截图的结果仅仅是最后的结果，而中间的一些变化步骤，是无法关注到的，这就给定位问题造成了麻烦。因此有时进行动态截图就是有必要的。

分析

那么如何实现动态截图的。经过了解，很多方法就是，逐帧截图图片，每一帧有持续时长，然后把这些图片合成为一张，这样就形成了一个动态图片。

实现

我们用一个函数来实现这个操作，包括以下参数：

url：需要截取的目标网页

output_path：输出文件路径

element_selector：定位需要截图的区域（为 None 时截图整个页面）

duration：截图总时长

frame_interval：每帧截取间隔时长

那么最终结果就是：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from PIL import Image, ImageSequence
import time
import os


def capture_dynamic_gif(url, output_path, element_selector=None, duration=5, frame_interval=0.2):
    """
    动态截图一定时间内的变化，并生成 GIF 图像
    :param url: 目标网页 URL
    :param output_path: GIF 文件保存路径
    :param element_selector: CSS 选择器，定位需要截图的区域（为 None 时截图整个页面）
    :param duration: 总截图时间（秒）
    :param frame_interval: 截图间隔时间（秒）
    """
    # ChromeDriver 路径
    webdriver_path = r"C:\Program Files\Google\Chrome\Application\chromedriver.exe"  # 替换为你的 ChromeDriver 路径

    # 配置 Chrome 浏览器选项
    chrome_options = Options()
    # chrome_options.add_argument("--headless")  # 无头模式运行
    chrome_options.add_argument("--disable-gpu")

    # 启动 WebDriver
    service = Service(webdriver_path)
    driver = webdriver.Chrome(service=service, options=chrome_options)

    # 保存截图的临时文件夹
    temp_dir = "picture"
    os.makedirs(temp_dir, exist_ok=True)

    frames = []  # 用于保存所有截图的帧

    try:
        # 加载目标网页
        driver.get(url)
        driver.maximize_window()
        time.sleep(5)  # 等待页面加载
        start_time = time.time()

        while time.time() - start_time < duration:
            # 截取整个页面或特定元素
            if element_selector is None:
                screenshot_path = os.path.join(temp_dir, f"screenshot_{int(time.time() * 1000)}.png")
                driver.save_screenshot(screenshot_path)
                frames.append(Image.open(screenshot_path))
            else:
                element = driver.find_element("css selector", element_selector)

                # 截取整个页面的截图
                driver.save_screenshot("temp_full_page.png")

                # 获取元素的位置和大小
                location = element.location
                size = element.size

                # 使用 Pillow 裁剪特定区域
                x = location['x']
                y = location['y']
                width = location['x'] + size['width']
                height = location['y'] + size['height']

                # 打开保存的全页面截图并裁剪
                with Image.open("temp_full_page.png") as img:
                    cropped_image = img.crop((x, y, width, height))
                    screenshot_path = os.path.join(temp_dir, f"screenshot_{int(time.time() * 1000)}.png")
                    cropped_image.save(screenshot_path)
                    frames.append(cropped_image)

            print(f"截取了一帧: {screenshot_path}")
            time.sleep(frame_interval)  # 等待下一个截图时机

        # 生成 GIF 动态图片
        if frames:
            frames[0].save(
                output_path, save_all=True, append_images=frames[1:], optimize=False, duration=int(frame_interval * 1000), loop=0
            )
            print(f"GIF 保存成功：{output_path}")
        else:
            print("未捕获到任何帧，无法生成 GIF")

    except Exception as e:
        print("截图失败:", e)

    finally:
        # 清理临时文件
        driver.quit()
        for f in os.listdir(temp_dir):
            os.remove(os.path.join(temp_dir, f))
        os.rmdir(temp_dir)


# 示例用法
if __name__ == "__main__":
    # 截取整个页面变化生成 GIF
    # capture_dynamic_gif("https://www.ihuiwa.com/workspace/ai-video/custom-action?huiwaInviteCode=EMRCAL", "dynamic_screenshot.gif", duration=10, frame_interval=0.1)

    # 截取页面中特定元素变化生成 GIF
    capture_dynamic_gif("https://www.ihuiwa.com/workspace/ai-video/custom-action?huiwaInviteCode=EMRCAL", "dynamic_element_screenshot.gif", element_selector=".scroll-content .ant-result-icon", duration=5, frame_interval=0.3)