test: Support window switching without WebSocket background connection (#34772)

## **Description**

Our E2E driver class now allows the methods `switchWindow` and
`switchToWindowWithTitle` methods to be used in tests that have the
WebSocket connection to the background process disabled (such as those
that use a production build, or those that involve the extension
resetting).

Previously the `switchToWindowWithTitleWithoutSocket` driver method
served this purpose, but the test author had to know to use this
alternative method. Plus it didn't allow switching to a window handle,
or any of the other switch methods that internally use `switchWindow`.

There are a couple of switch methods still not supported, but in these
cases an error will be thrown so that the failure reason will be clear.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/34772?quickstart=1)

## **Changelog**

CHANGELOG entry: null

## **Related issues**

This unblocks #31435

## **Manual testing steps**

N/A

## **Screenshots/Recordings**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: Gudahtt

test/e2e/helpers.js

@@ -273,7 +273,10 @@ async function withFixtures(options, testSuite) {
 
     await setManifestFlags(manifestFlags);
 
-    const wd = await buildWebDriver(driverOptions);
+    const wd = await buildWebDriver({
+      ...driverOptions,
+      disableServerMochaToBackground,
+    });
     driver = wd.driver;
     extensionId = wd.extensionId;
     webDriver = driver.driver;

test/e2e/tests/update-modal/update-modal.spec.ts

@@ -100,9 +100,7 @@ describe('Update modal', function (this: Suite) {
         const updateModal = new UpdateModal(driver);
         await updateModal.checkPageIsLoaded();
         await updateModal.confirm();
-        await driver.switchToWindowByTitleWithoutSocket(
-          WINDOW_TITLES.ExtensionUpdating,
-        );
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionUpdating);
       },
     );
   });

test/e2e/vault-decryption-chrome.spec.ts

