How to test Chrome extensions in Selenium

With Continuous Integration (CI) and Continuous Delivery (CD) becoming standard practices in software development process, automation testing has been established as a key component in testing processes. Testing tools and techniques are consciously and continuously geared towards automation, with the aim of making testing faster, easier and more accurate.

However, there are certain actions that can be more difficult to automate. For example, automating the testing of browser extensions can pose difficulties.

This article attempts to explore those difficulties and provide a few solutions.

Why Use Chrome Driver to test a Chrome extension with Selenium?

Before getting into understanding how you can test a Chrome extension using Selenium, you should have an idea of what a ChromeDriver is and why it is required.

ChromeDriver is a tool for enabling automated test scripts to control the Google Chrome browser.

It serves as a bridge between the Selenium WebDriver framework and the Chrome browser. Since Selenium does not directly control browsers, it sends commands via a

browser-specific driver. The ChromeDriver translates Selenium’s commands for Chrome to understand.

How to Set up Chrome Driver

Here are the steps that you can follow to install Chrome Driver

Step 1: Check Your Google Chrome Version: Visit chrome://settings/help and note the version number (e.g., 136.0.7103.48).

Step 2: Download the Matching ChromeDriver: Visit https://chromedriver.chromium.org/downloads , select the version that matches your Chrome browser, and download the file for your operating system:

• .zip file for Windows
• .tar.gz or .zip for macOS/Linux

Step 3: Extract the File: Unzip the downloaded file to obtain the following:

• chromedriver.exe on Windows
• chromedriver binary on macOS/Linux

Step 4: Move ChromeDriver to a System Path Folder

For Windows:

• Create a folder like C:\WebDriver\bin.
• Move chromedriver.exe into it.
• Add that folder to your System PATH:
• Go to System Properties > Environment Variables.
• Under System Variables, Path > Edit > Add C:\WebDriver\bin.

For macOS/Linux:

Open Terminal and run:

sudo mv chromedriver /usr/local/bin/

sudo chmod +x /usr/local/bin/chromedriver

Step 5: Verify Installation:

Open a terminal or command prompt to input:

chromedriver --version

Once this is entered you’d see:

ChromeDriver 123.0.6312.86

With this, the Chrome Driver is all set to be used with Selenium.

How to test a Chrome extension with Selenium?

1. Download Chrome Extension

Get the webstore URL or extension ID from Google Web Store. Now enter the URL/ID into the main field on this page: https://chrome-extension-downloader.com/

Click Download. Save the CRX file. Store the file in the same location as your script.

2. Download the Chrome Extension Source Viewer from the Google Web Store.

3. View source of the CRX file

Go to the Chrome Extensions in the Google Web Store. Click the yellow icon in the browser. Go to View Source. If the CRX file is not displayed in the Web Store, the source file can be viewed manually. Just click here and upload the CRX file.

A list of all resources (javascript, images, etc.) and pages available in the CRX should be displayed.

4. Identify the page to be tested

To locate a specific page, extract the unique ID of the CRX in the Chrome Extension. Here’s how.

• First, get the unique ID of the Chrome Extension. Right-click on it and select Options.
• The user will be directed to their unique ID page URL: chrome-extension://UNIQUEID/options.html
• Go back to the CRX resource list. Select the specific page for testing: SPECIFICPAGE.HTML.
  Change options.html with the specific page on the unique URL. Example:
  Change chrome-extension://UNIQUEID/options.html to chrome-extension://UNIQUEID/SPECIFICPAGE.html
• Copy this URL. It will be required later in the Webdriver code.

5. Initiate Selenium script to create a new ChromeDriver

Enter the Chrome Extension into ChromeDriver. ChromeDriver is a standalone server that implements WebDriver’s wire protocol. To do this, new code needs to be added to the beginning of the script when creating the browser object.

Run Selenium Tests on Real Devices

Here’s the syntax for this code in a number of languages often used in Selenium Webdriver scripts:

Java

ChromeOptions options = new ChromeOptions ();

options.addExtensions (new File("/path/to/extension.crx"));

