DEV Community

Klaus
Klaus

Posted on • Edited on

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.

Chrome Web Store

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.
Chrome Extension Selenium

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.

Chrome Extension Selenium

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.
CRX View Source

And here is the source for the Office Online extension:
Office Online Chrome Extension Source

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.
Chrome extensions

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:
Chrome Office Online extension

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.
CRX Download as zip

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:
Selenium 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:
Endtest Extension

Top comments (3)

Collapse
 
peter279k profile image
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.

Collapse
 
tboosters profile image
Terence Chow

You can use

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

for unpacked extensions

Collapse
 
peter279k profile image
peter279k

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