How to load chrome extension in cypress.io

Table of contents

Reading Time: 3 minutes

In our previous blog Progressive Web App Testing with Cypress.io, we explained:

What is Cypress.io?
How is it different from Selenium?
How do we set up Cypress.io?

Here we will see how do we load a chrome extension in cypress.io?

So before moving on, As we know chrome extension do have a qualified URL which we can automate by using cypress commands so the first question is, why we need to load an extension?

Chrome web store extension URL supports HTTP protocol, but what if we have a EUT (extension under test) unpacked version, normally these extensions supports chrome custom protocol which is chrome://extensions. Cypress does not support custom protocols, Cypress only supports web pages with protocol HTTP or HTTPS.

Here we will use Grammarly dev tools chrome extension for this whole exercise.

Get the extension:

We have multiple ways to get this extension, but here I am using an extractor that enables us to download the extension on the click of our finger:

In chrome browser add a chrome extension CRX Extractor and downloader which enable to download the extension zar.

https://chrome.google.com/webstore/detail/crx-extractordownloader/ajkhmmldknmfjnmeedkbkkojgobmljda

Go to Grammarly Chrome extension

https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?hl=en

Click on the CRX extractor icon at the top of your browser and download the extension as a ZIP.

Extract the downloaded ZIP in a working directory.

Load the Extension in Cypress:

As we know cypress is a node module so to handle chrome extension we need to add an npm plugin by using the following command, which helps us to test our browser extension without messing with its code just for testing.

$ npm install -g –save-dev cypress-browser-extension-plugin

In your project’s plugins file:

// cypress/plugins/index.js

const extension loader = require('cypress-browser-extension-plugin/loader');

module.exports = (on) => {
   on('before:browser:launch', extensionLoader.load('/path/to/your/extension'));
 }

In your project’s supports file:

// cypress/support/command.js
const addExtensionCommands = require('cypress-browser-extension-plugin/commands');
addExtensionCommands(Cypress);

That’s all you need to load a single extension now run cypress by hitting following command.

$ npx cypress open
Select the spec file, loadChromeExtension.spec.js.

Note: When the test run analyze the cypress terminal window you will see an info log like:

‘Cypress Extensions: Copying and preparing extension myExtension from /home/knoldus/Downloads/kbfnbcaeplbcioakkpcpgfkobkghlhen to /tmp/cypress-extensions/myExtension’
And the extension will be loaded in your cypress test browser.