Make Playwright MS Edge screenshots stable and platform independent

by

Summary

To achieve stable and platform-independent screenshots with Playwright MS Edge, it’s crucial to understand the factors affecting font rendering. Font rendering variations can lead to differences in screenshots between runs on the same machine and between different machines.

Root Cause

The root cause of the issue is attributed to:

  • Font rendering differences due to variations in system configurations
  • Library versions, such as libfreetype6 and libfontconfig1, which can affect font rendering
  • Browser launch options, which can impact font rendering and screenshot stability

Why This Happens in Real Systems

This issue occurs in real systems due to:

  • Diverse system configurations: Different machines may have varying system configurations, leading to font rendering differences
  • Library version discrepancies: Machines may have different versions of libraries like libfreetype6 and libfontconfig1, affecting font rendering
  • Inconsistent browser launch options: Browser launch options may not be standardized across machines, leading to variations in font rendering

Real-World Impact

The impact of this issue includes:

  • Unstable screenshots: Screenshots may vary between runs on the same machine and between different machines
  • Difficulty in testing: Unstable screenshots can make it challenging to test and verify the correctness of web applications
  • Increased maintenance: Resolving these issues can require significant time and effort

Example or Code

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    channel: 'msedge',
    args: [
      '--disable-variations',
      '--disable-field-trial-config',
      '--force-device-scale-factor=1',
      '--force-color-profile=srgb',
      '--disable-gpu',
    ],
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Standardizing system configurations: Ensuring all machines have the same system configurations and library versions
  • Using consistent browser launch options: Utilizing the same browser launch options across all machines
  • Implementing font rendering fixes: Applying fixes like --force-device-scale-factor=1 and --force-color-profile=srgb to ensure deterministic font rendering

Why Juniors Miss It

Juniors may miss this issue due to:

  • Lack of understanding of font rendering: Limited knowledge of how font rendering works and its impact on screenshots
  • Inadequate testing: Insufficient testing across different machines and configurations
  • Overlooking browser launch options: Failing to consider the impact of browser launch options on font rendering and screenshot stability