3

I have a chrome extension which I'd like to E2E test (simulate some basic user interactions).

Using Cypress, I was able to load my app but couldn't interact with it (i.e. go to the app url using the chrome-extension:// protocol).

Then I found out that Cypress (like many others testing frameworks) is not able to approach the chrome:// protcol, yet, as far as I get it, I need the chrome.runtime api to be included somehow for my app to behave as expected (e.g. interact with background page or use the local storage) and that can't be achived by simply clicking my popup.html file on the other hand.

I feel like I'm missing something here. How should I test my Chrome extension with ease? There must be some good practice for it, launching and treat it like a usual webpage.

Thanks

Tamir Nakar
  • 933
  • 1
  • 10
  • 17
  • 2
    Does this answer your question? [Detect and test Chrome Extension using Puppeteer](https://stackoverflow.com/questions/48089670/detect-and-test-chrome-extension-using-puppeteer) – voiarn Jan 01 '22 at 14:34
  • Thanks voiarn, I already read this, and tried puppeteer, but encountered some other problems. I'd like to know if there is a more straightforward way – Tamir Nakar Jan 01 '22 at 14:38
  • Thanks voiarn, I did something wrong the last time I used pupeteer. Its indeed the easiest way to test e2e chrome extensitons. – Tamir Nakar Jan 14 '22 at 21:35

2 Answers2

3

Playwright is now supporting end-to-end test of Chrome extensions. You can launch a chromium browser with your extension already installed and then navigate to any web page or extension page (like your popup.html) and test your extension behavior.

You can learn more about it in this article where I explain how to set up E2E tests for chrome extension from scratch (and how to access popup page and background script from Playwright).

After setting up playwright like in the article, you will be able to access your popup (or any other internal page) simply like this :

    await page.goto(`chrome-extension://${extensionId}/popup.html`);

This is also detailed in the playwright documentation.

Stephane Benayoun
  • 91
  • 3
1

OK.

So after countless tryouts I've came to a conclusion that the best testing platform for browser extensions - offering a straight-forward way to load the extension (and also use the chrome:// protocol) is indeed - puppeteer (tried cypress and selenium as well)

Tamir Nakar
  • 933
  • 1
  • 10
  • 17
  • 1
    Not an answer but here's some workaround: if your extension only inject some JS/CSS files to the page and we can do that manually with cypress and do the testing after that. – Envil Jun 09 '22 at 07:08