Use Vitest for browser tests (#3236)

This migrates all browser tests which were previously run with
WebdriverIO to Vitest. WebdriverIO had several issues like flakiness,
lack of certain APIs since it uses Mocha, and performance in CI. Vitest
does not seem to have these issues.

Long term we can start migrating all tests to Vitest instead of Jest.
The APIs are largely the same between the two, so the migration should
be relatively straightforward, and it simplifies some of our custom
logic like merging coverage.

Author: Mrtenz

.github/dependabot.yml

@@ -10,7 +10,6 @@ updates:
       time: '06:00'
     allow:
       - dependency-name: '@metamask/*'
-      - dependency-name: 'chromedriver'
     target-branch: 'main'
     versioning-strategy: 'increase'
     open-pull-requests-limit: 10

.github/workflows/build-lint-test.yml

@@ -188,15 +188,20 @@ jobs:
         uses: actions/download-artifact@v4
         with:
           name: build-source-${{ runner.os }}-${{ github.sha }}
-      - name: Install Google Chrome
+      - name: Install browsers
         if: ${{ matrix.package-name == '@metamask/snaps-controllers' || matrix.package-name == '@metamask/snaps-execution-environments' || matrix.package-name == '@metamask/snaps-utils' }}
         uses: MetaMask/action-retry-command@v1
         with:
-          command: yarn install-chrome
+          command: yarn playwright install --with-deps --only-shell chromium firefox
       - name: Run tests
         uses: MetaMask/action-retry-command@v1
         with:
           command: yarn workspace ${{ matrix.package-name }} run test
+      - name: Run Firefox tests
+        if: ${{ matrix.package-name == '@metamask/snaps-controllers' || matrix.package-name == '@metamask/snaps-execution-environments' || matrix.package-name == '@metamask/snaps-utils' }}
+        uses: MetaMask/action-retry-command@v1
+        with:
+          command: yarn workspace ${{ matrix.package-name }} run test:browser:firefox
       - name: Get coverage folder
         id: get-coverage-folder
         run: |

.github/workflows/update-pull-request.yml

@@ -179,39 +179,6 @@ jobs:
             .nvmrc
             packages/examples/packages
 
-  update-chrome:
-    name: Update Chrome
-    runs-on: ubuntu-latest
-    if: ${{ inputs.dependabot == true && contains(inputs.pull-request-title, 'chromedriver') }}
-    needs:
-      - prepare
-      - dedupe-yarn-lock
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Checkout pull request
-        run: gh pr checkout "${PR_NUMBER}"
-        env:
-          GITHUB_TOKEN: ${{ secrets.PULL_REQUEST_UPDATE_TOKEN }}
-          PR_NUMBER: ${{ inputs.pull-request != 0 && inputs.pull-request || github.event.issue.number }}
-      - name: Restore yarn.lock
-        uses: actions/download-artifact@v4
-        with:
-          name: yarn-lock-${{ needs.prepare.outputs.COMMIT_SHA }}
-      - name: Checkout and setup environment
-        uses: MetaMask/action-checkout-and-setup@v1
-        with:
-          is-high-risk-environment: false
-      - name: Update Chrome
-        run: yarn update-chrome
-      - name: Save install script
-        uses: actions/upload-artifact@v4
-        with:
-          name: chrome-install-script-${{ needs.prepare.outputs.COMMIT_SHA }}
-          path: |
-            .nvmrc
-            scripts/install-chrome.sh
-
   commit-result:
     name: Commit result
     runs-on: ubuntu-latest
@@ -222,7 +189,6 @@ jobs:
       - dedupe-yarn-lock
       - regenerate-lavamoat-policies
       - update-examples
-      - update-chrome
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -269,15 +235,5 @@ jobs:
         run: |
           git add packages/examples/packages
           git commit -m "${COMMIT_PREFIX}Update example snaps" || true
-      - name: Restore install script
-        if: ${{ inputs.dependabot == true && contains(inputs.pull-request-title, 'chromedriver') }}
-        uses: actions/download-artifact@v4
-        with:
-          name: chrome-install-script-${{ needs.prepare.outputs.COMMIT_SHA }}
-      - name: Commit install script
-        if: ${{ inputs.dependabot == true && contains(inputs.pull-request-title, 'chromedriver') }}
-        run: |
-          git add scripts/install-chrome.sh
-          git commit -m "${COMMIT_PREFIX}Update install Chrome script" || true
       - name: Push changes
         run: git push

.gitignore

@@ -78,3 +78,6 @@ packages/examples/examples/webpack/index.html
 
 # Ubuntu package files
 .deb
+
+# Vitest test failure screenshots
+__screenshots__

.yarnrc.yml

@@ -12,11 +12,6 @@ logFilters:
 
 nodeLinker: node-modules
 
-packageExtensions:
-  '@wdio/browser-runner@*':
-    dependencies:
-      '@babel/core': '*'
-
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-allow-scripts.cjs
     spec: 'https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js'

package.json

@@ -92,7 +92,6 @@
     "@types/lodash": "^4",
     "@types/node": "18.14.2",
     "@yarnpkg/types": "^4.0.0",
-    "chromedriver": "^135.0.0",
     "depcheck": "^1.4.7",
     "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
@@ -105,18 +104,19 @@
     "eslint-plugin-promise": "^7.1.0",
     "execa": "^5.1.1",
     "favicons": "^7.1.2",
-    "geckodriver": "^4.2.0",
     "jest": "^29.0.2",
     "jest-silent-reporter": "^0.6.0",
     "lint-staged": "^12.4.1",
     "lodash": "^4.17.21",
     "minimatch": "^7.4.1",
+    "playwright": "~1.49.0",
     "prettier": "^3.3.3",
     "prettier-2": "npm:prettier@^2.8.8",
     "prettier-plugin-packagejson": "^2.5.8",
     "rimraf": "^4.1.2",
     "semver": "^7.5.4",
     "simple-git-hooks": "^2.7.0",
+    "supports-color": "^7.2.0",
     "ts-node": "^10.9.1",
     "tsx": "^4.19.1",
     "typescript": "~5.3.3",
@@ -132,9 +132,7 @@
       "@lavamoat/preinstall-always-fail": false,
       "simple-git-hooks": false,
       "$root$": false,
-      "chromedriver": true,
       "jest>jest-cli>jest-config>ts-node>@swc/core": false,
-      "geckodriver": true,
       "ts-node>@swc/core": true,
       "@swc/core": true,
       "favicons>sharp": true,

packages/snaps-browserify-plugin/src/__snapshots__/plugin.test.ts.snap

@@ -108,7 +108,7 @@ exports[`plugin generates a source map 1`] = `
     };
   }, {}]
 }, {}, [1]);
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJyIiwiZSIsIm4iLCJ0IiwibyIsImkiLCJmIiwiYyIsInJlcXVpcmUiLCJ1IiwiYSIsIkVycm9yIiwiY29kZSIsInAiLCJleHBvcnRzIiwiY2FsbCIsImxlbmd0aCIsIm1vZHVsZSIsIm9uUnBjUmVxdWVzdCIsInJlcXVlc3QiLCJjb25zb2xlIiwibG9nIiwibWV0aG9kIiwiaWQiXSwic291cmNlcyI6WyIuLi8uLi9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwiX3N0cmVhbV8wLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbigpe2Z1bmN0aW9uIHIoZSxuLHQpe2Z1bmN0aW9uIG8oaSxmKXtpZighbltpXSl7aWYoIWVbaV0pe3ZhciBjPVwiZnVuY3Rpb25cIj09dHlwZW9mIHJlcXVpcmUmJnJlcXVpcmU7aWYoIWYmJmMpcmV0dXJuIGMoaSwhMCk7aWYodSlyZXR1cm4gdShpLCEwKTt2YXIgYT1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK2krXCInXCIpO3Rocm93IGEuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixhfXZhciBwPW5baV09e2V4cG9ydHM6e319O2VbaV1bMF0uY2FsbChwLmV4cG9ydHMsZnVuY3Rpb24ocil7dmFyIG49ZVtpXVsxXVtyXTtyZXR1cm4gbyhufHxyKX0scCxwLmV4cG9ydHMscixlLG4sdCl9cmV0dXJuIG5baV0uZXhwb3J0c31mb3IodmFyIHU9XCJmdW5jdGlvblwiPT10eXBlb2YgcmVxdWlyZSYmcmVxdWlyZSxpPTA7aTx0Lmxlbmd0aDtpKyspbyh0W2ldKTtyZXR1cm4gb31yZXR1cm4gcn0pKCkiLCJcbiAgbW9kdWxlLmV4cG9ydHMub25ScGNSZXF1ZXN0ID0gKHsgcmVxdWVzdCB9KSA9PiB7XG4gICAgY29uc29sZS5sb2coXCJIZWxsbywgd29ybGQhXCIpO1xuXG4gICAgY29uc3QgeyBtZXRob2QsIGlkIH0gPSByZXF1ZXN0O1xuICAgIHJldHVybiBtZXRob2QgKyBpZDtcbiAgfTtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxTQUFBQSxFQUFBQyxDQUFBLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtJQUFBLFNBQUFDLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtNQUFBLEtBQUFKLENBQUEsQ0FBQUcsQ0FBQTtRQUFBLEtBQUFKLENBQUEsQ0FBQUksQ0FBQTtVQUFBLElBQUFFLENBQUEsd0JBQUFDLE9BQUEsSUFBQUEsT0FBQTtVQUFBLEtBQUFGLENBQUEsSUFBQUMsQ0FBQSxTQUFBQSxDQUFBLENBQUFGLENBQUE7VUFBQSxJQUFBSSxDQUFBLFNBQUFBLENBQUEsQ0FBQUosQ0FBQTtVQUFBLElBQUFLLENBQUEsT0FBQUMsS0FBQSwwQkFBQU4sQ0FBQTtVQUFBLE1BQUFLLENBQUEsQ0FBQUUsSUFBQSx1QkFBQUYsQ0FBQTtRQUFBO1FBQUEsSUFBQUcsQ0FBQSxHQUFBWCxDQUFBLENBQUFHLENBQUE7VUFBQVMsT0FBQTtRQUFBO1FBQUFiLENBQUEsQ0FBQUksQ0FBQSxLQUFBVSxJQUFBLENBQUFGLENBQUEsQ0FBQUMsT0FBQSxZQUFBZCxDQUFBO1VBQUEsSUFBQUUsQ0FBQSxHQUFBRCxDQUFBLENBQUFJLENBQUEsS0FBQUwsQ0FBQTtVQUFBLE9BQUFJLENBQUEsQ0FBQUYsQ0FBQSxJQUFBRixDQUFBO1FBQUEsR0FBQWEsQ0FBQSxFQUFBQSxDQUFBLENBQUFDLE9BQUEsRUFBQWQsQ0FBQSxFQUFBQyxDQUFBLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtNQUFBO01BQUEsT0FBQUQsQ0FBQSxDQUFBRyxDQUFBLEVBQUFTLE9BQUE7SUFBQTtJQUFBLFNBQUFMLENBQUEsd0JBQUFELE9BQUEsSUFBQUEsT0FBQSxFQUFBSCxDQUFBLE1BQUFBLENBQUEsR0FBQUYsQ0FBQSxDQUFBYSxNQUFBLEVBQUFYLENBQUEsSUFBQUQsQ0FBQSxDQUFBRCxDQUFBLENBQUFFLENBQUE7SUFBQSxPQUFBRCxDQUFBO0VBQUE7RUFBQSxPQUFBSixDQUFBO0FBQUE7RUFBQSxjQUFBUSxPQUFBLEVBQUFTLE1BQUEsRUFBQUgsT0FBQTtJQ0NBRyxNQUFBLENBQUFILE9BQUEsQ0FBQUksWUFBQTtNQUFBQztJQUFBO01BQ0FDLE9BQUEsQ0FBQUMsR0FBQTtNQUVBO1FBQUFDLE1BQUE7UUFBQUM7TUFBQSxJQUFBSixPQUFBO01BQ0EsT0FBQUcsTUFBQSxHQUFBQyxFQUFBO0lBQ0EifQ=="
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJyIiwiZSIsIm4iLCJ0IiwibyIsImkiLCJmIiwiYyIsInJlcXVpcmUiLCJ1IiwiYSIsIkVycm9yIiwiY29kZSIsInAiLCJleHBvcnRzIiwiY2FsbCIsImxlbmd0aCIsIm1vZHVsZSIsIm9uUnBjUmVxdWVzdCIsInJlcXVlc3QiLCJjb25zb2xlIiwibG9nIiwibWV0aG9kIiwiaWQiXSwic291cmNlcyI6WyIuLi8uLi9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwiX3N0cmVhbV8wLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbigpe2Z1bmN0aW9uIHIoZSxuLHQpe2Z1bmN0aW9uIG8oaSxmKXtpZighbltpXSl7aWYoIWVbaV0pe3ZhciBjPVwiZnVuY3Rpb25cIj09dHlwZW9mIHJlcXVpcmUmJnJlcXVpcmU7aWYoIWYmJmMpcmV0dXJuIGMoaSwhMCk7aWYodSlyZXR1cm4gdShpLCEwKTt2YXIgYT1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK2krXCInXCIpO3Rocm93IGEuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixhfXZhciBwPW5baV09e2V4cG9ydHM6e319O2VbaV1bMF0uY2FsbChwLmV4cG9ydHMsZnVuY3Rpb24ocil7dmFyIG49ZVtpXVsxXVtyXTtyZXR1cm4gbyhufHxyKX0scCxwLmV4cG9ydHMscixlLG4sdCl9cmV0dXJuIG5baV0uZXhwb3J0c31mb3IodmFyIHU9XCJmdW5jdGlvblwiPT10eXBlb2YgcmVxdWlyZSYmcmVxdWlyZSxpPTA7aTx0Lmxlbmd0aDtpKyspbyh0W2ldKTtyZXR1cm4gb31yZXR1cm4gcn0pKCkiLCJcbiAgbW9kdWxlLmV4cG9ydHMub25ScGNSZXF1ZXN0ID0gKHsgcmVxdWVzdCB9KSA9PiB7XG4gICAgY29uc29sZS5sb2coXCJIZWxsbywgd29ybGQhXCIpO1xuXG4gICAgY29uc3QgeyBtZXRob2QsIGlkIH0gPSByZXF1ZXN0O1xuICAgIHJldHVybiBtZXRob2QgKyBpZDtcbiAgfTtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxTQUFBQSxFQUFBQyxDQUFBLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtJQUFBLFNBQUFDLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtNQUFBLEtBQUFKLENBQUEsQ0FBQUcsQ0FBQTtRQUFBLEtBQUFKLENBQUEsQ0FBQUksQ0FBQTtVQUFBLElBQUFFLENBQUEsd0JBQUFDLE9BQUEsSUFBQUEsT0FBQTtVQUFBLEtBQUFGLENBQUEsSUFBQUMsQ0FBQSxTQUFBQSxDQUFBLENBQUFGLENBQUE7VUFBQSxJQUFBSSxDQUFBLFNBQUFBLENBQUEsQ0FBQUosQ0FBQTtVQUFBLElBQUFLLENBQUEsT0FBQUMsS0FBQSwwQkFBQU4sQ0FBQTtVQUFBLE1BQUFLLENBQUEsQ0FBQUUsSUFBQSx1QkFBQUYsQ0FBQTtRQUFBO1FBQUEsSUFBQUcsQ0FBQSxHQUFBWCxDQUFBLENBQUFHLENBQUE7VUFBQVMsT0FBQTtRQUFBO1FBQUFiLENBQUEsQ0FBQUksQ0FBQSxLQUFBVSxJQUFBLENBQUFGLENBQUEsQ0FBQUMsT0FBQSxZQUFBZCxDQUFBO1VBQUEsSUFBQUUsQ0FBQSxHQUFBRCxDQUFBLENBQUFJLENBQUEsS0FBQUwsQ0FBQTtVQUFBLE9BQUFJLENBQUEsQ0FBQUYsQ0FBQSxJQUFBRixDQUFBO1FBQUEsR0FBQWEsQ0FBQSxFQUFBQSxDQUFBLENBQUFDLE9BQUEsRUFBQWQsQ0FBQSxFQUFBQyxDQUFBLEVBQUFDLENBQUEsRUFBQUMsQ0FBQTtNQUFBO01BQUEsT0FBQUQsQ0FBQSxDQUFBRyxDQUFBLEVBQUFTLE9BQUE7SUFBQTtJQUFBLFNBQUFMLENBQUEsd0JBQUFELE9BQUEsSUFBQUEsT0FBQSxFQUFBSCxDQUFBLE1BQUFBLENBQUEsR0FBQUYsQ0FBQSxDQUFBYSxNQUFBLEVBQUFYLENBQUEsSUFBQUQsQ0FBQSxDQUFBRCxDQUFBLENBQUFFLENBQUE7SUFBQSxPQUFBRCxDQUFBO0VBQUE7RUFBQSxPQUFBSixDQUFBO0FBQUE7RUFBQSxjQUFBUSxPQUFBLEVBQUFTLE1BQUEsRUFBQUgsT0FBQTtJQ0NBRyxNQUFBLENBQUFILE9BQUEsQ0FBQUksWUFBQTtNQUFBQztJQUFBO01BQ0FDLE9BQUEsQ0FBQUMsR0FBQTtNQUVBO1FBQUFDLE1BQUE7UUFBQUM7TUFBQSxJQUFBSixPQUFBO01BQ0EsT0FBQUcsTUFBQSxHQUFBQyxFQUFBO0lBQ0EiLCJpZ25vcmVMaXN0IjpbXX0="
 `;
 
 exports[`plugin processes files using Browserify 1`] = `

packages/snaps-controllers/.depcheckrc.json

@@ -7,17 +7,14 @@
     "@metamask/eslint-*",
     "@types/*",
     "@typescript-eslint/*",
-    "@wdio/*",
+    "@vitest/coverage-istanbul",
     "eslint-config-*",
     "eslint-plugin-*",
     "jest-silent-reporter",
-    "expect-webdriverio",
     "prettier-plugin-packagejson",
     "ts-node",
     "typedoc",
     "typescript",
-    "vite",
-    "wdio-*",
-    "webdriverio"
+    "vite"
   ]
 }

packages/snaps-controllers/coverage.json

@@ -1,5 +1,5 @@
 {
-  "branches": 93.42,
+  "branches": 93.44,
   "functions": 97.38,
   "lines": 98.34,
   "statements": 98.08

packages/snaps-controllers/package.json

@@ -71,9 +71,10 @@
     "publish:preview": "yarn npm publish --tag preview",
     "since-latest-release": "../../scripts/since-latest-release.sh",
     "test": "jest --reporters=jest-silent-reporter && yarn test:browser",
-    "test:browser": "wdio run wdio.config.js",
+    "test:browser": "vitest",
+    "test:browser:firefox": "vitest --config ./vitest.config.firefox.mts",
     "test:clean": "jest --clearCache",
-    "test:post": "ts-node scripts/coverage.ts && rimraf coverage/jest coverage/wdio",
+    "test:post": "ts-node scripts/coverage.ts && rimraf coverage/jest coverage/vite",
     "test:pre": "yarn mkdirp test/fixtures && ./scripts/generate-fixtures.sh",
     "test:verbose": "jest --verbose",
     "test:watch": "jest --watch"
@@ -109,8 +110,6 @@
     "tar-stream": "^3.1.7"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@lavamoat/allow-scripts": "^3.0.4",
     "@metamask/auto-changelog": "^5.0.1",
     "@metamask/browser-passworder": "^6.0.0",
@@ -124,22 +123,14 @@
     "@types/gunzip-maybe": "^1.4.0",
     "@types/jest": "^27.5.1",
     "@types/luxon": "^3",
-    "@types/mocha": "^10.0.1",
     "@types/node": "18.14.2",
     "@types/readable-stream": "^4.0.15",
     "@types/semver": "^7.5.0",
     "@types/tar-stream": "^3.1.1",
-    "@wdio/browser-runner": "^8.19.0",
-    "@wdio/cli": "^8.19.0",
-    "@wdio/globals": "^8.19.0",
-    "@wdio/mocha-framework": "^8.19.0",
-    "@wdio/spec-reporter": "^8.19.0",
-    "@wdio/static-server-service": "^8.19.0",
+    "@vitest/browser": "^3.0.8",
     "deepmerge": "^4.2.2",
     "depcheck": "^1.4.7",
-    "esbuild": "^0.25.2",
     "eslint": "^9.11.0",
-    "expect-webdriverio": "^4.4.1",
     "istanbul-lib-coverage": "^3.2.0",
     "istanbul-lib-report": "^3.0.0",
     "istanbul-reports": "^3.1.5",
@@ -152,10 +143,9 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.3.3",
     "vite": "^6.2.3",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "^4.0.5",
-    "wdio-chromedriver-service": "^8.1.1",
-    "wdio-geckodriver-service": "^5.0.2",
-    "webdriverio": "^8.19.0"
+    "vitest": "^3.0.8"
   },
   "peerDependencies": {
     "@metamask/snaps-execution-environments": "workspace:^"