Features
Start a free trial

Testing Browser Extensions with Playwright

Testing browser extensions on Chrome, Edge and Firefox is possible with the combination of Playwright and TestingBot.
Please see the information below on how to load the extension before your test starts and how to perform UI testing with Playwright against these extensions.

Currently these types of extensions are supported:

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

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 with Playwright

You can test your .crx extension by uploading the extension and using the URL of the extension with a load-extension capability.

Because of Playwright limitations, we will need to use CDP to connect to Chrome based browsers in order to load extensions. 

const pw = require('playwright-core')

(async () => {
  const browser = await pw.chromium.connectOverCDP('wss://cloud.testingbot.com/?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest&load-extension=tb://path-to-extension')
  const defaultContext = browser.contexts()[0]
  const page = defaultContext.pages()[0]

  await page.goto('https://www.google.com')
  // test if your extension does something

  await browser.close()
})();

UI Testing Chrome Extensions

You can test the UI and functionality of your extension in a remote Chrome browser. 

const pw = require('playwright-core')

(async () => {
  const tbCapabilities = {
    browserName: 'chrome',
    platform: 'LINUX',
    key: process.env.TB_KEY,
    secret: process.env.TB_SECRET,
   'load-extension': 'tb://path-to-extension'
  }
  const wsEndpoint = `wss://cloud.testingbot.com/?capabilities=${encodeURIComponent(
    JSON.stringify(tbCapabilities)
  )}`;

  const browser = await pw.chromium.connectOverCDP(wsEndpoint)
  const defaultContext = browser.contexts()[0]
  const page = defaultContext.pages()[0]

  await page.goto('chrome-extension://lliapakmekmldfaphofjcnbccemlgeoa/src/pages/popup/index.html')

  await browser.close()
})();

Firefox Browser Extension Testing with Playwright

To test your .xpi extension, you can specify a public URL or a TestingBot Storage URL in the load-extension capability. 

const pw = require('playwright-core')

(async () => {
  const browser = await pw.firefox.connect({
    wsEndpoint: 'wss://cloud.testingbot.com/playwright?key=api_key&secret=api_secret&browserName=firefox&browserVersion=latest&load-extension=tb://path-to-extension'
  })
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.google.com')
  // test if your extension does something

  await browser.close()
})();

UI Testing Firefox Extensions

You can test the UI and functionality of your extension in a remote Mozilla Firefox browser.

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: 

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

Edge Browser Extension Testing with Playwright

You can test your Microsoft Edge extension by uploading the extension and using the URL of the extension with a load-extension capability.

Because of Playwright limitations, we will need to use CDP to connect to Edge based browsers in order to load extensions. 

const pw = require('playwright-core')

(async () => {
  const browser = await pw.chromium.connectOverCDP('wss://cloud.testingbot.com/?key=api_key&secret=api_secret&browserName=microsoftedge&browserVersion=latest&load-extension=tb://path-to-extension')
  const defaultContext = browser.contexts()[0]
  const page = defaultContext.pages()[0]

  await page.goto('https://www.google.com')
  // test if your extension does something

  await browser.close()
})();

UI Testing Edge Extensions

You can test the UI and functionality of your extension in a remote Edge browser. 

const pw = require('playwright-core')

(async () => {
  const tbCapabilities = {
    browserName: 'edge',
    platform: 'WIN10',
    key: process.env.TB_KEY,
    secret: process.env.TB_SECRET,
   'load-extension': 'tb://path-to-extension'
  }
  const wsEndpoint = `wss://cloud.testingbot.com/?capabilities=${encodeURIComponent(
    JSON.stringify(tbCapabilities)
  )}`;

  const browser = await pw.chromium.connectOverCDP(wsEndpoint)
  const defaultContext = browser.contexts()[0]
  const page = defaultContext.pages()[0]

  await page.goto('extension://lliapakmekmldfaphofjcnbccemlgeoa/src/pages/popup/index.html')

  await browser.close()
})();