CODEWITHSUNDEEP
cypressend-to-end
Huy Ho
Huy Ho

Reputation: 301

Can Cypress.io test a chrome extension?

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

Upvotes: 10

Views: 7453

Answers (2)

Stephane Benayoun
Stephane Benayoun

Reputation: 121

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

Upvotes: 4

AlexJeffcott
AlexJeffcott

Reputation: 136

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.

Upvotes: 9

Related Questions