javascript - How to test E2E my Chrome extension - best practice - Stack Overflow

admin管理员组

文章数量:1433480

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

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

• javascript
• google-chrome-extension
• automated-tests

Share Improve this question Follow asked Jan 1, 2022 at 14:30 Tamir NakarTamir Nakar 1,07311 gold badge1111 silver badges1818 bronze badges 3

• 2 Does this answer your question? Detect and test Chrome Extension using Puppeteer – voiarn Commented Jan 1, 2022 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 Commented Jan 1, 2022 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 Commented Jan 14, 2022 at 21:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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)

本文标签： javascriptHow to test E2E my Chrome extensionbest practiceStack Overflow