Programmatically reloading extension

[pedronfigueiredo]

At the moment we rely on manipulating the chrome://extensions/ page DOM. This is suboptimal because there could be changes in the future that would break any tests relying on reloading chrome extensions in the future.

More importantly, this makes the test chrome specific, but we'll need to support and test for MV3 for Firefox in the not too distant future.

One approach we tried

We used the following approach but browser.runtime.reload(); didn't cause the SW to restart.

On test/e2e/helpers.js

async checkBrowserForEvents() {
  const cdpConnection = await this.driver.createCDPConnection('page');

  await this.driver.onLogEvent(cdpConnection, (event) => {
    event.args.forEach((eventArg) => {
      console.log(`[log event]: ${JSON.stringify(eventLog)}`);

      // we should probably use `eventArg.value` here so that `waitForLogEvent`
      // works properly, or change the implementation there.
      this.events.push(eventArg);
    });
  });
}

On test/e2e/helpers.js

async waitForLogEvent(eventName, timeout = this.timeout) {
  await this.wait(this.events.includes(eventName), timeout);
}

On the test:

async function reloadProgramatically(driver) {
  await switchToWindow(driver, WINDOW_TITLES.ExtensionInFullScreenView);
  await driver.executeScript('window.stateHooks.refreshBrowser()');
  await driver.waitForLogEvent('Service Worker Restarted');
  await driver.executeScript('window.location.reload()');
}

On test/e2e/helpers.js

await driver.checkBrowserForEvents();

On ui/index.js

  window.stateHooks.refreshBrowser = function () {
    if (process.env.IN_TEST) {
      browser.runtime.reload();
    }
  };