How to test Chrome extensions in Selenium
Shreya Bose, Technical Content Writer at BrowserStack - March 19, 2020
With Continuous Integration (CI) and Continuous Delivery (CD) becoming standard practices in software development, automation testing has been established as a key component in testing processes. Testing tools and processes 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.
Challenges of testing Browser Extensions
Browser extensions are embedded add-ons, regular HTML files. Since the extension is out of scope, it is not possible to simulate user clicks, inspect elements, or automate other activities.
For example, a tester wants to initiate client-side testing of a website. This can be easily done by replicating user interactions with Selenium. Now, if one has to automate actions on a browser extension, they 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.
However, a workaround does exist, allowing testers to easily tackle this problem. In a few steps, this workaround will allow testers to interact with an extension like they do with a normal HTML webpage. This means they can automatically test extensions, thus making it fit into CI/CD architectures.
Keep in mind that while the following steps are meant for testing a Chrome extension, the same principles apply to other browsers such as Firefox, IE and Safari.
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.
Note: The CRX might be a local file that has not yet been uploaded to the Chrome Web Store. In case the extension does not exist in the web store, install it manually by dragging the CRX file into the Chrome://extensions page and clicking ‘Add’. Find more details on this process here.
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.
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.
Here’s the syntax for this code in a number of languages often used in Selenium Webdriver scripts:
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);
chop = webdriver.ChromeOptions() chop.add_extension(EXTENSION_PATH) # create new Chrome driver object with Chrome extension driver = webdriver.Chrome(chrome_options=chop)
var chromeOptions = webdriver.Capabilities.chrome(); chromeOptions: [ binary: '/Applications/Google\Chrome.app/Contents/MacOS/Google\ Chrome', args: [ ], extensions: ['EXTENSION_LOCATION.crx'] ] var driver = new webdriver.Builder(). withCapabilities(chromeOptions). build();
//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:
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:
Learn more about handling iFrames in Selenium.
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.