[INFRA] Cache browsers installed by playwright when running GH workflows

[tbouffard]

Playwright uses specific versions of these browsers (including patched versions of Firefox and Webkit) and the versions change with the version of Playwright. Today, we are installing a fresh browser when it is needed. This means that we are downloading the same browser multiple times. It is time consuming and consumes a lot of bandwidth.

Here are typical size of the installed browsers (always more than 200MB)

215M ~/.cache/ms-playwright/firefox-1344
216M ~/.cache/ms-playwright/firefox-1322
216M ~.cache/ms-playwright/firefox-1357
224M ~/.cache/ms-playwright/webkit-1630
227M ~/.cache/ms-playwright/webkit-1699
232M ~/.cache/ms-playwright/webkit-1724
426M ~/.cache/ms-playwright/chromium-1000
426M ~/.cache/ms-playwright/chromium-1019
438M ~/.cache/ms-playwright/chromium-1028
5,6M ~/.cache/ms-playwright/ffmpeg-1007

Instead, we could download the browser once and cache it. Notice that the downloaded browser depends on the OS.

Playwright allows to download the browser in specific location. This may help to cache the directory

• in a dedicated folder: https://playwright.dev/docs/browsers#managing-browser-binaries
• in node_modules: https://playwright.dev/docs/browsers#managing-browser-binaries-1

The node_modules folder is interesting as we already cache it. However, we must cache various flavors of the same browser for each OS. For a dedicated folder the cache could be named with

• playwright version (the browser version depends on this version)
• OS or OS family (linux, macos, windows)
• browser name

If we change the path were the browsers are stored, remember that the path must be passed when running tests. Path configuration is done by setting environment variables.

See also #2355 for other improvements about playwright browser management in GitHub workflows.