Protractor/Cucumber/TypeScript无头模式下失败截图空白问题求助

我来帮你解决这个无头模式下截图空白的问题，这个坑我之前也踩过，大概率是无头模式的渲染特性、截图时机不对或者参数配置不到位导致的，给你几个可行的解决方案：

1. 改用新版无头模式，优化渲染兼容性 #

旧版的--headless模式和正常Chrome的渲染逻辑有差异，容易出现截图空白的情况。从Chrome 112版本开始，官方推出了新版无头模式，渲染效果和正常浏览器几乎一致，能解决大部分无头特有的截图问题。修改你的Chrome配置：

chromeOptions: {
  args: [
    "--headless=new", // 新版无头模式，核心优化点
    "--window-size=1280,720", // 用更通用的分辨率，避免元素适配问题
    "--no-sandbox",
    "--disable-dev-shm-usage" // 解决Linux环境下共享内存不足导致的渲染异常
  ]
}

另外，新版无头模式下--disable-gpu参数已经不需要了，直接去掉就行。

2. 确保截图前页面完全加载 #

空白截图最常见的原因就是截图时机太早，页面还没渲染完成就执行了截图操作。你可以在截图前添加等待逻辑，保证页面状态稳定：

// 等待页面完全加载（document.readyState变为complete）
await browser.waitUntil(async () => {
  const readyState = await browser.executeScript(() => document.readyState);
  return readyState === 'complete';
}, { timeout: 10000 }); // 设置10秒超时，避免无限等待

// 或者等待测试失败相关的关键元素显示出来
await $(yourFailedElementSelector).waitForDisplayed({ timeout: 5000 });

// 再执行截图
const screenshot = await browser.takeScreenshot();
scenario.attach(new Buffer(screenshot, 'base64'), "image/png");

3. 显式设置窗口尺寸，避免参数不生效 #

有时候你在启动参数里设置的--window-size可能没有正确生效，导致无头浏览器的实际窗口尺寸异常，进而截图空白。可以在浏览器启动后，显式调用API设置窗口大小：

// 在测试用例初始化时添加
await browser.setWindowSize(1280, 720);

用这种方式设置的尺寸比启动参数更可靠，能确保截图时的页面渲染区域正常。

4. 排查环境与权限问题 #

如果是在Linux环境下运行，--no-sandbox参数虽然能解决权限问题，但也可能导致渲染受限。可以尝试：

• 确保运行测试的用户有足够的权限访问浏览器资源
• 检查系统的共享内存是否充足，--disable-dev-shm-usage参数可以缓解这个问题

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