Playwright无头模式截图对比测试50%失败，求助解决方案

一、固定Chromium无头模式的屏幕尺寸 #

完全可以指定固定的视口尺寸和分辨率，这是解决滚动条随机出现问题的核心方案，有两种常用设置方式：

• 全局浏览器配置
  在启动Chromium时直接定义视口参数，确保所有页面都使用统一尺寸：

// JavaScript 示例
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: true,
    viewport: { width: 1920, height: 1080 } // 替换为你的基准图对应尺寸
  });
  const page = await browser.newPage();
  // 执行测试逻辑
})();

# Python 示例
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
    # 执行测试逻辑
    browser.close()

• 单页面单独设置
  如果不同测试页面需要不同尺寸，可在打开页面后单独配置：

await page.setViewportSize({ width: 1280, height: 720 });

二、额外优化方案 #

• 强制隐藏滚动条
  即使固定了视口，部分页面可能因异步渲染导致内容高度波动，可通过注入CSS强制隐藏滚动条：

await page.addStyleTag({ content: 'body { overflow: hidden !important; }' });

• 统一截图范围
  确保截图时使用和基准图一致的截取范围，若基准图是可视区域而非全屏，关闭fullPage选项：

await page.screenshot({ path: 'current-screenshot.jpg', fullPage: false });

三、关于无头模式不一致的原因 #

无头模式下滚动条随机出现，大多是因为默认视口尺寸可能随环境（系统、Playwright版本）有细微差异，或者页面异步加载的内容导致高度变化。固定视口是社区公认的解决办法，很多开发者都遇到过类似问题。

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