Using Chrome Extensions with WebDriverJs

It’s a long story (for another time) but I recently had to start using the Adblock Plus Chrome extension whilst running our automated e2e tests.

I hadn’t installed a Chrome extension before to run WebDriverJs tests so I thought I’d share the steps as it isn’t as straightforward as it seems!

This is because every WebDriver run uses a new Chrome browser profile which is great for consistent test runs, but it also means that the Chrome browser profile won’t have any of your Chrome extensions unless you explicitly add these through your code.

Steps Involved in Adding a Chrome Extension to WebDriverJs

  1. Install the extension to your regular Chrome profile via the Chrome Store. You will need to take note of the extension’s ID which is the last part of the URL (Adblock Plus is cfhdojbkjhnklbpkdaibdccddilifddb).
  2. Locate your extension in your file system using the ID above. This can be a little tricky depending on how many Chrome user profiles (People) you have, but on OSX this is typically something like: ~/Library/Application Support/Google/Chrome/Profile 1/Extensions (where Profile 1 is your profile name)
  3. There should be a version directory under the extensions ID directory, find the latest version and copy this entire directory into your WebDriverJs project (you can also follow these instructions to ‘package’ this directory into a single zipped file, I didn’t do this as I wanted the ability to edit parts of the extension).
  4. With the Adblock Plus extension I didn’t want it to show the welcome screen on first run as this shows every time you run a test which can cause problems (and be annoying). I simply modified the contents of lib/adblockplus.js to set defaults.suppress_first_run_page = true;
  5. Once this is all done, you just need to load the extension in your WebDriverJs code. It should look something like this:
const adBlockPlusPath = path.resolve( __dirname, '../your-extension/1.1.1' );
options = new chrome.Options();
options.setUserPreferences( { enable_do_not_track: true } );
options.addArguments( `--load-extension=/${ adBlockPlusPath }` );
const builder = new webdriver.Builder();
builder.setChromeOptions( options );
const driver = builder.forBrowser( 'chrome' ).build();

You should the little ABP shield (or whatever extension you’re using) when running your WebDriverJs tests showing you that your code is working as expected 😀

abp

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

1 thought on “Using Chrome Extensions with WebDriverJs”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s