microsoft / microsoft/playwright

[Feature] Support testing Chrome extensions that utilize the Chrome side panel

Open
#26,693 18 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser-chromium P3-collecting-feedback
Dominant language
TypeScript
Stars
96.3k
Forks
6.5k
Avg merge
1d 6h
Merged PRs (30d)
180

Description

Hi, my company's product is a Chrome extension that renders UI inside the Chrome side panel, using the [`chrome.sidePanel`](https://developer.chrome.com/docs/extensions/reference/sidePanel/) API. I'm attaching a screenshot of our Chrome extension's UI, in case you are not familiar with the Chrome side panel.

**My feature request is: Can you make it so Playwright can open the Chrome side panel and interact with the webpage that is rendered inside it?**

This would allow us (and other Chrome extension authors) to create fully end-to-end tests for our extensions using Playwright.

I have reviewed the Playwright docs and API, and could not find a way to open the Chrome side panel. It is not possible to open the side panel programmatically from the extension service worker, as far as I know. The user has to click the extension icon. (If the user already has the side panel open, e.g. to view their bookmarks, they can also get to our extension's page using the dropdown at the top of the side panel.)

Once the side panel is open, we would need a way to get access to its `Page` object from our Playwright test code.

## Workaround for the time being

Our current plan for testing the application is to have Playwright interact directly with the extension service worker. We can use Playwright's ability to execute JavaScript in the service worker's context to mimic the communication the service worker normally receives from the side panel.

This will give us test coverage of our service worker and content scripts, which is much better than nothing. That said, ideally we would like a true end-to-end test that also covers the UI we render in the side panel.

---------------------------

Thank you for this awesome library!!!

Screenshot of our application in the Chrome side panel:

![image](https://github.com/microsoft/playwright/assets/801549/5d9ff82e-9d3b-4304-b88b-b33339dd9efb)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with Playwright's extension service-worker entry point and the requested Chrome side panel behavior, then determine how a side-panel document could be exposed as a Page. Done means a test can open the side panel, obtain its Page object, and interact with the rendered extension UI end to end.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.