Testing 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:
1) Open Chrome browser.
2) Navigate to
chrome://extensions
3) Turn on the Developer mode switcher.

Loading the Chrome extension
4) Load the unpacked version of your extension. You can create a demo one with extensionizr.com service.

Saving Chrome extension ID
5) Write down the extension ID (e.g.
eclajhagmjdnniapeipnfejgmplgehme
) from appeared extension card. 6) Launch Puppetry and create an empty test case
7) Check the extension
manifest.json
file for default_popup
value (e.g. src/page_action/page_action.html
)8) Add command
page.goto
with URL like chrome-extension://EXTENSION_ID/EXTENSION_RELATIVE_URL (e.g. chrome-extension://eclajhagmjdnniapeipnfejgmplgehme/src/page_action/page_action.html
)
Navigating to the Chrome extension main page
9) Add command
page.screenshot
to take a screenshot when the extension HTML is loaded10) Open Run Tests dialog (press F6 or Run in the main menu)
11) Switch to Browser options and set the Chrome extension folder location (with Browse... button)

Feeding Chrome extension sources to Puppetry
12) Click on Run button
13) Observe the report

Chrome extension test results
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.
Last modified 3yr ago