Selenium is a popular tool for testing web applications by automating user interactions on the browser. However, testing browser extensions is challenging since they operate outside the scope of the browser. In this article, we will discuss how to use Selenium to interact with pages and DOM elements created by the extension. While all major browsers support some sort of extensions, we’ll focus specifically on the most popular -- chrome extensions.

Setting up Selenium WebDriver

Before you start integrating the Chrome extension with Selenium WebDriver, you need to learn how Selenium interacts with a specific browser. Selenium uses a component called WebDriver when interacting with browsers. The WebDriver uses the automation API provided by the vendor of each browser to interact with the browser in the same way an actual user would.

Selenium supports Chrome or Chromium browsers using the chromedriver, which is compatible with Windows, macOS, and Linux environments. First, download and install the chromedriver following the instructions from this driver requirements page.

Then, let's test if the WebDriver is configured correctly by importing the chromedriver into a Selenium automation script, as shown below.

The example is based on the Windows environment using the Python programming language. We assume that as a prerequisite, you are able to work with Selenium in your preferred environment using your preferred programming language, and we will focus only on how to use chrome extension from here on.

Import chromedriver from Path

from selenium.webdriver import Chrome

 

driver = Chrome()

driver.get("http://www.google.com")

element = driver.find_element_by_name("q")

element.send_keys("Hello World")

In the above code block, you import the chromedriver from the system PATH and navigate to the Google search engine, and enter the phrase “Hello World”.

RESULT

Adding a Chrome Extension

Now you have the knowledge on how to set up Selenium to connect to a browser. In this section, you will see how to add a Chrome Extension to a Selenium test case.

First, you need to download the CRX file of a chrome extension. You can download this extension file by visiting the Chrome Extension Downloader page or using the CRX Extractor/Downloader plugin and entering the Chrome Web Store URL of the extension there. The links of the Chrome Extension Downloader page and CRX Extractor/Downloader plugin are as follows.

Then, let’s use the CRX Extractor plugin to download the CRX file of the “iMacros for Chrome” extension, as shown below.

Downloading the CRX File

If you are using a user-created extension, you can skip the extension download and just use the packaged CRX file from your source code.

Next, you need to understand the file structure of the extension. There are two methods available for that. The first method is to use an file archive utility such as 7zip to extract the CRX file contents, as shown in the below screenshot.

The second method is to use an extension called “Chrome extension source viewer” (Find the link to Chrome extension source viewer here). This extension allows users to import the CRX file and view its contents within the browser.

The cool thing about this extension is that you can directly view the source of an extension by simply providing the Chrome Web Store URL of a specific extension.

Using either of the above methods, you can see the content of the Chrome Extension and identify the HTML pages within that. The following screenshot shows what you can get through the CRX file of “iMacros for Chrome'' extension using the “Chrome extension source viewer” plugin.

There, you can see that the “iMacros for Chrome'' extension contains all the JavaScript, HTML, CSS, and any other files required for functionality. From here on, you just need to identify which HTML files are required for testing. In the above example, the panel.html is identified as the file that is used for testing with Selenium.

Identifying the Unique Extension ID

Before creating the Selenium Test case, you need to find out the unique ID of the extension. If the extension is available in the Chrome Web Store, the unique ID will be the last part of the extension page URL, as shown below.

If the extension is a user-created or a local file, you need to first install the extension and check the unique ID via the extensions section of Chrome (chrome://extensions/).

This unique ID will be used when indicating the specific page URL within the extension using the following format. The “chrome-extension” prefix indicates that the URL refers to an internal extension rather than a website.

chrome-extension://<Unique ID>/<Specific Page>.html

Writing the Selenium Test Automation Script

Now, we have come to the interesting part, which is creating the automation script. This simple script aims to navigate and install the extension within chrome and then navigate to the installed extension.

In the code block below, you are creating a webdriver by indicating the chromedriver installation path and setting up the extension using the add_extention method in the selenium.webdriver.chrome.options module.

from selenium import webdriver

from selenium.webdriver.chrome.options import Options

# chromedriver Path

path = r"F:\testing_\w_ebdriver\chromedriver_._exe"

# Set Chrome Options

chrome_options = Options()

# Add the Chrome Extension

chrome_options.add_extension(r"cplklnmnlbnpmjogncfgfijoopmnlemp_._crx")

# Create the Driver

driver = webdriver.Chrome(_executable_path_=path,_options_=chrome_options)

# Navigate to the Extension

driver.get('chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/panel.html')

# Interact with an Element

element = driver.find_element_by_xpath('//*[@id="record-tab-label"]')

element.click()

After creating the driver, you have to call the extension path with its unique ID using the get method. This will auto navigate the browser to the location of the extension. Then using the XPath attribute, click on the “RECORD” button as shown below.

Now let’s see how to create the same test case using other programming languages.

C#

using _NUnit_._Framework_;

using _OpenQA_._Selenium_;

using _OpenQA_._Selenium_._Chrome_;

using _System_;

namespace _SeleniumTest_

{

    public class Tests

    {

        _String_ testURL = "chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/panel.html";

        _IWebDriver_ driver;

  

        [_SetUp_]

        public _void_ start_Browser()

        {

            _ChromeOptions_ options = new _ChromeOptions_();

            options.AddExtensions("F:\\testing\\cplklnmnlbnpmjogncfgfijoopmnlemp.crx");

            driver = new _ChromeDriver_("F:\\testing\\webdriver", options);

        }

        [_Test_]

        public _void_ test_search()

        {

            driver.Url = testURL;

            _IWebElement_ element = driver.FindElement(By.XPath("//*[@id='record-tab-label']"));

            element.Click();

            System.Threading.Thread.Sleep(1000);

        }

    }

}

Java

import java.io.File;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.chrome.ChromeOptions;

public class TestingClass {

    public static _void_ main(String[] _args_) {

        System.setProperty("webdriver.chrome.driver","F:\\testing\\webdriver\\chromedriver.exe");

        ChromeOptions options = **new** ChromeOptions();

        options.addExtensions(**new** File("F:\\testing\\cplklnmnlbnpmjogncfgfijoopmnlemp.crx"));

        

        

        WebDriver driver = **new** ChromeDriver(options);

        

        String testURL = "chrome-extension://cplklnmnlbnpmjogncfgfijoopmnlemp/panel.html";

        driver.get(testURL);

        WebElement element = driver.findElement(By.xpath("//*[@id='record-tab-label']"));

        element.click();

        

    }

}

Conclusion

In this article, you’ve learned how to utilize the Selenium testing framework to automate a browser extension testing scenario. Selenium's wide-ranging support for multiple languages and all major browsers facilitate users to create automated tests using a programming language familiar to them while also supporting multiple platforms and environments.