Support browser specific protocols (chrome extensions)

Support cy.visit() with protocols other than http/https such as:

• chrome://
• chrome-extension://
• resource://

Most notably, chrome-extension:// will allow users to test the UI of a chrome extension.

[kepi]

I belive there should be way to test extension in real Chrome. Not under web server, not stubbing anything. With doing all this extra work, there is huge space to introduce new bugs and worse - to miss some real bugs.

I didn’t check the source code of Cypress or Chrome so I’m really not sure how it is working under the hood. But isn’t it possible to navigate to chrome:// and chrome-extension:// in exact same way as to http://? Isn’t it only alias to http and working over http protocol?

Btw. I started to play with Cypress only because I need to test extension, I wouldn’t give it a try if it wouldn’t look like it can do this from docs. As other tools are lacking in this area too, it my be great to provide better support for extension authors.

[Kocal]

My popup is now successfuly tested, thanks you all! 😎

Some tips for people who wants to spec their extension’s views and mocking chrome* API:

• Build your extension (e.g.: output in dist folder)
• Run a local server pointing on your dist folder (serve is pretty nice)
• Update your Cypress configuration:

{
  "baseUrl": "http://localhost:5000"
}

• Into your spec:

describe('App', () => {
  before(() => {

    // Load your popup
    cy.visit('/popup/popup.html', {

      // If you need to stub `chrome*` API, you should do it there:
      onBeforeLoad(win) {
        win.chrome = win.chrome || {};
        win.chrome.runtime = {
          sendMessage(message, cb) {
            // ...
            cb(some_data);
          },
        };
      },
    });
  });
});