Features

Browser Extension

While running Automated tests, you might want to have a browser extension installed. Below is you can find information on how to add a browser extension to a Chrome, Firefox, Edge or Safari browser running in the TestingBot cloud.

To get started, make sure you have the extension file ready, then upload it either to a public URL or use the TestingBot Storage.

Once you have a URL, you can specify the load-extension capability. This will instruct the remote TestingBot browsers to download the extension and add it to the browser at startup.

Example:
"load-extension" : "https://..."
Example (Selenium 4):
"tb:options" : {
  "load-extension" : "https://..."
}
Browser Supported Format(s) Example
Chrome
  • .zip file, containing the extension source code (manifest.json, src/ directory, ...)
  • .crx file
  • https://.../extension.zip
  • tb://sample-extension
Firefox
  • .zip file, containing the extension source code (manifest.json, src/ directory, lib/ directory, ...)
  • .xpi file,
  • https://.../extension.zip
  • tb://sample-extension
Edge
  • .zip file, containing the extension source code (manifest.json, src/ directory, ...)
  • .crx file
  • https://.../extension.zip
  • tb://sample-extension
Safari (and Safari Technology Preview) .safariextz file
  • https://.../extension.safariextz
  • tb://sample-extension

TestingBot Storage

With TestingBot Storage, you can upload your extensions to the TestingBot servers.
The advantage of this is that our test VMs can immediately download your extension from the TestingBot network, which is much faster than downloading from the public internet.

The API call will return a unique identifier, similar to tb://efe932jfk.
You can then use this identifier with the capability: "load-extension" : "tb://..."

Chrome Browser Extension Testing

Once you've specified "load-extension", the Chrome browser will start up with the extension preloaded. You can now run your Selenium tests while the extension is active on the remote browser.

UI Testing Chrome Extensions

To test the UI of your Chrome extension, you can have your Selenium test navigate to a chrome-extension:// URL.
For example, if the ID of your addon is paaamahlcokbnafoiahanekijojkhbdm, you can navigate to chrome-extension://paaamahlcokbnafoiahanekijojkhbdm.

Please see the NodeJS example below for a complete rundown on how to test the UI of your Chrome extension:

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();

Firefox Browser Extension Testing

You can specify the URL to a xpi file in the load-extension capability. This will make sure the Firefox browser has the extension installed (as a temporary extension) at the start of the Selenium test.

UI Testing Firefox Extensions

If you want to test the UI of your Firefox extension, the moz-extension:// URL, you will need to specify the extension ID in the URL.
Because TestingBot installs the extension as a temporary extension, the id will always be different as it is generated as a random uuid(4).

TestingBot provides a capability to hardcode your Firefox exension to a fixed uuid which you've generated, by using the firefoxExtensionMap capability. To use this, you could set the ID in the manifest.json of the extension:

"browser_specific_settings": {
  "gecko": {
    "id": "addon@testingbot.com",
    "strict_min_version": "109.0"
  }
}

You can now link the gecko id to a uuid you've generated:

const webdriver = require('selenium-webdriver');
const capabilities = {
 'platform' : 'WIN10',
 'browserName' : 'chrome',
 'version' : 'latest',
 'load-extension': 'https://...path..to..extension',
 'firefoxExtensionMap': {
    'addon@testingbot.com': '3d9b1639-77fb-44a1-888a-6d97d773e96b'
  }
}
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();

Edge Browser Extension Testing

Once you've specified "load-extension", the Edge browser will start up with the extension preloaded. You can now run your Selenium tests while the extension is active on the remote Edge browser.

UI Testing Edge Extensions

To test the UI of your Edge extension, you can have your Selenium test navigate to a chrome-extension:// or extension:// URL.
For example, if the ID of your addon is paaamahlcokbnafoiahanekijojkhbdm, you can navigate to extension://paaamahlcokbnafoiahanekijojkhbdm.

Please see the NodeJS example below for a complete rundown on how to test the UI of your Chrome extension:

const webdriver = require('selenium-webdriver');
const capabilities = {
 'platform' : 'WIN10',
 'browserName' : 'microsoftedge',
 '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('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();