How to automate add-on option screen tests?

Add-ons Development
1

Does anyone have a way to perform automated integration tests which work with an add-on’s option screen?
I’d like to have automated tests which interact with my add-ons options screen. I’ve worked out how to do this with Chrome but I’m struggling with Firefox.
I know the URL will be moz-extension://<unique id>/options.html but I dont know how to get that ID in my tests.
I can see the ID in the extensions.webextensions.uuids pref, but I don’t know how to make use of that.
Any suggestions?

2

You can get absolute path using:

browser.runtime.getURL('options.html')
// returns  "moz-extension://09b6e62a-d103-42b4-9011-e859308bf2a0/options.html"

Although, I’m not sure this is actually helpful since you probably can’t access this API from your test framework, right?

In my tests, I’m opening Options page using in-app buttons (like if user opened it manually).
Alternatively, as a workaround, you could generate the URL in your addon and place it in some dummy element/attribute and then read it in the test.

3

So simple :stuck_out_tongue: Many thanks!

1 Like
4

Ah, just read the rest of your comment and yeah, I cant access that API in my tests.
How are you opening the Options page via in-app buttons? I’ve tried doing that but not got it to work yet…

5

Well, my addon is overriding new tab page, so all I have to do is open new tab page, and that will open the main “app”. And from there I’ll do what user would do - click the main menu (in the app) and select “Options”.

I realize now that my special case makes it much easier.
I’m also realizing I’m no expert on tests :smiley:.
We may need someone more skilled here! (in the meantime I’ll try to think of a workaround…)

6

OK, looking at my tests - currently for Chrome, but similar method should work on Firefox, I’m extracting the UUID from the background script URL:

const targets = this.browser.targets();
const extensionTarget = targets.find(target => target.type() === 'service_worker');
//const backgroundPageTarget = targets.find(target => target.type() === 'background_page');
const partialExtensionUrl = extensionTarget?.url() || '';
const [, , extensionId] = partialExtensionUrl.split('/');
this.dialsUrl = `chrome-extension://${extensionId}/dial.html`;
this.popupUrl = `chrome-extension://${extensionId}/popup/popup.html`;

I’m using Puppeteer for testing.

7

I’m running on an empty tank of gas today, but I may still have a couple of suggestions.

If your extension has an on-boarding page after installation, you could grab the URL of the page opened by the extension at the beginning of your test suite and use that to construct an ID for the options page.

Alternatively, depending on the test framework you’re using, you may be able to open a tab to about:debugging#/runtime/this-firefox and crawl the DOM to extract the Internal UUID or Manifest URL in order to construct the options page at runtime.

If you’re using WebDriver, you may be able to use the Firefox-specific installAddOn() method to install an add-on and get it’s ID. Unfortunately it’s not clear to me at the moment whether the ID returned is only useful for calling uninstallAddon() later or if the value returned can be used to construct the extension ID.

I think you can also use keyboard input in your test framework of choice (WebDriver, Puppeteer) to trigger a keyboard shortcut in your extension (Commands API).

Aaand that’s all I’ve got for now. Good luck!

1 Like