如何使用Selenium WebDriver捕获DevTools控制台截图？

模拟按下F12的方式存在不少弊端：跨平台快捷键不一致（Windows用F12/Ctrl+Shift+I，Mac用Cmd+Opt+I）、打开DevTools会改变页面布局、无法确保控制台完全加载就截图，因此更推荐以下两种原生方案：

方案1：使用Playwright（推荐） #

Playwright原生支持DevTools操作与日志捕获，无需模拟按键，兼容性和稳定性更好：

• 可直接监听控制台错误，测试失败时自动触发日志保存与截图
• 支持捕获包含控制台的页面截图，或通过tracing功能记录完整测试轨迹（含控制台日志、网络请求等）

示例代码（Python）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    
    # 收集控制台错误日志
    console_errors = []
    page.on("console", lambda msg: console_errors.append(msg.text) if msg.type == "error" else None)
    
    try:
        page.goto("你的测试页面URL")
        # 执行测试步骤，比如：
        # page.click("#submit-btn")
        # assert page.locator("#success-msg").is_visible()
    except AssertionError:
        # 保存控制台错误到文件
        with open("console_errors.txt", "w", encoding="utf-8") as f:
            f.write("\n".join(console_errors))
        # 打开DevTools并截图（设置为底部停靠）
        page._channel.send("Page.setDevToolsPreferences", {"currentDockState": "bottom"})
        page.screenshot(path="failure_with_console.png", full_page=True)
        # 可选：启动tracing记录完整轨迹，便于更深入排查
        # page.context.tracing.stop(path="trace.zip")
    finally:
        browser.close()

方案2：使用Selenium + Chrome DevTools Protocol（CDP） #

如果项目基于Selenium，可通过CDP直接操作DevTools，绕过模拟按键的问题：

• 启用CDP会话后，可直接打开DevTools并设置布局
• 同时监听控制台错误日志，结合截图保存

示例代码（Python）：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

options = webdriver.ChromeOptions()
# 如需可视化测试，注释掉以下headless配置
# options.add_argument("--headless=new")

driver = webdriver.Chrome(service=Service("你的chromedriver路径"), options=options)
cdp_session = driver.create_cdp_session()

# 将DevTools设置为底部停靠
cdp_session.execute_cdp_cmd("Page.setDevToolsPreferences", {"currentDockState": "bottom"})

# 监听控制台错误
console_errors = []
def capture_error(entry):
    if entry["level"] == "error":
        console_errors.append(entry["text"])

driver.execute_cdp_cmd("Log.enable", {})
driver.add_cdp_listener("Log.entryAdded", capture_error)

try:
    driver.get("你的测试页面URL")
    # 执行测试步骤，比如：
    # driver.find_element(By.ID, "submit-btn").click()
    # assert driver.find_element(By.ID, "success-msg").is_displayed()
except AssertionError:
    # 保存控制台错误
    with open("console_errors.txt", "w", encoding="utf-8") as f:
        f.write("\n".join(console_errors))
    # 截取带控制台的页面截图
    driver.save_screenshot("failure_with_console.png")
finally:
    driver.quit()

额外优化建议 #

• 按需截图：先检查控制台是否有错误，仅在有错误时再截图，减少不必要的资源消耗
• 整合测试报告：将控制台日志和截图嵌入Allure等测试报告工具，方便快速定位问题
• 优先日志而非截图：控制台日志是文本格式，更便于搜索和分析，截图可作为辅助补充

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