Testing Chrome Extensions with Selenium

You can add new features to Chrome by installing extensions and you can also build your own extension.

A quick look through the Chrome Web Store shows us that you can find an extension for almost anything.

The awesome part is that you can create new extensions for Chrome with core technologies such as HTML, CSS, and JavaScript.

If you want to create automated tests for that extension, you can easily do it with Selenium and I'm going to show you how.

I'll also be making some comparisons between Selenium and Endtest:

The problem is that Selenium is limited to the viewport of the browser and extensions are outside of the viewport.

This means that we need a sneaky way to access that extension like we would access a web page.

The first step is to install the Chrome Extension Source Viewer from the Google Web Store.

After you install it, go to the URL for your Chrome extension from the Chrome Web Store and you'll notice that the CRX extension icon in the top right corner takes on a yellow color.

Note: the CRX might also be a local file which hasn’t been uploaded to the Chrome WebStore. In this case, you’ll need to manually install it by dragging the CRX file into Chrome://extensions page and clicking Add.

Now, click on that CRX yellow icon and select the View source option.

And here is the source for the Office Online extension:

Now we need to identify the page that we want to test. We can access that page by providing the URL for it, which is made up of the extension ID and the name of the page.

chrome-extension://ID/name_of_page.html

Go to the chrome://extensions section and look for your extension ID.

In our case, the URL for that page is going to be:
chrome-extension://ndjpnladcallmjemlbaebfadecfhkepb/index.html

And here it is, we can now access the extension in the viewport:

This means that we can Inspect the elements and get the relevant locators for them.

Download the CRX extension by using the Download as zip option from the Chrome Extension Source Viewer extension.

You're going to need to load that ZIP file when starting the chromedriver, with the add_extension method.

And here is the actual Python code:

Please note that the extension loads with the default page of the extension, so you only need to add the driver.get(url) step if you want to start your test from a different extension page.

And if you're too lazy to write that code, you can just use Endtest:

Comments

[peter279k]

When I use the ChromeDriver 83.x version, it seems that the ChromeDirver doesn't allow to use add_extension method to load unpacked chrome extension.

When I use packed Chrome extension CRX file to load extension via add_extension method, it's worked successfully.

[Terence Chow]

You can use

chromeOptions.add_argument('--load-extension=' + UNPACKED_EXTENSION_PATH)

for unpacked extensions

[peter279k]

Thanks, and this issue I've resolved with loading unpacked Chrome extension directly.