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.