fix: e2e browser tests (#2531)

fixes #2527

.circleci/config.yml

@@ -804,7 +804,7 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: cond_run_script end-to-end ./scripts/run_tests_local e2e_aztec_js_browser.test.ts ./scripts/docker-compose-e2e-sandbox.yml
+          command: cond_run_script end-to-end ./scripts/run_tests_local e2e_aztec_js_browser.test.ts ./scripts/docker-compose-e2e-sandbox-browser.yml
 
   e2e-card-game:
     machine:
@@ -993,7 +993,7 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: run_script canary ./scripts/run_tests ./src/aztec_js_browser.test.ts canary ./scripts/docker-compose.yml
+          command: run_script canary ./scripts/run_tests ./src/aztec_js_browser.test.ts canary ./scripts/docker-compose-browser.yml
 
   run-deployment-canary-cli:
     machine:

yarn-project/canary/Dockerfile

@@ -32,6 +32,11 @@ ENV CHROME_BIN="/usr/bin/chromium-browser" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="tru
 WORKDIR /usr/src/yarn-project/aztec.js
 RUN yarn build:web
 WORKDIR /usr/src/yarn-project/canary
+
+# Copy browser script
+RUN cp ../end-to-end/scripts/start_e2e_ci_browser.sh ./scripts/start_e2e_ci_browser.sh
+RUN chmod +x scripts/start_e2e_ci_browser.sh
+
 RUN cp ../aztec.js/dest/main.js src/web/
 RUN cp ../circuits.js/resources/aztec3-circuits.wasm src/web/
 ENTRYPOINT ["yarn", "test"]

yarn-project/canary/scripts/docker-compose-browser.yml

@@ -0,0 +1,37 @@
+version: '3'
+services:
+  fork:
+    image: ghcr.io/foundry-rs/foundry:nightly-a44aa13cfc23491ba32aaedc093e9488c1a6db43
+    entrypoint: >
+      sh -c '
+      if [ -n "$FORK_BLOCK_NUMBER" ] && [ -n "$FORK_URL" ]; then
+        exec anvil -p 8545 --host 0.0.0.0 --chain-id 31337 --fork-url "$FORK_URL" --fork-block-number "$FORK_BLOCK_NUMBER"
+      else
+        exec anvil -p 8545 --host 0.0.0.0 --chain-id 31337
+      fi'
+    ports:
+      - '8545:8545'
+
+  sandbox:
+    image: aztecprotocol/aztec-sandbox:latest
+    environment:
+      DEBUG: 'aztec:*'
+      ETHEREUM_HOST: http://fork:8545
+      CHAIN_ID: 31337
+      ARCHIVER_POLLING_INTERVAL_MS: 50
+      P2P_BLOCK_CHECK_INTERVAL_MS: 50
+      SEQ_TX_POLLING_INTERVAL_MS: 50
+      WS_BLOCK_CHECK_INTERVAL_MS: 50
+      RPC_SERVER_BLOCK_POLLING_INTERVAL_MS: 50
+      ARCHIVER_VIEM_POLLING_INTERVAL_MS: 500
+      SEARCH_START_BLOCK: ${FORK_BLOCK_NUMBER:-0}
+    ports:
+      - '8080:8080'
+
+  canary:
+    image: aztecprotocol/canary:latest
+    environment:
+      ETHEREUM_HOST: http://fork:8545
+      CHAIN_ID: 31337
+      SANDBOX_URL: http://sandbox:8080
+    command: ['./scripts/start_e2e_ci_browser.sh', './src/aztec_js_browser.test.ts']

yarn-project/end-to-end/Dockerfile

@@ -18,12 +18,24 @@ RUN yarn workspaces focus --production > /dev/null
 
 # Create final, minimal size image.
 FROM node:18-alpine
-RUN apk update && apk add --no-cache udev ttf-freefont chromium curl jq bash
+RUN apk update && apk add --no-cache \
+  bash \
+  chromium \
+  chromium-chromedriver \
+  nss \
+  freetype \
+  harfbuzz \
+  ca-certificates \
+  ttf-freefont
+
 ENV CHROME_BIN="/usr/bin/chromium-browser" PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
 COPY --from=builder /usr/src /usr/src
+
 RUN rm /usr/src/yarn-project/end-to-end/src/web/aztec3-circuits.wasm
 RUN rm /usr/src/yarn-project/end-to-end/src/web/main.js
 COPY --from=builder /usr/src/circuits/cpp/build-wasm/bin/aztec3-circuits.wasm /usr/src/yarn-project/end-to-end/src/web/aztec3-circuits.wasm
 COPY --from=builder /usr/src/yarn-project/aztec.js/dest/main.js /usr/src/yarn-project/end-to-end/src/web/main.js
+
 WORKDIR /usr/src/yarn-project/end-to-end
+
 ENTRYPOINT ["yarn", "test"]

yarn-project/end-to-end/package.json

@@ -56,7 +56,7 @@
     "lodash.times": "^4.3.2",
     "lodash.zip": "^4.2.0",
     "lodash.zipwith": "^4.2.0",
-    "puppeteer": "^20.9.0",
+    "puppeteer": "^21.3.4",
     "string-argv": "^0.3.2",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
@@ -75,4 +75,4 @@
     "!*.test.*"
   ],
   "types": "./dest/index.d.ts"
