Puppetry
3.2.2
3.2.2
  • Welcome Puppetry
  • Getting Started
  • Project
  • Suite
  • Group
  • Target
    • Simple Target
    • iFrame Target
    • ShadowDOM Target
    • Chained Target
    • Shared Target
  • Test Case
  • Test Step / Action
    • Page Commands
    • Page Assertions
    • Target Commands
    • Target Assertions
  • Managing Records
  • Snippets
  • Running tests
    • Interactive Mode
    • Troubleshooting
  • Test Report
  • Export
    • Exporting as Jest Project (CI-friendly)
    • Exporting as Test Specification
  • Settings
  • Template Expressions
  • Testing Techniques
    • Testing Dynamic Content
    • Exhaustive Testing
    • Performance Testing
    • Visual Regression Testing
    • Testing Shadow DOM
    • Testing Google Analytics tracking code
    • Testing Chrome Extensions
    • Testing REST API
    • Mocking HTTP/S Requests
    • Testing Transactional Emails
      • Example with Restmail.net
      • Example with Mailinator
      • Example with IMAP bridge
      • Example with Google API
    • Testing Forms with Captcha
  • Version Control
  • Tips and Tricks
    • Embrace the Power of CSS
  • Command API
  • Test Application
Powered by GitBook
On this page

Was this helpful?

  1. Testing Techniques

Testing Chrome Extensions

PreviousTesting Google Analytics tracking codeNextTesting REST API

Last updated 5 years ago

Was this helpful?

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.

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)

9) Add command page.screenshot to take a screenshot when the extension HTML is loaded

10) 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)

12) Click on Run button

13) 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.

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

extensionizr.com
Loading the Chrome extension
Saving Chrome extension ID
Navigating to the Chrome extension main page
Feeding Chrome extension sources to Puppetry
Chrome extension test results