Use `.zip` for Firefox e2e tests (#10056)

The Firefox e2e tests now use the `.zip` file for testing the
extension. We've found this to produce more similar results to
production, compared to the old method of loading the unzipped
directory.

Passing in a `.zip` file to the Chrome driver didn't seem to work. I
didn't investigate this further to see if it was possible, but I'm not
sure it makes a difference on Chrome anyway.

.circleci/config.yml

@@ -168,10 +168,14 @@ jobs:
       - run:
           name: Move test build to 'dist-test' to avoid conflict with production build
           command: mv ./dist ./dist-test
+      - run:
+          name: Move test zips to 'builds-test' to avoid conflict with production build
+          command: mv ./builds ./builds-test
       - persist_to_workspace:
           root: .
           paths:
             - dist-test
+            - builds-test
 
   prep-build-test-metrics:
     docker:
@@ -189,10 +193,14 @@ jobs:
       - run:
           name: Move test build to 'dist-test-metrics' to avoid conflict with production build
           command: mv ./dist ./dist-test-metrics
+      - run:
+          name: Move test zips to 'builds-test' to avoid conflict with production build
+          command: mv ./builds ./builds-test-metrics
       - persist_to_workspace:
           root: .
           paths:
             - dist-test-metrics
+            - builds-test-metrics
 
   prep-build-storybook:
     docker:
@@ -265,6 +273,9 @@ jobs:
       - run:
           name: Move test build to dist
           command: mv ./dist-test ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test ./builds
       - run:
           name: test:e2e:chrome
           command: |
@@ -287,6 +298,9 @@ jobs:
       - run:
           name: Move test build to dist
           command: mv ./dist-test-metrics ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test-metrics ./builds
       - run:
           name: test:e2e:chrome:metrics
           command: |
@@ -312,6 +326,9 @@ jobs:
       - run:
           name: Move test build to dist
           command: mv ./dist-test ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test ./builds
       - run:
           name: test:e2e:firefox
           command: |
@@ -337,6 +354,9 @@ jobs:
       - run:
           name: Move test build to dist
           command: mv ./dist-test-metrics ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test-metrics ./builds
       - run:
           name: test:e2e:firefox:metrics
           command: |
@@ -359,6 +379,9 @@ jobs:
       - run:
           name: Move test build to dist
           command: mv ./dist-test ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test ./builds
       - run:
           name: Run page load benchmark
           command: yarn benchmark:chrome --out test-artifacts/chrome/benchmark/pageload.json

development/build/index.js

@@ -79,6 +79,7 @@ function defineAllTasks() {
       clean,
       styleTasks.prod,
       composeParallel(scriptTasks.test, staticTasks.prod, manifestTasks.test),
+      zip,
     ),
   )
 

test/e2e/webdriver/chrome.js

@@ -5,8 +5,8 @@ const chrome = require('selenium-webdriver/chrome')
  * A wrapper around a {@code WebDriver} instance exposing Chrome-specific functionality
  */
 class ChromeDriver {
-  static async build({ extensionPath, responsive, port }) {
-    const args = [`load-extension=${extensionPath}`]
+  static async build({ responsive, port }) {
+    const args = [`load-extension=dist/chrome`]
     if (responsive) {
       args.push('--auto-open-devtools-for-tabs')
     }

test/e2e/webdriver/firefox.js

@@ -3,7 +3,7 @@ const os = require('os')
 const path = require('path')
 const { Builder, By, until } = require('selenium-webdriver')
 const firefox = require('selenium-webdriver/firefox')
-const { Command } = require('selenium-webdriver/lib/command')
+const { version } = require('../../../app/manifest/_base.json')
 
 /**
  * The prefix for temporary Firefox profiles. All Firefox profiles used for e2e tests
@@ -12,20 +12,16 @@ const { Command } = require('selenium-webdriver/lib/command')
  */
 const TEMP_PROFILE_PATH_PREFIX = path.join(os.tmpdir(), 'MetaMask-Fx-Profile')
 
-const GeckoDriverCommand = {
-  INSTALL_ADDON: 'install addon',
-}
-
 /**
  * A wrapper around a {@code WebDriver} instance exposing Firefox-specific functionality
  */
 class FirefoxDriver {
   /**
    * Builds a {@link FirefoxDriver} instance
-   * @param {{extensionPath: string}} options - the options for the build
+   * @param {Object} options - the options for the build
    * @returns {Promise<{driver: !ThenableWebDriver, extensionUrl: string, extensionId: string}>}
    */
-  static async build({ extensionPath, responsive, port }) {
+  static async build({ responsive, port }) {
     const templateProfile = fs.mkdtempSync(TEMP_PROFILE_PATH_PREFIX)
     const options = new firefox.Options().setProfile(templateProfile)
     const builder = new Builder()
@@ -38,9 +34,9 @@ class FirefoxDriver {
     const driver = builder.build()
     const fxDriver = new FirefoxDriver(driver)
 
-    await fxDriver.init()
-
-    const extensionId = await fxDriver.installExtension(extensionPath)
+    const extensionId = await fxDriver.installExtension(
+      `builds/metamask-firefox-${version}.zip`,
+    )
     const internalExtensionId = await fxDriver.getInternalId()
 
     if (responsive) {
@@ -62,31 +58,13 @@ class FirefoxDriver {
     this._driver = driver
   }
 
-  /**
-   * Initializes the driver
-   * @returns {Promise<void>}
-   */
-  async init() {
-    await this._driver
-      .getExecutor()
-      .defineCommand(
-        GeckoDriverCommand.INSTALL_ADDON,
-        'POST',
-        '/session/:sessionId/moz/addon/install',
-      )
-  }
-
   /**
    * Installs the extension at the given path
    * @param {string} addonPath - the path to the unpacked extension or XPI
    * @returns {Promise<string>} the extension ID
    */
   async installExtension(addonPath) {
-    const cmd = new Command(GeckoDriverCommand.INSTALL_ADDON)
-      .setParameter('path', path.resolve(addonPath))
-      .setParameter('temporary', true)
-
-    return await this._driver.execute(cmd)
+    return await this._driver.installAddon(addonPath, true)
   }
 
   /**

test/e2e/webdriver/index.js

@@ -6,13 +6,12 @@ const FirefoxDriver = require('./firefox')
 
 async function buildWebDriver({ responsive, port } = {}) {
   const browser = process.env.SELENIUM_BROWSER
-  const extensionPath = `dist/${browser}`
 
   const {
     driver: seleniumDriver,
     extensionId,
     extensionUrl,
-  } = await buildBrowserWebDriver(browser, { extensionPath, responsive, port })
+  } = await buildBrowserWebDriver(browser, { responsive, port })
   await setupFetchMocking(seleniumDriver)
   const driver = new Driver(seleniumDriver, browser, extensionUrl)