Browser 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',
 'tb:options': {
   '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',
 'tb:options': {
   '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',
 'tb:options': {
   '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();

Safari Browser Extension Testing

TestingBot allows you to upload a zip file containing your (unsigned) Safari Web Extension. Simply provide a URL to a zip file containing the extension, or upload the zip file on TestingBot Storage.

You can now specify the URL to this file in the load-extension capability. When your test starts on a remote Safari instance, the extension will be enabled by default.

UI Testing Safari Extensions

To test the UI of your Safari extension, you will need to know the safari-web-extension:// URI. As Safari can change this to a random UUID, you will need to use the tb:getExtensionId command in your test to determine the correct URI to use.

Safaridriver currently contains a bug that does not detect the load completion of a safari-web-extension:// request. To work around this, set the pageLoad timeout to a low value and catch any timeout error.

Please see the Ruby example below on how to run a UI test against a Safari Web Extension:

caps = Selenium::WebDriver::Remote::Capabilities.new
caps["browserVersion"] = "17.0"
caps["platformName"] = "SONOMA"
caps["browserName"] = "safari"

caps["tb:options"] = {
  "load-extension": "tb://...safari-extension-path..."
}

driver = Selenium::WebDriver.for(
  :remote,
  :url => "https://api_key:api_secret@hub.testingbot.com/wd/hub",
  :options => caps)

# first navigate to a random page
driver.navigate.to "http://www.google.com/ncr"

# set the pageload timeout low enough
driver.manage.timeouts.page_load = 5

# get the unique Safari Extension URI
extension_id = driver.execute_script("tb:getExtensionId")

begin
  # navigate to the URI with the necessary URI path (depending on how your extension is structured)
  driver.navigate.to "#{extension_id}popup/index.html"
rescue Exception => e
  # catch the timeout exception, but continue
  p e.inspect
end

# Get a list of window handles
window_handles = driver.window_handles

# Switch to the first window handle
driver.switch_to.window(window_handles.first)

# Now you can interact with the extension. For example, fetch the HTML source
p driver.page_source

driver.quit

Older Safari versions

For Safari versions up to Safari 12, you can use a .safariextz format, in a zip file, to run and test Safari extensions.