How to test Chrome Extensions

An average Chrome Extension is HTML5 application, therefore we can test it with Puppetry. The only difference here is in way we obtain the page context. The following walkthrough explains how it can be done

Loading the Chrome extension

Open Extension Management page

Add your extension

  • Load the unpacked version of your extension. You can create a demo one with service.
  • Write down the extension ID (e.g. eclajhagmjdnniapeipnfejgmplgehme) from appeared extension card.
Adding extension
Accessing the extension in the tests

Access the extension in the tests

  • Launch Puppetry and create an empty test case.
  • Check the extension manifest.json file for default_popup value (e.g. src/page_action/page_action.html).
  • Add command page.goto with URL like chrome-extension://EXTENSION_ID/EXTENSION_RELATIVE_URL.
  • Add command page.screenshot to take a screenshot when the extension HTML is loaded.

Run the tests

  • Open Run Tests dialog (press F6 or Run in the main menu).
  • Switch to Browser options and set the Chrome extension folder location (with Browse... button).
  • Click on Run button.
Run the tests
Observe the report

Observe the report

So we have got the screenshot with Chrome extension page view. Thus we can develop a real test case with commands and assertions pointed at the extension page context.