Selenium WebDriver显示鼠标光标及无头执行录屏技术问询

一、在Selenium控制的浏览器中显示光标（支持Chromium及多浏览器） #

Chromium/Chrome 方案 #

Chromium自动化模式默认隐藏系统光标，可通过两种方式恢复显示：

1. 启动参数禁用自动化检测
   添加--disable-blink-features=AutomationControlled参数，关闭浏览器的自动化标识，同时恢复系统光标：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument("--disable-blink-features=AutomationControlled")
driver = webdriver.Chrome(options=chrome_options)

2. 注入CSS自定义跟随光标
   如果不想关闭自动化检测，可通过JS注入全局样式，生成自定义光标跟随鼠标移动，方便定位：

# 初始化driver后执行该脚本
driver.execute_script("""
// 全局显示十字光标
document.body.style.cursor = 'crosshair';
// 鼠标移动时生成红色圆点标记
document.addEventListener('mousemove', function(e) {
  const cursorDot = document.createElement('div');
  cursorDot.style.cssText = `
    position: fixed;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,0,0,0.8);
    pointer-events: none;
    z-index: 999999;
    left: ${e.clientX - 8}px;
    top: ${e.clientY - 8}px;
  `;
  document.body.appendChild(cursorDot);
  setTimeout(() => cursorDot.remove(), 80);
});
""")

其他浏览器适配 #

• Firefox：可尝试添加--disable-blink-features=AutomationControlled启动参数，或使用上述相同的CSS注入方案。
• Edge：与Chromium完全兼容，直接复用Chromium的方案即可。

二、让滚动过程可视化 #

你的scrollToCenter方法默认是瞬间滚动，修改为平滑滚动即可看到过程：

def scrollToCenter(driver, element):
    window_height = driver.execute_script("return window.innerHeight;")
    element_position = element.location['y']
    scroll_position = element_position - window_height/2
    # 替换为平滑滚动
    driver.execute_script("window.scrollTo({top: {}, behavior: 'smooth'});".format(scroll_position))
    # 可选：高亮目标元素，配合滚动更易观察
    driver.execute_script("""
    arguments[0].style.border = '3px solid #00f';
    setTimeout(() => arguments[0].style.border = '', 2000);
    """, element)
    actions = ActionChains(driver)
    actions.move_to_element(element).perform()

三、无头模式录制执行视频（检查鼠标位置） #

方案1：使用CDP直接录屏（仅Chromium/Chrome） #

通过Chrome DevTools Protocol直接控制浏览器录屏，无需额外工具：

from selenium import webdriver

chrome_options = Options()
chrome_options.add_argument("--headless=new")
driver = webdriver.Chrome(options=chrome_options)

# 启动录屏，指定保存路径和格式
driver.execute_cdp_cmd("Page.startRecording", {
    "format": "mp4",
    "path": "./selenium_test_recording.mp4",
    "quality": 80
})

# 执行你的测试逻辑
# simulateClick(driver, target_element)

# 停止录屏
driver.execute_cdp_cmd("Page.stopRecording", {})
driver.quit()

注：该功能要求Chrome版本≥72，录屏文件会直接保存到指定路径。

方案2：跨平台屏幕录制（支持所有浏览器） #

使用pyautogui+opencv实现全屏幕录制，事后查看鼠标操作过程：
先安装依赖：

pip install pyautogui opencv-python

录屏代码示例：

import pyautogui
import cv2
import numpy as np
import threading
import time

def record_screen(filename="test_recording.mp4", max_duration=60):
    screen_size = pyautogui.size()
    fourcc = cv2.VideoWriter_fourcc(*"mp4v")
    video_writer = cv2.VideoWriter(filename, fourcc, 20.0, screen_size)
    
    start_time = time.time()
    while time.time() - start_time < max_duration:
        screenshot = pyautogui.screenshot()
        frame = np.array(screenshot)
        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        video_writer.write(frame)
    
    video_writer.release()

# 使用示例：启动录屏线程后执行测试
recorder_thread = threading.Thread(target=record_screen, args=("headless_test.mp4", 120))
recorder_thread.start()

# 初始化无头浏览器并执行测试
# ... 你的Selenium测试代码 ...

# 测试结束后等待录屏完成
recorder_thread.join()

内容的提问来源于stack exchange，提问作者pepito