Proposal: Add an option to pass custom browser arguments to Playwright when launching the browser

nielthiart commented 6 months ago

I had the need to pass command line arguments to Playwright when launching a browser.

Chromium has a long List of Chromium Command Line Switches that users might find useful.

Why I use browser arguments: font render hinting

Font rendering in headless chrome is inconsistent between different platforms. When testing on a mac, font rendering is good, but on GitHub's action runners (Linux) the kerning is off, which affects line lengths. Some fonts at smaller sizes also appear a few pixels too high or low.

One solution to fix this, is to pass the --font-render-hinting=none argument when calling chromium.launch().

This solution comes up when users ask for help with font rendering in headless chrome, puppeteer, etc.

Examples

Here's an example of a page captured in a GitHub action with and without font render hinting:

Default font render hinting

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/1-bellingcat-default.png

1-bellingcat-default

The kerning is incorrect on small font sizes and lines wrap earlier.

With font-render-hinting=none

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/2-bellingcat-font-render-hinting-none.png \
  --browser-args "--font-render-hinting=none"

2-bellingcat-font-render-hinting-none

The kerning looks much better here.

Alternative solution: Unrelated to browser arguments

As a workaround, we can achieve similar font rendering results by using CSS to add text-rendering: geometricPrecision to all elements:

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/3-bellingcat-default-geomp.png \
  --javascript "(document.head || document.documentElement).appendChild(Object.assign(document.createElement('style'), {textContent: '*, ::before, ::after { text-rendering: geometricPrecision !important; }'}));"

3-bellingcat-default-geomp