@@ -169,10 +169,8 @@ describe('Vault Decryptor Page', function () {
       },
       async ({ driver }) => {
         // we don't need to use navigate since MM will automatically open a new window in prod build
-        await driver.waitUntilXWindowHandles(2);
-
-        // we cannot use the customized driver functions as there is no socket for window communications in prod builds
-        await driver.switchToWindowByTitleWithoutSocket(
+        await driver.waitAndSwitchToWindowWithTitle(
+          2,
           WINDOW_TITLES.ExtensionInFullScreenView,
         );
 
@@ -229,10 +227,9 @@ describe('Vault Decryptor Page', function () {
       },
       async ({ driver }) => {
         // we don't need to use navigate since MM will automatically open a new window in prod build
-        await driver.waitUntilXWindowHandles(2);
 
-        // we cannot use the customized driver functions as there is no socket for window communications in prod builds
-        await driver.switchToWindowByTitleWithoutSocket(
+        await driver.waitAndSwitchToWindowWithTitle(
+          2,
           WINDOW_TITLES.ExtensionInFullScreenView,
         );
 

test/e2e/webdriver/driver.js

@@ -12,6 +12,7 @@ const {
 const cssToXPath = require('css-to-xpath');
 const { sprintf } = require('sprintf-js');
 const lodash = require('lodash');
+const { retry } = require('../../../development/lib/retry');
 const { quoteXPathText } = require('../../helpers/quoteXPathText');
 const { isManifestV3 } = require('../../../shared/modules/mv3.utils');
 const { WindowHandles } = require('../background-socket/window-handles');
@@ -118,27 +119,46 @@ until.foundElementCountIs = function foundElementCountIs(locator, n) {
   });
 };
 
+/**
+ * Error messages used by driver methods.
+ */
+const errorMessages = {
+  waitUntilXWindowHandlesTimeout:
+    'waitUntilXWindowHandles timed out polling window handles',
+};
+
 /**
  * This is MetaMask's custom E2E test driver, wrapping the Selenium WebDriver.
  * For Selenium WebDriver API documentation, see:
  * https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
  */
 class Driver {
   /**
-   * @param {!ThenableWebDriver} driver - A {@code WebDriver} instance
-   * @param {string} browser - The type of browser this driver is controlling
-   * @param {string} extensionUrl
-   * @param {number} timeout - Defaults to 10000 milliseconds (10 seconds)
+   * @param {object} args - Constructor arguments.
+   * @param {!ThenableWebDriver} args.driver - A {@code WebDriver} instance
+   * @param {string} args.browser - The type of browser this driver is controlling
+   * @param {string} args.extensionUrl
+   * @param {number} args.timeout - Defaults to 10000 milliseconds (10 seconds)
+   * @param {boolean} args.disableServerMochaToBackground - Determines whether the background mocha
+   * server is used.
    */
-  constructor(driver, browser, extensionUrl, timeout = 10 * 1000) {
+  constructor({
+    driver,
+    browser,
+    extensionUrl,
+    timeout = 10 * 1000,
+    disableServerMochaToBackground,
+  }) {
     this.driver = driver;
     this.browser = browser;
     this.extensionUrl = extensionUrl;
     this.timeout = timeout;
     this.exceptions = [];
     this.errors = [];
     this.eventProcessingStack = [];
-    this.windowHandles = new WindowHandles(this.driver);
+    this.windowHandles = disableServerMochaToBackground
+      ? null
+      : new WindowHandles(this.driver);
 
     // The following values are found in
     // https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/input.js#L50-L110
@@ -1060,7 +1080,9 @@ class Driver {
    */
   async switchToWindow(handle) {
     await this.driver.switchTo().window(handle);
-    await this.windowHandles.getCurrentWindowProperties(null, handle);
+    if (this.windowHandles) {
+      await this.windowHandles.getCurrentWindowProperties(null, handle);
+    }
   }
 
   /**
@@ -1089,7 +1111,10 @@ class Driver {
    *     be resolved with an array of window handles.
    */
   async getAllWindowHandles() {
-    return await this.windowHandles.getAllWindowHandles();
+    if (this.windowHandles) {
+      return await this.windowHandles.getAllWindowHandles();
+    }
+    return await this.driver.getAllWindowHandles();
   }
 
   /**
@@ -1160,7 +1185,7 @@ class Driver {
     }
 
     throw new Error(
-      `waitUntilXWindowHandles timed out polling window handles. Expected: ${x}, Actual: ${windowHandles.length}`,
+      `${errorMessages.waitUntilXWindowHandlesTimeout}. Expected: ${x}, Actual: ${windowHandles.length}`,
     );
   }
 
@@ -1200,7 +1225,40 @@ class Driver {
    * @throws {Error} throws an error if no window with the specified title is found
    */
   async switchToWindowWithTitle(title) {
-    return await this.windowHandles.switchToWindowWithProperty('title', title);
+    if (this.windowHandles) {
+      await this.windowHandles.switchToWindowWithProperty('title', title);
+      return;
+    }
+
+    let windowHandles = await this.driver.getAllWindowHandles();
+    let timeElapsed = 0;
+
+    while (timeElapsed <= this.timeout) {
+      for (const handle of windowHandles) {
+        // Wait 25 x 200ms = 5 seconds for the title to match the target title
+        const handleTitle = await retry(
+          {
+            retries: 25,
+            delay: 200,
+          },
+          async () => {
+            await this.driver.switchTo().window(handle);
+            return await this.driver.getTitle();
+          },
+        );
+
+        if (handleTitle === title) {
+          return;
+        }
+      }
+      const delayTime = 1000;
+      await this.delay(delayTime);
+      timeElapsed += delayTime;
+      // refresh the window handles
+      windowHandles = await this.driver.getAllWindowHandles();
+    }
+
+    throw new Error(`No window with title: ${title}`);
   }
 
   /**
@@ -1224,6 +1282,11 @@ class Driver {
    * @throws {Error} throws an error if no window with the specified URL is found
    */
   async switchToWindowWithUrl(url) {
+    if (!this.windowHandles) {
+      throw new Error(
+        'This is only supported when the Mocha background server is enabled',
+      );
+    }
     return await this.windowHandles.switchToWindowWithProperty(
       'url',
       new URL(url).toString(), // Make sure the URL has a trailing slash
@@ -1240,6 +1303,11 @@ class Driver {
    * @throws {Error} throws an error if no window with the specified URL is found
    */
   async switchToWindowIfKnown(title) {
+    if (!this.windowHandles) {
+      throw new Error(
+        'This is only supported when the Mocha background server is enabled',
+      );
+    }
     return await this.windowHandles.switchToWindowIfKnown(title);
   }
 
@@ -1341,46 +1409,6 @@ class Driver {
     }
   }
 
-  /**
-   * Switches to a window by its title without using the background socket.
-   * To be used in specs that run against production builds.
-   *
-   * @param {string} title - The target window title to switch to
-   * @returns {Promise<void>}
-   * @throws {Error} Will throw an error if the target window is not found
-   */
-  async switchToWindowByTitleWithoutSocket(title) {
-    const windowHandles = await this.driver.getAllWindowHandles();
-    let targetWindowFound = false;
-
-    // Iterate through each window handle
-    for (const handle of windowHandles) {
-      await this.driver.switchTo().window(handle);
-      let currentTitle = await this.driver.getTitle();
-
-      // Wait 25 x 200ms = 5 seconds for the title to match the target title
-      for (let i = 0; i < 25; i++) {
-        if (currentTitle === title) {
-          targetWindowFound = true;
-          console.log(`Switched to ${title} window`);
-          break;
-        }
-        await this.driver.sleep(200);
-        currentTitle = await this.driver.getTitle();
-      }
-
-      // If the target window is found, break out of the outer loop
-      if (targetWindowFound) {
-        break;
-      }
-    }
-
-    // If target window is not found, throw an error
-    if (!targetWindowFound) {
-      throw new Error(`${title} window not found`);
-    }
-  }
-
   // Error handling
 
   async verboseReportOnFailure(testTitle, error) {
@@ -1632,4 +1660,4 @@ function sanitizeTestTitle(testTitle) {
     .replace(/^-+|-+$/gu, ''); // Trim leading/trailing dashes
 }
 
-module.exports = { Driver, PAGES };
+module.exports = { Driver, PAGES, errorMessages };

test/e2e/webdriver/index.js

@@ -10,6 +10,7 @@ async function buildWebDriver({
   port,
   timeOut,
   proxyPort,
+  disableServerMochaToBackground,
 } = {}) {
   const browser = process.env.SELENIUM_BROWSER;
 
@@ -24,7 +25,13 @@ async function buildWebDriver({
     constrainWindowSize,
     proxyPort,
   });
-  const driver = new Driver(seleniumDriver, browser, extensionUrl, timeOut);
+  const driver = new Driver({
+    driver: seleniumDriver,
+    browser,
+    extensionUrl,
+    timeout: timeOut,
+    disableServerMochaToBackground,
+  });
 
   return {
     driver,