使用 chromium 驱动程序禁用硬件对剧作家测试的影响

Question

我们使用带有 chromium-driver 的 playwright 进行端到端测试，现在正在尝试建立图像比较测试。尽管使用相同的 chrome 驱动程序，但我们还是失败了，因为字体在不同平台上的渲染方式不同。如果使用官方 docker 镜像进行渲染也没有什么区别

mcr.microsoft.com/playwright:1.43.1

。

我们假设主机系统硬件以某种方式参与其中并导致不同的结果。因此我们尝试排除 GPU 并强制 CPU 渲染。要么我们没有成功，要么配置/环境仍然存在任何其他差异。

下图清楚地表明抗锯齿或子像素定位存在问题（是吗？），其中一种情况使用多色，另一种情况使用灰度技术。画布渲染的字体不会显示这些差异。

这里描述了相同的效果：

什么选项导致了这种差异？
所有主机平台可以统一吗？

剧作家配置：

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: [
        // https://peter.sh/experiments/chromium-command-line-switches/
        '--disable-gpu', // Disables GPU hardware acceleration. If software renderer is not in place, then the GPU process won't launch.
        '--disable-gpu-rasterization', // Disable GPU rasterization, i.e. rasterize on the CPU only. Overrides the kEnableGpuRasterization flag.
        '--disable-gpu-compositing', // Prevent the compositor from using its GPU implementation.
        '--disable-font-subpixel-positioning', // Force disables font subpixel positioning. This affects the character glyph sharpness, kerning, hinting and layout.
        '--disable-software-rasterizer', // Disables the use of a 3D software rasterizer. (Necessary to make --disable-gpu work)
        '--ppapi-subpixel-rendering-setting=0', // The enum value of FontRenderParams::subpixel_rendering to be passed to Ppapi processes.
        '--force-device-scale-factor=1', // Overrides the device scale factor for the browser UI and the contents.
        '--force-color-profile=srgb', // Force all monitors to be treated as though they have the specified color profile.
      ],
    },
  },
  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']],
};

快照和比较是由PlayWright完成的：

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

（

https://playwright.dev/docs/test-snapshots）

1。在一台 Linux PC 上的渲染结果：