How to load Cypress Chrome Extension?

The Cypress Chrome extension helps you record browser interactions in the Chrome DevTools Recorder and export them directly into Cypress test code. It captures clicks, typing, and navigation and converts them into ready‑to‑use scripts. This saves developers time and ensures accuracy by avoiding manual scripting.

This article explains what the extension does, why it matters, how to install it and how to use it inside Cypress.

Why use Cypress?

Cypress is used for end-to-end testing because it runs directly in the browser and provides fast, reliable feedback. It lets developers write tests in JavaScript, see real-time execution, and debug with built-in tools.

Cypress automatically waits for elements and commands, reducing the need for manual waits or retries. It also supports modern web app frameworks and integrates easily into CI/CD pipelines.

Prerequisites

Set up Cypress and start a new project to get things going. Use the following commands to start a new project:

$ mkdir cypress-tutorial
$ cd cypress-tutorial
$ npm init -y

Installing the Cypress package as a development dependency is the next step:

$ npm install --save-dev cypress

Edit the package.json file in the project’s root and change the scripts property to read like this:

"scripts": {
"test": "npx cypress run",
"cypress:open": "npx cypress open"
},

Create a file called cypress.json in the root folder of your project, save it, and then use it as the configuration file to tailor Cypress’ behavior to this particular project.

To the file, add the following code, then save it:

{ "chromeWebSecurity": false }

Installing the Cypress Chrome Extension

To use Cypress and manage JavaScript packages, you must install Node.js and npm. It’s best to use a Node version manager like nvm, which lets you install and switch between Node versions easily and avoids permission issues.

Avoid using the default Node installer, as it may install npm with restricted permissions, causing errors when running global packages.

Once Node.js is installed, update npm to the latest version using:

npm install -g npm

Installing npm and Node.js using a Node version manager

Using a Node version manager is the recommended way to install Node.js and npm. It allows you to manage multiple versions and avoids permission issues common with global package installs.

macOS or Linux Node version managers

Install nvm (Node Version Manager) by running the following command in your terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Once installed, restart your terminal and run:

nvm install node

nvm use node

This installs the latest version of Node.js along with npm.

Windows Node version managers

Use nvm-windows to manage Node.js versions. Download the installer from the official GitHub repository and follow the setup instructions.

After installation, open a new command prompt and run:

nvm install latest

nvm use latest

This sets up the latest version of Node.js and npm. Verify the installation using:

node -v

npm -v

How to Use a Plugin in Cypress?

In the Cypress configuration, you must include your plugin in the setupNodeEvents function as of Cypress version 10.0.0.

You can include your plugin in the (deprecated) plugins file if you’re still running an older version of Cypress.

Example:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
// setupNodeEvents can be defined in either
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
// bind to the event you care about
on('<event>', (arg1, arg2) => {
// plugin stuff here
})
},
},
})

Downloading the Cypress Chrome Extension

Cypress is a node module, so to handle a Chrome extension, you must add an npm plugin by using the command below.

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

In the plugins file for your project:

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

In the support file for your project:

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

Simply pressing the following command will start Cypress once just one extension has been loaded.

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

From the Chrome Web Store

You may export tests straight from the Recorder panel with the Cypress extension for DevTools. With this extension, you may quickly export recordings from Chrome DevTools Recorder as Cypress tests. You can explore this subject more:

Installation

$ npm install -g @cypress/chrome-recorder

Run the following commands to use the interactive CLI:

$ npx @cypress/chrome-recorder

Loading the Cypress Chrome Extension

You can easily export tests from the Recorder panel using the Cypress extension for DevTools.

Install the Cypress Chrome Recorder extension to export recordings straight from the Recorder UI in Chrome DevTools.

Load the extension in Developer Mode

As a developer, you can load your extension to see that it functions in the Chrome browser or on a ChromeOS device.

• Choose the kind of test device you require:…
• Save the extension folder to your test device.
• Go to chrome://extensions to access the Extension Management page.
• Developer mode can be activated by clicking the top right button.
• Choose Load Unpacked by clicking.
• Locate and choose the extension folder.

Load the unpacked extension

To manually install an extension, you must first unzip it. To load the unpacked extension, follow the instructions:

• Use the three dots in the top right corner to access Chrome Settings.
• Next, choose Extensions.
• With chrome:/extensions, you can open extensions directly.
• Activate developer mode now.
• Choose your Unzip folder and click Load Unpacked.
• You must choose the folder containing the manifest file. As it is the installer folder for our extension.
• The extension will now be put in place.

It’s crucial to remember that using authentic browsers is necessary for Cypress testing to produce trustworthy results. Start evaluating the latest versions of browsers for Windows and macOS with BrowserStack. Rapid, hassle-free parallelization will help you achieve outcomes faster without sacrificing accuracy. The software can be tested in real-world usage scenarios to detect bugs before users do.

Why Run Cypress Tests on Real Browsers with BrowserStack?

Without BrowserStack, Cypress tests are constrained by local browser availability, limited parallelization, and minimal debug context. With BrowserStack, you get a scalable, easy-to-use cloud solution that increases test coverage, reduces flakiness, and accelerates feedback loops.

Here are the key features of BrowserStack that enhance Cypress testing:

• Cross-browser testing support: Run Cypress tests on 3,500+ browser and OS combinations, including Windows, macOS, Chrome, Edge, Firefox, and legacy versions unavailable locally.
• Parallel testing: Speed up test runs by executing multiple Cypress specifications in parallel across multiple machines.
• Test debugging: Capture screenshots, test framework logs, CI console logs, network logs, for deeper failure diagnosis.
• CI/CD integration: Easily integrate with popular CI tools like Jenkins, GitHub Actions, CircleCI, Travis CI, and more.

Talk to an Expert

Conclusion

The Cypress Chrome Extension simplifies test creation by allowing developers to record user flows directly in Chrome and export them as Cypress scripts. This reduces the need for manual scripting and speeds up the building of reliable end-to-end tests.

Once tests are created, running them on real devices and browsers using BrowserStack Automate ensures they work as expected across environments. It provides access to various browser versions and real mobile devices, enabling teams to catch environment-specific issues early and deliver a consistent user experience.

Try BrowserStack for Free