End-to-end testing of browser extensions

Before you can start testing on a browser extension, you will first have to instruct the browser you are using to test, to install the extension. The way you install an extension automically depends on the browser you are using.

Using TestingBot

TestingBot has created a very easy way to make sure a browser extension is installed before starting an automated test. You can simply zip the files required for the extension (for example a .crx, .xpi, .safariextz or Safari Web Extension) and specify a custom load-extension capability to instruct the TestingBot browsers to install the extension.

As soon as the Selenium web test starts, you will see that the extension is preloaded in the browser.

Adding a browser extension with your Selenium test

If you are running a test locally, you can specify these two flags for Chrome-based tests:

• --load-extension=...path-to-extension...
• --disable-extensions-except=...path-to-extension...

For Firefox tests, you can add an addon to a custom Firefox profile:

FirefoxProfile profile = new FirefoxProfile();
profile.addExtension(new File("testingbot.xpi"));
options.setProfile(profile);

If you don't want to use the profile option, there's also a specific geckodriver URL that you can use that will accomplish the same thing:

curl -X POST http://127.0.0.1/session/../moz/addon/install' -d '{"path":"...","temporary":true}'

With Safari, it is much more difficult to automatically install a browser extension. To do this, you will need to use AppleScript (osascript) to instrument Safari and have it install the extension.

Edge has a addExtensions method to use packed extensions(.crx files) or use load-extension=... for unpacked extensions.

Selenium allows you to automate the browser, by providing functionality such as navigating to a page, checking the contents, clicking elements, etc. It is however not possible to interact with elements outside of the actual webview of the browser. This means you can not click the extension in the browser toolbar and interact with the extension's UI.

A solution to still perform automated testing against browser extension is to load the extension as a URL. These extensions can then be tested, by instructing your Selenium WebDriver test to open the extension's page. This way you can perform automated UI testing for browser plugins.

Testing Chrome Extensions

For example, on Chrome you would open the URL with the unique identifier of the extension you want to test: chrome-extension://<id>/index.html.

Please see the example below on how to run a sample Selenium test on TestingBot with a Chrome extension. TestingBot will install the extension and your test will open the extension's popup page to perform verifications.

const webdriver = require('selenium-webdriver');
const capabilities = {
 'platform' : 'WIN10',
 'browserName' : 'chrome',
 'version' : 'latest',
 'load-extension': 'https://...path..to..extension'
}
async function runTest () {
  let driver = new webdriver.Builder()
    .usingServer('https://api_key:api_secret@hub.testingbot.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get('chrome-extension://paaamahlcokbnafoiahanekijojkhbdm/popup/index.html');
  const element = await driver.findElement(By.css('#environments'));
  const isElementDisplayed = await element.isDisplayed();
  if (isElementDisplayed) {
    console.log('Element is present on the page.');
  } else {
    console.log('Element is not present on the page.');
  }
  await driver.quit();
}
runTest();

To learn more about testing extensions and the extension id, please see end-to-end testing of Chrome extensions.

Testing Firefox Addons

Just as you would test a Chrome extension, you can open the Firefox addon in a new tab by utilizing the moz-extension scheme.

moz-extension://3d9b1639-77fb-44a1-888a-6d97d773e96b/popup/index.html

Once the Firefox addon is loaded, your test can interact with it.

Please see the example below on how to run a sample Selenium test on TestingBot with a Chrome extension. TestingBot will install the extension and your test will open the extension's popup page to perform verifications.

const webdriver = require('selenium-webdriver');
const capabilities = {
 'platform' : 'WIN10',
 'browserName' : 'firefox',
 'version' : 'latest',
 'load-extension': 'https://...path..to..extension'
}
async function runTest () {
  let driver = new webdriver.Builder()
    .usingServer('https://api_key:api_secret@hub.testingbot.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get('moz-extension://3d9b1639-77fb-44a1-888a-6d97d773e96b/popup/index.html');
  const element = await driver.findElement(By.css('#environments'));
  const isElementDisplayed = await element.isDisplayed();
  if (isElementDisplayed) {
    console.log('Element is present on the page.');
  } else {
    console.log('Element is not present on the page.');
  }
  await driver.quit();
}
runTest();

Testing Safari Extensions

TestingBot allows you to upload your (unsigned) Safari Web Extension and have this extension installed and activated at the start of your Safari test. You can then test any website with the extension loaded, and even perform UI tests against your Safari Web Extension.

More information available in the Safari Web Extension Testing documentation.

The older .safariextz based extensions can be tested as well, on Safari 12 or lower.

Puppeteer allows for testing Chrome extensions. Please see the example below on how to do this.

import puppeteer from 'puppeteer';
import path from 'path';

(async () => {
  const pathToExtension = path.join(process.cwd(), 'testingbot-extension');
  const browser = await puppeteer.launch({
    headless: 'new',
    args: [
      `--disable-extensions-except=${pathToExtension}`,
      `--load-extension=${pathToExtension}`,
    ],
  });
  const backgroundPageTarget = await browser.waitForTarget(
    target => target.type() === 'background_page'
  );
  const backgroundPage = await backgroundPageTarget.page();
  await browser.close();
})();

This will instruct the local (headless) Chrome browser to load the specified extension. It will then wait for the background page to be available.

Similar to the Selenium + Chrome extension example, you can also open the extension's page using Puppeteer and interact with the page.

Remote Puppeteer Browser Extension Testing

TestingBot provides Browser Extension Testing with Puppeteer. First upload your Chrome extension to TestingBot storage, then use the load-extension capability to instruct the remote Chrome browser to use the extension.

TestingBot provides Playwright Browser Extension Testing on Chrome, Edge and Firefox. Simply provide the load-extension capability to test on a remote browser that has your extension installed and activated.

For Chromium based browsers, your test script will need to use CDP to connect to the remote browser. This is currently the only limitation, because of how Playwright handles profiles.

const pw = require('playwright-core')

(async () => {
  const tbCapabilities = {
    browserName: 'firefox',
    platform: 'LINUX',
    key: process.env.TB_KEY,
    secret: process.env.TB_SECRET,
   'load-extension': 'tb://path-to-extension',
   'firefoxExtensionMap': {
      'addon@testingbot.com': '3d9b1639-77fb-44a1-888a-6d97d773e96b'
    }
  }
  const wsEndpoint = `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(
    JSON.stringify(tbCapabilities)
  )}`;

  const browser = await pw.chromium.connect({
    wsEndpoint
  })
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('moz-extension://3d9b1639-77fb-44a1-888a-6d97d773e96b/src/pages/popup/index.html')

  await browser.close()
})();

To run UI tests against a Firefox extension, please supply firefoxExtensionMap to set the UUID of the extension to a fixed value. You can then use this same value with moz-extension:// to start testing the UI of your extension.