DesiredCapabilities capabilities = new DesiredCapabilities ();

capabilities.setCapability(ChromeOptions.CAPABILITY, options);

ChromeDriver driver = new ChromeDriver(capabilities);

Python

chop = webdriver.ChromeOptions()

chop.add_extension(EXTENSION_PATH)

# create new Chrome driver object with Chrome extension

driver = webdriver.Chrome(chrome_options=chop)

Javascript

var chromeOptions = webdriver.Capabilities.chrome();

chromeOptions: [

binary: '/Applications/GoogleChrome.app/Contents/MacOS/Google Chrome',

args: [ ],

extensions: ['EXTENSION_LOCATION.crx']

]

var driver = new webdriver.Builder().

withCapabilities(chromeOptions).

build();

PHPunit

//Setting extensions is also optional

$options->addExtensions(array(

'extension_location.crx',

));

$caps = DesiredCapabilities::chrome();

$caps->setCapability(ChromeOptions::CAPABILITY, $options);

$driver = RemoteWebDriver::create($url, $caps);

6. Navigate to The ChromeDriver Website Page

The syntax to do this is below:

driver.get('chrome-extension://UNIQUEID/SPECIFICPAGE.html');

After doing this, the tester can interact with and test the extension as they would a normal HTML webpage.

Often, an iFrame will be included in the HTML file. Switching the focus to the iFrame is easy, depicted in the examples below:

PHPunit

$this->selectFrame("FRAME_NAME");

Python

driver.switch_to.frame("FRAME_NAME");

JavaScript

driver.switchTo().frame("FRAME_NAME");

Java

driver.switchTo().frame("FRAME_NAME");

Here, FRAME_NAME refers to Id, name, xpath, css_selector and other element locators.

Challenges of testing Browser Extensions

Browser extensions are embedded add-ons, not regular HTML files. Since the extension is out of scope, it is not possible to simulate user actions such as clicks and scrolls, inspect web elements, etc.

Normally websites can be easily tested by automating user actions with Selenium. But in order to automate actions on a browser extension, testers have to identify where the extension’s pages are located. Then, they would have to switch their scope in the web UI to interact with the extension pages as DOM elements.

The steps described above enables testers to avoid that process and interact with an extension like they do with a normal HTML webpage.

Thus, one can test a Chrome Selenium plugin with automated Selenium testing. It is an uncomplicated process that just requires a few minutes of extra effort. In return, testing an important aspect of the website user experience becomes a simple task.

Why Use BrowserStack to Test Chrome Extensions?

Using tools like BrowserStack to test Chrome extensions is a great option. Here’s why

• Test on Real Devices: Extensions can behave differently across operating systems or browser versions. With the help of BrowserStack’s real device cloud you run your tests on various real devices, browser versions and OSs to ensure consistent behavior.
• Cross-browser Testing: Test the consistency of your Chrome extension’s UI and functions across various browser versions.
• CI/CD Integration: Integrate BrowserStack seamlessly with CI/CD tools like Jenkins, CircleCI etc. to automatically run extension tests when the code is modified.
• Efficient Debugging: WIth features like screenshots, video recording of tests, console logs etc. you can debug and resolve issues easily.

Talk to an Expert

Conclusion

To summarize, for testing Chrome extensions with Selenium, you will have to configure the browser to launch with the extension enabled. This allows you to automate and verify its functionality across various scenarios. This helps ensure your extension behaves as intended in real user conditions.

Useful Resources for Automation Testing in Selenium

Methods, Classes, and Commands

• Selenium Commands every Developer or Tester must know
• Selenium WebElement Commands
• Desired Capabilities in Selenium Webdriver
• Assert and Verify Methods in Selenium
• Understanding System setProperty in Selenium
• Select Class in Selenium : How to select a value in dropdown list?
• SendKeys in Selenium WebDriver
• getAttribute() method in Selenium: What, Why, and How to use
• How does Selenium isDisplayed() method work?
• findElement vs findElements in Selenium
• Types of Listeners in Selenium (with Code Examples)
• How to set Proxy in Firefox using Selenium WebDriver?

