Can Cypress.io test a chrome extension?

Question

I'm trying to test my chrome-extension using cypress.io

I installed https://github.com/ejoubaud/cypress-browser-extension-plugin

context('visit extension', () => {
    beforeEach(() => {
      cy.visit('chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html')
    })

    it('does nothing', () => {
        assert(true);
    });
});

it doesn't work. page reads:

Sorry, we could not load: chrome-extension://fmnignchafknmcleldmndpkfkdohnngn/dashboard.html

Curlpaper

Answer 1

You do not need any extra plugins to load a browser extension, assuming you are running Cypress>=v4 the below should be enough to get it loaded.

// cypress/plugins/index.js
module. Exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    // supply the absolute path to an unpacked extension's folder
    // NOTE: extensions cannot be loaded in headless Chrome
    launchOptions.extensions.push('Users/jane/path/to/extension')
     return launchOptions
  })
}

In your test file you can just visit any 'normal' webpage and it should work for you. For example:

// test.spec.js
describe('Navigation', () => {
  it('cy.visit() - visit a remote url', () => {
    cy.visit('https://en.wikipedia.org/wiki/Diabetes')
  })
})

Also, Cypress cannot visit things like chrome-extension:// (or anything which is not http or https). This is by design on their part.

Stoush

Unfortunately, loading a chrome extension path errors out because it's not a valid https protocol. – Ankney

Yes, as per my answer, and the Cypress docs, you cannot load the chrome extension page. You need to load in an unpacked extension via the launchoptions. – Stoush

This does load the extension, but my extension appends a react app into the dom, and cypress puts it outside the cypress iframe, so I can't interact with it. Any workaround that? – Stoplight

Has anyone been able to solve this problem? – Libreville

If you're finding your content scripts aren't being injected in Cypress's iFrame version of the page you're visiting, try adding "all_frames": true, in your extension's manifest for the content script. developer.chrome.com/docs/extensions/mv3/content_scripts/… – Bala

Answer 2

As mentioned in other answers, Cypress is not fully supporting chrome extensions testing and you won't be able to visit links like chrome-extension://.

You may want to give a try to Playwright that is supporting this out of the box. There, 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.

There is not a lot of content about testing extensions E2E, but this article is detailing how to set up the correct infra for it from scratch with code examples covering your question (how to navigate to an extension page from test).

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`);

Haakon