Drive Chrome with Extensions using Selenium WebDriver

Launch Chrome browser with extensions in Selenium WebDriver scripts

This article is included in my “How to in Selenium WebDriver” series.

Software professionals often use Chrome extensions to assist in using the application. In rare cases, certain chrome extensions become an essential component of application testing infrastructure. Take a team that uses automation scripts for showcases as an example. After driving the application to a certain state, a business analyst may continue to use a Chrome extension (in the browser launched by selenium scripts) to demonstrate.

In the below case study, I will show a script that uses the TestWise Recorder extension to record user operations.

TestWise Recorder is an extension created by me, however, I rarely used it. (here is why?) I find it is usually more efficent to create high-qualty selenium scripts by hand. Hard to believe? See this article (with video demo). With a right tool and under correct guidance, learning to write automated test scripts in raw Selenium WebDriver is far eaiser than in other frameworks.

Raw Selenium WebDriver in Ruby binding, run from TestWise

A typical way of using a Chrome Extension consists of the following steps:

• Download the Chrome Extension file

• Start Chrome with an Extension in Selenium WebDriver scripts

• Drive controls in the Chrome Extension window

• Navigate between the main browser and the extension window

1. Download Chrome Extension File

In this case, you can download TestWise Recorder directly. A general way to get from the Chrome web store, however, is not straightforward.

We can view a Chrome extension on the chrome web store, and add it to the Chrome browser. However, there is no download link in the chrome web store.

The highlighted part is the extension ID

To use it with automation scripts, we need to get the raw extension file (.crx file).

• Copy the extension ID (see the above image)

• Visit https://chrome-extension-downloader.com, enter the extension ID, and download the extension CRX file.

Update: the above site is down now. You can always manualy pack a Chrome extension, the guide below:

https://www.maketecheasier.com/download-save-chrome-extension/

Save it to a folder (e.g. extension) under your test project.

TIP: It is a good practice to package dependent files with the test scripts, i.e., use relative paths to access them.

2. Start Chrome with an Extension in Selenium WebDriver

In the test script, we first locate the extension file.

chrome_extension_file = File.join(File.dirname(__FILE__), "..", "extension", "testwise-recorder-0.5.2.crx")

Initialize a Chrome::Options , and add the extension file to it.

the_chrome_options = Selenium::WebDriver::Chrome::Options.new
the_chrome_options.add_extension(chrome_extension_file)

TIP: You may add multiple extensions to a Chrome::Options

Start a Chrome browser with the chrome options.

driver = Selenium::WebDriver.for(:chrome, :capabilities => the_chrome_options)

A new Chrome window with TestWise Recorder extension

3. Drive Chrome Extension Window

Open the Chrome extension page in a new browser window. The extension page URL depends on the extension.

The format is chrome-extension:://{EXTENSION_ID}/{PAGE}.html .

extension_id = "febfogamlejngokejcaimklgcfphjbok"
extension_win = driver.manage.new_window(:window)
driver.switch_to.window(extension_win)
driver.get("chrome-extension://#{extension_id}/popup.html")

Once getting ‘attached’, you can drive the controls in Chrome Extension using the standard WebDriver way.

driver.manage().window().resize_to(480, 480)
driver.manage().window().move_to(35 + 576, 0)
driver.find_element(:id, "xxx").click  # ....

4. Back to drive the application in the main window

Switch the control back to the main browser window, and drive the application as required.

As our example, the test steps below simulate the user operations that we want to record (into selenium test steps).

driver.switch_to.window(driver.window_handles.first)
# back to main browser windowdriver.find_element(:id, "username").send_keys("agileway")
driver.find_element(:name, "password").send_keys("testwise")
driver.find_element(:xpath, "//input[@value='Sign in']").click

5. Navigate between the main browser and the extension window

For our example, click the ‘Copy’ button to copy the recorded test steps (in extension) to the clipboard.

driver.switch_to.window(extension_win)
puts driver.find_element(:class, "CodeMirror-lines").text
driver.find_element(:id, "copy-to-clipboard-btn").click

To verify that the recording works, I paste it (from the clipboard) into a text field in the main browser window.

driver.switch_to.window(driver.window_handles.first)
driver.find_element(:name, "textbox").send_keys([:control, 'v'])

Full Script (raw Selenium WebDriver in RSpec)

load File.dirname(__FILE__) + "/../test_helper.rb"
describe "TestWise Recorder Extension" do
  include TestHelper  
  
  before(:all) do
    chrome_extension_file = File.expand_path File.join(File.dirname(__FILE__), "..", "extension", "testwise-recorder-0.5.2.crx")
    @driver = $driver = Selenium::WebDriver.for(browser_type, browser_options(:extension => chrome_extension_file))
    driver.manage().window().resize_to(576, 480)
    driver.manage().window().move_to(50, 0)
    driver.get("http://travel.agileway.net")
  end

  after(:all) do
    driver.quit unless debugging?
  end  
  
  # takes about 25 seconds
  it "TestWise recorder extension" do
    extension_id = "febfogamlejngokejcaimklgcfphjbok"
    # Can Invoke however, not working for Level Up
    recorder_win = driver.manage.new_window(:window)
    driver.switch_to.window(recorder_win)
    # right click testwise recorder to find page URL
    driver.get("chrome-extension://#{extension_id}/popup.html")
    driver.manage().window().resize_to(480, 480)
    driver.manage().window().move_to(35 + 576, 0)
    driver.switch_to.window(driver.window_handles.first)
    driver.find_element(:id, "username").send_keys("agileway")
    driver.find_element(:name, "password").send_keys("testwise")
    driver.find_element(:xpath, "//input[@value='Sign in']").click      
    driver.switch_to.window(recorder_win)
    sleep 0.5
    puts driver.find_element(:class, "CodeMirror-lines").text
    driver.find_element(:id, "copy-to-clipboard-btn").click    driver.switch_to.window(driver.window_handles.first)
    driver.find_element(:xpath, "//input[@value='Continue']").click
    
    driver.find_element(:name, "passengerFirstName").send_keys([:control, 'v'])
  end
end

browser_options is a function defined in test_helper.rb (see Maintainable Automated Test Design), which can be downloaded here.