Playwright chrome extension testing template

This project serves as a template for testing chrome extensions using Playwright.

Contents

• Getting started
• Run tests
• Useful links
• Example extension
• GitHub Action

Getting started

To set up the environment for the first time run:

• yarn
• yarn playwright install chromium

Run tests

To execute all tests use:

• yarn playwright test

Useful links

• Playwright Extension Testing
• Playwright CLI
• Playwright in VSCode

Example extension

The project contains a rudimentary extension to demonstrate use in tests.

Extension contents:

• index with title and current date
• script that loads current date
• background script to launch service worker (necessary to retrieve the extensionID via fixture)
• content script that adds a <div>testDivText</div> to any visited site

GitHub Action

An example workflow to show running playwright tests with an extension in GitHub Actions. The installs dependencies, runs the tests, and uploads the report.

Troubleshooting and tips

Failed to get extension ID (extension has no service worker)

You may encounter this error if the extension under test does not launch a service worker. The extensionTest fixture uses the extension's service workers to retrieve it's ID.

Error: browserContext.waitForEvent: Timeout 15000ms exceeded while waiting for event "serviceworker"

To fix add a background script to the manifest. Example in ./extension/manifest.json and ./extension/background.js.

"background": {
    "service_worker": "background.js"
}

Alternatively you can retrieve the extension ID by navigating to chrome://extensions/ and enabling Developer mode.