Playwright component screenshot sometimes fail due to different alignment

Question

I am doing visual screenshot testing at component/element/locator level and not full page. Test passes most of the time, but sometimes, in actual image the text is rendered few pixels below the expected image (see attachment). However, size of component still remains same as expected. Can i improve my settings to avoid this. My current settings are:

metadata: {
        deviceName: 'iPhone 12',
    },
    use: {
        ...devices['iPhone 12'],
        launchOptions: {
            args: [
                '--font-render-hinting=none',
                '--disable-skia-runtime-opts',
                '--disable-font-subpixel-positioning',
                '--disable-lcd-text',
                '--force-color-profile=generic-rgb',
                '--disable-gpu',
                '--disable-translate',
                '--disable-extensions',
                '--disable-accelerated-2d-canvas',
                '--force-device-scale-factor=1',
                '--js-flags=--random-seed=1157259157',
                '--disable-partial-raster',
                '--use-gl=egl',
            ],
        },
    },

Actual image:

Expected image:

Diff:

Answer 1

Try changing from locator-based screenshots to page-based screenshots with the clip parameter. For example:

const box = await locator.boundingBox();
await expect(page).toHaveScreenshot('path/to/screenshot.png', { clip: box });

I think this would help in your scenario.

Answer 2

You will want to use the experimental comparator "ssim-cie94":

await expect(page).toHaveScreenshot({
  // https://github.com/microsoft/playwright/issues/20097#issuecomment-1382672908
  // https://github.com/microsoft/playwright/issues/13873#issuecomment-1769316019
  // https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/utils/comparators.ts#L68-L73
  // @ts-expect-error experimental feature
  _comparator: 'ssim-cie94',
  clip: box,
  fullPage: true,
});

Note the comments which link to the relevant GitHub issues indicating that this feature is not officially released.