如何在非无头模式下用Capybara捕获含多标签的完整浏览器窗口截图？

核心思路 #

Capybara的save_screenshot依赖WebDriver API，仅能捕获当前标签页内容。要实现类似Print Screen的完整窗口截图，需绕过WebDriver，直接调用系统级截图工具，同时确保浏览器在非无头模式下运行（窗口可见）。

本地环境（非Docker）实现 #

根据操作系统选择对应的系统命令，在测试代码中替换save_screenshot为以下调用：

Linux（需安装scrot或imagemagick） #

# 使用scrot捕获整个屏幕
system("scrot '/your/screenshot/path/full_browser.png'")

# 或用imagemagick的import命令，指定捕获浏览器窗口（需知道窗口标题）
system("import -window 'Google Chrome' '/your/screenshot/path/full_browser.png'")

安装依赖：sudo apt install scrot imagemagick

macOS #

# 捕获主屏幕，-x参数禁用声音提示
system("screencapture -x '/your/screenshot/path/full_browser.png'")

# 或指定捕获浏览器窗口（通过窗口名称）
system("screencapture -x -l$(osascript -e 'id of window 1 of application \"Google Chrome\"') '/your/screenshot/path/full_browser.png'")

Windows #

# 通过PowerShell捕获主屏幕
system("powershell -Command \"Add-Type -AssemblyName System.Windows.Forms; [System.Windows.Forms.Screen]::AllScreens[0].CaptureScreen().Save('C:\\your\\screenshot\\path\\full_browser.png')\"")

注意：确保测试运行时浏览器窗口处于最大化且未被遮挡，运行测试的用户需有屏幕捕获权限。

Docker容器环境实现 #

Docker默认无图形界面，需配置虚拟显示（Xvfb）让浏览器以非无头模式运行，再结合容器内的截图工具实现需求。

1. 构建包含必要工具的Docker镜像 #

示例Dockerfile片段：

FROM ruby:3.2-slim

# 安装依赖：浏览器、虚拟显示、截图工具
RUN apt-get update && apt-get install -y --no-install-recommends \
    chromium \
    xvfb \
    scrot \
    imagemagick \
    && rm -rf /var/lib/apt/lists/*

# 设置DISPLAY环境变量，让Chrome连接到虚拟显示
ENV DISPLAY=:99

2. 启动容器与测试流程 #

• 启动容器时，先启动Xvfb虚拟显示：

# 启动Xvfb（后台运行，分辨率1920x1080）
Xvfb :99 -screen 0 1920x1080x24 &

# 启动测试（确保Chrome以非无头模式运行）
bundle exec rspec

• 在测试代码中调用容器内的截图命令：

# 捕获整个虚拟屏幕
system("scrot '/app/screenshots/full_browser.png'")

# 或用import捕获Chrome窗口
system("import -window 'Chromium' '/app/screenshots/full_browser.png'")

3. 额外配置（可选） #

为确保浏览器窗口最大化，在Capybara驱动配置中添加启动参数：

Capybara.register_driver :chrome do |app|
  options = Selenium::WebDriver::Chrome::Options.new(
    args: [
      '--start-maximized',
      '--no-sandbox', # Docker环境下需添加
      '--disable-dev-shm-usage' # Docker环境下需添加
    ]
  )
  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

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