Containerize Puppeteer

.dockerignore

@@ -0,0 +1,4 @@
+# Do not ignore .git which is needed for postinstall script to complete
+node_modules
+build
+docs

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:20
+
+# Install Google Chrome Stable and fonts
+# Note: this installs the necessary libs to make the browser work with Puppeteer.
+RUN apt-get update && apt-get install gnupg wget -y && \
+  wget --quiet --output-document=- https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor > /etc/apt/trusted.gpg.d/google-archive.gpg && \
+  sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
+  apt-get update && \
+  apt-get install libxshmfence-dev google-chrome-stable -y --no-install-recommends && \
+  rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY . .
+
+ENV CI=1
+ENV NODE_ENV=development
+
+RUN yarn install
+RUN yarn build
+RUN servebuild &
+RUN lsof -i :3000
+
+CMD yarn test:puppeteer

package.json

@@ -35,6 +35,8 @@
     "deploy:staging": "npm run lint && npm run build && firebase hosting:channel:deploy staging --expires 30d",
     "deploy:staging2": "npm run lint && npm run build && firebase hosting:channel:deploy staging2 --expires 30d",
     "deploy:dev": "npm run lint && npm run build && firebase hosting:channel:deploy dev --expires 30d",
+    "docker:build": "docker build --platform linux/amd64 --rm -t em-snapshot .",
+    "docker:run": "docker run em-snapshot",
     "lint": "FORCE_COLOR=1 npm-run-all --parallel --aggregate-output lint:*",
     "lint:src": "FORCE_COLOR=1 eslint . --cache --rule 'no-console: [2, { allow: [error, info, warn] }]'",
     "lint:lockfile": "npx lockfile-lint",

src/e2e/puppeteer-environment.js

@@ -18,6 +18,19 @@ class PuppeteerEnvironment extends JsDomEnvironment {
     this.global.browser = await puppeteer
       .launch({
         headless: true,
+        // Disable Chrome features that crash GitHub Actions with "Protocol error (Target.createTarget): Target closed."
+        // See: https://stackoverflow.com/a/66994528/480608
+        // List of Chromium switches: https://peter.sh/experiments/chromium-command-line-switches/
+        args: [
+          '--deterministic-fetch',
+          '--disable-dev-shm-usage',
+          '--disable-features=IsolateOrigins',
+          '--disable-setuid-sandbox',
+          '--disable-site-isolation-trials',
+          '--no-first-run',
+          '--no-sandbox',
+          '--no-zygote',
+        ],
       })
       // catch and log a launch error, otherwise it will not appear in the CI logs
       .catch(e => {