Configuration

• How to set up Selenium on Visual Studio
• How to configure Selenium in Eclipse
• Maven Dependency Management with Selenium
• How to Build and Execute Selenium Projects

XPath

• How to use XPath in Selenium?
• How to find element by XPath in Selenium with Example
• Top Chrome Extensions to find Xpath in Selenium

Locators and Selectors

• Locators in Selenium: A Detailed Guide
• CSS Selector in Selenium: Locate Elements with Examples
• How to Create Object Repository in Selenium

Waits in Selenium

• Wait Commands in Selenium C and C#
• Selenium Wait Commands: Implicit, Explicit, and Fluent Wait
• Understanding Selenium Timeouts
• Understanding ExpectedConditions in Selenium
• Understanding Role of Thread.sleep() in Selenium

Frameworks in Selenium

• Data Driven Framework in Selenium
• Implementing a Keyword Driven Framework for Selenium: A Practical Guide
• Hybrid Framework in Selenium

Miscellaneous

• How to create Selenium test cases
• How to set Proxy in Selenium?
• Difference between Selenium Standalone server and Selenium server
• Exception Handling in Selenium WebDriver
• How to use JavascriptExecutor in Selenium
• How to run your first Selenium test script
• Parallel Testing with Selenium

Best Practices, Tips and Tricks

• Top 5 Challenges Faced During Automation Selenium Testing
• 5 Selenium tricks to make your life easier
• 6 Things to avoid when writing Selenium Test Scripts
• Best Practices for Selenium Test Automation
• Why you should pay attention to flaky Selenium tests
• How to start with Selenium Debugging
• How to make your Selenium test cases run faster
• How to upgrade from Selenium 3 to Selenium 4
• Why you should move your testing to a Selenium Cloud?

Design Patterns in Selenium: Page Object Model and Page Factory

• Design Patterns in Selenium
• Page Object Model and Page Factory in Selenium
• Page Object Model and Page Factory in Selenium C#
• Page Object Model in Selenium and JavaScript
• Page Object Model and Page Factory in Selenium Python

Action Class

• How to handle Action class in Selenium
• How to perform Mouse Hover Action in Selenium
• Understanding Click Command in Selenium
• How to perform Double Click in Selenium?
• How to Drag and Drop in Selenium?
• How to Scroll Down or Up using Selenium Webdriver
• How To verify Tooltip Using Selenium

TestNG and Selenium

• Database Testing using Selenium and TestNG
• How to use DataProvider in Selenium and TestNG?
• All about TestNG Listeners in Selenium
• How to run parallel test cases in TestNG
• How to use TestNG Reporter Log in Selenium: Tutorial
• Prioritizing tests in TestNG with Selenium

JUnit and Selenium

• Understanding JUnit assertions for Selenium Testing with Examples
• How to run JUnit Parameterized Test in Selenium
• How to write JUnit test cases
• JUnit Testing Tutorial: JUnit in Java
• How to create JUnit Test Suite? (with Examples)

Use Cases

• Handling Login Popups in Selenium WebDriver and Java
• How to Launch Browser in Selenium
• How to handle Alerts and Popups in Selenium?
• How to get Selenium to wait for a page to load
• How to Find Element by Text in Selenium: Tutorial
• How to Read/Write Excel Data using Apache POI Selenium
• How to handle Captcha in Selenium
• How to handle multiple windows in Selenium?
• How to handle Multiple Tabs in Selenium
• How to find broken links in Selenium
• How to handle Cookies in Selenium WebDriver
• How to handle iFrame in Selenium
• How to handle Web Tables in Selenium
• How To Validate Text in PDF Files Using Selenium Automation
• Get Current URL in Selenium using Python: Tutorial

Types of Testing with Selenium

• Different Testing Levels supported by Selenium
• How to perform UI Testing with Selenium
• Regression Testing with Selenium: Tutorial
• UI Automation using Python and Selenium: Tutorial
• How to Run Visual Tests with Selenium: Tutorial
• How to perform ETL Automation using Selenium
• Cross Browser Testing in Selenium : Tutorial