如何消除硬件对Playwright+Chromium截图测试的渲染影响？

我们使用Playwright搭配Chromium开展端到端测试，目前正在搭建截图对比测试，但发现即使使用相同的Chromium驱动，不同平台下字体渲染仍存在差异，即便使用官方Docker镜像mcr.microsoft.com/playwright:1.43.1也无改善。

我们推测这与宿主系统硬件有关，因此尝试禁用GPU并强制CPU渲染，但未解决问题，仍存在配置/环境差异。

从截图能看出问题出在抗锯齿或子像素定位上：一种采用多色渲染技术，另一种为灰度技术，而Canvas渲染的字体无此差异。该效果对应字体光栅化的两种方式：

• 带提示的抗锯齿光栅化：尽可能将像素强制落在整数像素坐标上
• 针对RGB平板显示器的带提示子像素渲染

核心问题 #

1. 导致该差异的配置项是什么？
2. 能否在所有宿主平台上统一渲染效果？

Playwright 配置 #

const config: PlaywrightTestConfig = {
  testDir: 'tests/specs',
  forbidOnly: CI,
  workers: CI ? 10 : 1,
  retries: CI ? 2 : 0,
  timeout: 60 * 1000,
  expect: {
    timeout: 10 * 1000,
  },
  use: {
    headless: true,
    ignoreHTTPSErrors: true,
    acceptDownloads: true,
    screenshot: 'only-on-failure',
    video: {
      mode: 'retain-on-failure',
      size: { width: 1280, height: 720 },
    },
    trace: 'retain-on-failure',
    launchOptions: {
      args: [
        '--disable-gpu', // 禁用GPU硬件加速，若无软件渲染器则GPU进程不会启动
        '--disable-gpu-rasterization', // 禁用GPU光栅化，仅在CPU上执行，覆盖kEnableGpuRasterization标志
        '--disable-gpu-compositing', // 阻止合成器使用GPU实现
        '--disable-font-subpixel-positioning', // 强制禁用字体子像素定位，影响字符清晰度、字距、提示与布局
        '--disable-software-rasterizer', // 禁用3D软件光栅化器（--disable-gpu生效的必要条件）
        '--ppapi-subpixel-rendering-setting=0', // 传递给Ppapi进程的FontRenderParams::subpixel_rendering枚举值
        '--force-device-scale-factor=1', // 覆盖浏览器UI和内容的设备缩放因子
        '--force-color-profile=srgb', // 强制所有显示器使用指定颜色配置文件
      ],
    },
  },
  projects: [
    {
      name: 'Our project',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
      },
    },
  ],
  reporter:
    CI ?
      [
        ['list'],
        ['junit', { outputFile: 'test-results/results.xml' }],
        ['html', { open: 'never', outputFolder: 'test-reports' }],
      ]
    : [['list']],
};

截图对比代码 #

await expect(
  locator,
  'Snapshots do not match.',
).toHaveScreenshot(`${snapshotId}.png`, {
  threshold: 0,
  maxDiffPixels: 0,
  maxDiffPixelRatio: 0,
});

渲染结果对比 #

1. 某Linux主机渲染结果 #

2. 另一Linux主机渲染结果 #

3. 差异对比 #

问题解答 #

1. 导致差异的配置项 #

这种差异本质是Chromium字体子像素渲染策略与系统级字体渲染配置（如FreeType设置）共同作用的结果：

• 系统层面：不同Linux主机可能采用不同的FreeType配置，比如FT_HINTING_MODE、FT_SUBPIXEL_RENDERING等环境变量，直接影响字体光栅化结果。
• Chromium层面：现有配置缺少强制统一字体渲染的核心开关，且--disable-software-rasterizer会导致渲染路径不统一，反而引入差异；已添加的--disable-font-subpixel-positioning无法覆盖系统级的渲染参数。

2. 实现跨平台统一渲染的方案 #

可以通过以下步骤实现一致的字体渲染效果：

（1）调整Chromium启动参数

修改launchOptions.args，移除冲突项并补充字体渲染统一开关：

launchOptions: {
  args: [
    '--disable-gpu',
    '--disable-gpu-rasterization',
    '--disable-gpu-compositing',
    '--force-device-scale-factor=1',
    '--force-color-profile=srgb',
    // 新增统一字体渲染开关
    '--font-render-hinting=none', // 禁用字体提示，强制统一字形定位
    '--disable-subpixel-font-scaling', // 禁用子像素字体缩放
    '--disable-font-subpixel-positioning',
    '--enable-font-antialiasing', // 强制启用灰度抗锯齿，替代子像素渲染
    '--no-sandbox', // Docker环境可选，避免权限问题
  ],
},

注意：移除--disable-software-rasterizer，CPU渲染需要软件光栅器保证路径统一。

（2）统一系统级字体渲染环境

在所有测试环境（含Docker）中设置统一的FreeType环境变量：

export FT_HINTING_MODE=none
export FT_SUBPIXEL_RENDERING=0
export FREETYPE_PROPERTIES=truetype:interpreter-version=35

Docker环境可将这些变量写入Dockerfile，确保容器启动时加载统一配置。

（3）使用自定义Web字体

在测试页面通过@font-face引入自定义字体，避免依赖宿主系统的字体文件，从根源消除字体本身的差异。

（4）放宽截图对比阈值

完全零差异的跨平台截图难以实现，可适当调整对比参数平衡准确性与稳定性：

await expect(locator, 'Snapshots do not match.').toHaveScreenshot(`${snapshotId}.png`, {
  threshold: 0.02, // 允许2%的像素颜色差异
  maxDiffPixels: 100, // 最多允许100个像素差异
});

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