Features

End-to-end testing of browser extensions

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews

Selenium is a browser automation framework that allows you to test websites on multiple browsers. One common use case for running browser tests is to test browser extensions. Browser extensions are programs that you can install in your browser to extend its functionality. Next to Selenium, both Puppeteer and Playwright also provide functionality to install and test browser extensions.


All major browsers support extensions: Chrome through its Chrome Web Store, Microsoft Edge with their Edge Extensions, Firefox with Firefox Addons and Safari Extensions.

TestingBot provides its own Browser Extension which can be installed on your Chrome or Firefox browser, for free. It allows you to easily test your website(s) on multiple browsers.

Installing a Browser Extension with Selenium

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:

Copy code
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:

Copy code
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.

Running tests against a Browser Extension with Selenium

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.

Copy code
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.

Copy code
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.

Copy code
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.

Using Puppeteer for extension testing

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

Copy code
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.

Using Playwright for browser extension testing

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.

Copy code
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.

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on HackerNews
TestingBot Logo

Sign up for a Free Trial

Start testing your apps with TestingBot.

No credit card required.

Other Articles

The best Python Web Testing frameworks

A top 5 of the best Python Test Frameworks available for automated website testing.

Read more
Cucumber testing with Selenium and IntelliJ or Eclipse

Find out how to run Cucumber tests with Selenium straight from your own IntelliJ or Eclipse IDE.

Read more
Selenium & ElementClickInterceptedException

What is an ElementClickInterceptedException and how can you avoid it?

Read more
Record tests with Playwright

Learn how to use a Playwright Recorder to easily record tests.

Read more
Testing with React and Selenium

Learn how to run Selenium tests against a React based website.

Read more
How to fix Flaky Tests

Learn about Flaky Tests: why they happen and how to fix these, with various examples.

Read more