-}
+}

yarn-project/end-to-end/scripts/docker-compose-e2e-sandbox-browser.yml

@@ -0,0 +1,38 @@
+version: '3'
+services:
+  fork:
+    image: ghcr.io/foundry-rs/foundry:nightly-a44aa13cfc23491ba32aaedc093e9488c1a6db43
+    entrypoint: >
+      sh -c '
+      if [ -n "$FORK_BLOCK_NUMBER" ] && [ -n "$FORK_URL" ]; then
+        exec anvil -p 8545 --host 0.0.0.0 --chain-id 31337 --fork-url "$FORK_URL" --fork-block-number "$FORK_BLOCK_NUMBER"
+      else
+        exec anvil -p 8545 --host 0.0.0.0 --chain-id 31337
+      fi'
+    ports:
+      - '8545:8545'
+
+  sandbox:
+    image: aztecprotocol/aztec-sandbox:latest
+    environment:
+      DEBUG: 'aztec:*'
+      ETHEREUM_HOST: http://fork:8545
+      CHAIN_ID: 31337
+      ARCHIVER_POLLING_INTERVAL_MS: 50
+      P2P_BLOCK_CHECK_INTERVAL_MS: 50
+      SEQ_TX_POLLING_INTERVAL_MS: 50
+      WS_BLOCK_CHECK_INTERVAL_MS: 50
+      RPC_SERVER_BLOCK_POLLING_INTERVAL_MS: 50
+      ARCHIVER_VIEM_POLLING_INTERVAL_MS: 500
+      SEARCH_START_BLOCK: ${FORK_BLOCK_NUMBER:-0}
+    ports:
+      - '8080:8080'
+
+  end-to-end:
+    image: aztecprotocol/end-to-end:latest
+    environment:
+      ETHEREUM_HOST: http://fork:8545
+      CHAIN_ID: 31337
+      SANDBOX_URL: http://sandbox:8080
+      SEARCH_START_BLOCK: ${FORK_BLOCK_NUMBER:-0}
+    entrypoint: ['./scripts/start_e2e_ci_browser.sh', './src/e2e_aztec_js_browser.test.ts']

yarn-project/end-to-end/scripts/start_e2e_ci_browser.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+TEST=${1:-./src/e2e_aztec_js_browser.test.ts}
+
+apk add dbus
+
+# Create dbus dirs
+mkdir -p /var/run/dbus
+
+# Change ownership and permissions if necessary
+chown -R root:root /var/run/dbus
+chmod -R 755 /var/run/dbus
+
+dbus-daemon --system --nofork &
+yarn test $TEST

yarn-project/end-to-end/src/canary/browser.ts

@@ -27,11 +27,11 @@ const PORT = 3000;
 
 const { SANDBOX_URL } = process.env;
 
-// const conditionalDescribe = () => (SANDBOX_URL ? describe: describe.skip);
+const conditionalDescribe = () => (SANDBOX_URL ? describe : describe.skip);
 const privKey = AztecJs.GrumpkinScalar.random();
 
 export const browserTestSuite = (setup: () => Server, pageLogger: AztecJs.DebugLogger) =>
-  describe.skip('e2e_aztec.js_browser', () => {
+  conditionalDescribe()('e2e_aztec.js_browser', () => {
     const initialBalance = 33n;
     const transferAmount = 3n;
 
@@ -56,15 +56,12 @@ export const browserTestSuite = (setup: () => Server, pageLogger: AztecJs.DebugL
         executablePath: process.env.CHROME_BIN,
         headless: 'new',
         args: [
-          '--allow-file-access-from-files',
           '--no-sandbox',
           '--headless',
-          '--disable-web-security',
-          '--disable-features=IsolateOrigins',
-          '--disable-site-isolation-trials',
           '--disable-gpu',
           '--disable-dev-shm-usage',
-          '--disk-cache-dir=/dev/null',
+          '--disable-software-rasterizer',
+          '--remote-debugging-port=9222',
         ],
       });
       page = await browser.newPage();