Containerize Puppeteer

[raineorshine]

Update 2024-05-04: Puppeteer finally passes in GitHub Actions with the macos-latest test runner. This issue is now about running the Puppeteer tests in a Docker container. This would normalize browser rendering across platforms, albeit at the cost of additional test ops complexity.

Puppeteer currently works locally but fails in GitHub Actions.

[raineorshine]

• Disabling some Chrome features got the Puppeteer tests running again (a7672ec)
• Snapshots are failing due to inconsistent screenshot sizes.
  • jest-image-snapshot now appears to screenshot the whole document, not just the viewport
  • Local screenshots are 800x756 while GitHub Actions screenshots are 800x600 (?)
  • May have been caused by an old version of chromium. Fixed by reinstalling puppeteer.
• Snapshots pass locally but not on GitHub Actions
  • 24/40 snapshots failed
  • 10–800 pixels not matching
  • Sizes match

[raineorshine]

Attempting to containerize Puppeteer to generate uniform snapshots across platforms. Not yet integrated into GitHub Actions, but added two Docker-related scripts that can be run manually:

• docker:build
• docker:run

Resources:

• StackOverflow Questions
  • https://stackoverflow.com/questions/77565440/running-puppeteer-within-a-docker-container
  • https://stackoverflow.com/questions/48192863/puppeteer-in-docker-container-chromium-revision-is-not-downloaded
• Official Dockerfile: https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile
• Official images: https://pptr.dev/guides/docker
  • Only published for puppeteer >= 16

Error running yarn test:puppeteer in container:

Error: Failed to launch the browser process!
/app/node_modules/puppeteer/.local-chromium/linux-869685/chrome-linux/chrome: error while loading shared libraries: libxshmfence.so.1: cannot open shared object file: No such file or directory

[raineorshine]

The main GitHub issue for people having trouble getting chrome to launch: puppeteer/puppeteer#807

• apt-get install libxshmfence-dev
  • Seems to have overcome the chrome error, as launch succeeds now
• Puppeteer Dockerfile: https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile
• Legacy Puppeteer Dockerfile: https://github.com/puppeteer/puppeteer/blob/v3.0.1/.ci/node12/Dockerfile.linux
• Puppeteer Docker troubleshooting https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker
• CircleCI apt-get: https://circleci.com/developer/orbs/orb/threetreeslight/puppeteer#orb-source

Now just getting the error:

net::ERR_CONNECTION_REFUSED at http://localhost:3000

[raineorshine]

Closing since #1845 fixed Puppeteer on GitHubActions, which was the original reason to containerize. This can be reopened if the macos-latest Puppeteer runner proves to be unstable.