Testing Chrome Extensions with Selenium
Tags: testing, webdev, javascript, productivity
Published: 2019-01-28 15:29:51

---
title: Testing Chrome Extensions with Selenium
published: true
description: Testing extensions for Google Chrome 
tags: testing, webdev, javascript, productivity
---

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](https://chrome.google.com/webstore/category/extensions) shows us that you can find an extension for almost anything. 

![Chrome Web Store](https://i.imgur.com/vPuwFss.png)

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](https://endtest.io)**:
{% youtube 4DIVKcs--TA %}

The problem is that Selenium is limited to the viewport of the browser and extensions are outside of the viewport.
![Chrome Extension Selenium](https://i.imgur.com/XrfrrYw.png)

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](https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin) 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](https://i.imgur.com/tZ6w8fO.png)

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](https://i.imgur.com/xqwAiRk.png)

And here is the source for the **Office Online** extension:
![Office Online Chrome Extension Source](https://i.imgur.com/vTYvDfk.png)

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](https://i.imgur.com/CzU9YNL.png)

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](https://i.imgur.com/HVLyfe0.png)

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](https://i.imgur.com/cnlHspE.png)

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](https://i.imgur.com/X1H51S7.png)

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](https://endtest.io):
![Endtest Extension](https://i.imgur.com/rYaK5fn.png)