[Bug]: Incorrect font rendering by Chromium, Firefox, Webkit and Microsoft Edge on Ubuntu

[parthlambdatest]

Version

1.44.1

Steps to reproduce

System Info

• Playwright version: 1.44.1
• Operating System: 22.04.4 LTS (Jammy Jellyfish)
• Browser: Chromium, Firefox, Webkit, Microsoft Edge
• Node.js version: 16.20.2

Source Code

I am providing that would allow to reproduce the issue locally

test.js

// @ts-check
const { test, expect } = require('@playwright/test');
const fs = require('fs');
const path = require('path');

/**
 * @param {import('@playwright/test').Page} page
 */
async function takeFullPageSnapshot(page) {
  const snapshotsDir = path.join(__dirname, '..', 'snapshot_edge');
  if (!fs.existsSync(snapshotsDir)) {
    fs.mkdirSync(snapshotsDir);
  }
  await page.goto('https://www.cvshealth.com/about.html');
  const screenshotPath = path.join(snapshotsDir, `snapshot-.png`);
  await page.screenshot({ path: screenshotPath, fullPage: true });

  await expect(page).toHaveURL('https://www.cvshealth.com/about.html');
  await expect(page.getByRole('heading', { name: /About CVS Health/i })).toBeVisible();
}

test('take full-page snapshots', async ({ page }) => {
    await takeFullPageSnapshot(page);
});

playwright.config.js

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    // {
    //   name: 'chromium',
    //   use: { ...devices['Desktop Chrome'] },
    // },
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },
    //{
    //  name: 'Microsoft Edge',
    //  use: { ...devices['Desktop Edge'], channel: 'msedge' },
    //},
  ],
});

Expected behavior

Actual behavior

Additional context

I want to capture screenshots of the URL https://www.cvshealth.com/about.html on different browser. The font weight of the text captured from the URL on different browser doesn't match with the font weight of the text present in the URL.

One can check similar difference on other browser as well by altering the playwright.config.js file. @pinanks FYI

Similar issues

22429

[dgozman]

@parthlambdatest The font rendering differs between browsers and operating systems. That's expected. When you say "incorrect", what baseline do you compare it to? Specifically, on which browser, headed/headless, which os, how did you obtain the baseline screenshot?

[parthlambdatest]

@dgozman baseline was captured in the similar environment. The OS of the environment is "Ubuntu". The browser used was Firefox. Os Version: 22.04.4 LTS (Jammy Jellyfish) Geckodriver version: 4.4.1 Firefox version: 126

[dgozman]

@parthlambdatest I guess I don't understand the issue then. There are two different screenshots, are they both taken with Firefox on Ubuntu 22.04? Is that reproducible? Does the screenshot change between multiple runs? What exactly is the problem? I would expect the screenshot to be similar when running on the same browser, same os, same version and the same computer - is that not the case?

[parthlambdatest]

@parthlambdatest I guess I don't understand the issue then. There are two different screenshots, are they both taken with Firefox on Ubuntu 22.04? Is that reproducible? Does the screenshot change between multiple runs? What exactly is the problem? I would expect the screenshot to be similar when running on the same browser, same os, same version and the same computer - is that not the case?

So the screenshot with the tag expected is taken using selenium-webdriver (version: 4.21.0), while the screenshot with the tag actual is captured using playwright (version: 1.44.1). Ideally the result should be the font of both the screenshot needs to be similar but they aren't. This is the issue.

[dgozman]

@parthlambdatest Playwright does not guarantee or even aim to produce the same screenshots as selenium-webdriver. If you were getting two different screenshots from Playwright, we would take a look. However, this does not sound like a usecase we support.

[dgozman]

Closing as per above. If you have a Playwright-only repro, please file a new issue using the "Bug Report" template.