How to Load the Cypress Chrome Extension - DZone (2023)

Speed ​​and performance are crucial elements to consider when testing applications. In addition, other best options eliminate unpleasant and repetitive elements to give developers more time to focus on creating applications. Using browser extensions is a great approach to doing this while increasing productivity.

A browser extension streamlines the manual cross-browser testing processes used by QA engineers. Chrome, Firefox, Edge, Opera and IE are just a few browsers that can be used for online browser testing.

The current scenario of Google Chrome

With 64.8% of the market, Chrome remains the most used browser among them.

Our goal is to build a thriving open source community that benefits productivity, makes testing enjoyable, and makes developers happy. In this attempt, this article will create a direct route that will result in a faster solution, such as the Cypress Chrome Extension.

Why use Cypress?

A cutting-edge front-end testing tool built for the modern web is Cypress. Cypress can test any program running in a browser. This end-to-end testing framework was built from scratch, which puts it in a unique position to overcome Selenium's restrictions. You can complete your first successful trial with Cypress in just five minutes!

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 root of the project and change the scripts property to read like this:

JSON

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

Create a file called cypress.json in your project's root folder, save it and use it as a configuration file to adapt Cypress behavior to that specific project.

In the file, add the following code and save it:

JSON

{ "chromeWebSecurity": falso }

Run your first Cypress test.

Installing Google Chrome

Windows, Android, iOS, macOS and Linux users can easily download Google Chrome. You just need an existing browser to access the download page or App Store on iOS. You will go through the installation of the Google Chrome browser on your computer and mobile device.

  • Visit the Google Chrome download page for your web browser. Use any web browser to download Google Chrome.
  • There is a blue button in the center of the page.
  • If you don't want Google to collect your usage data, uncheck the box below.
  • The configuration download may take a while.
  • Launch Chrome Setup. You can access your download icon using the Finder or File Explorer on a Mac or Windows computer by clicking the download symbol in your browser (Mac).
  • It will appear to be ChromeSetup.exe. To start the setup, double click on the .exe file.
  • Installing this can take a while. Google Chrome will launch immediately when finished. Now you can make it your default browser.

Installing Node.js and npm

  • You must install Node.js and the npm command-line interface using a Node version manager or a Node installer to publish and install packages to and from a public or private npm registry.
  • Installing Node.js and npm is highly recommended using a Node version manager like nvm.
  • Using a Node installer is not, as it installs npm in a directory with local rights, which can result in permission errors when running npm packages globally.

Run the following command from the command line to get the latest version of npm:

npm install -g npm

Installing npm and node.JS using a Node Version Manager

Macos or Linux node version managers

Windows Node Version Managers

Plugins

You can access, change or expand Cypress's internal functionality using plugins. As a user, all your test code, applications and Cypress commands are normally executed in the browser. Another Node process that plugins can use is Cypress.

Npm modules are plugins included inCypress official list. Since they can be updated independently of Cypress, they can be versioned and updated separately.

Any released plugin can be installed using NPM:

npm install--save-dev

How to Use a Plugin in Cypress

  • In Cypress configuration, you must include your plugin in the setupNodeEvents function from Cypress version 10.0.0.
  • You can include your plugin in the (deprecated) plugins archive if you are still running an older version of Cypress.

Example:

JavaScript

const { defineConfig } = require('cypress')module.exports = defineConfig({ // setupNodeEvents can be defined in // the e2e or e2e component configuration: { setupNodeEvents(on, config) { // bind to the event that you want abouton('', (arg1, arg2) => {//plugin here})},},})

Downloading the Cypress Chrome Extension

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

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

In your project's plugins file:

JavaScript

// cypress/plugins/index.jsconst extension loader = require('cypress-browser-extension-plugin/loader');module.exports = (on) => {on('before:browser:launch', extensionLoader.load ('/caminho/para/sua/extensão'));}

In your project's support file:

JavaScript

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

In your project's support file:

JavaScript

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

Just press the following command to start Cypress once only one extension is loaded.

JavaScript

$ npx cypress openSelect the spec file, loadChromeExtension.spec.js.

Na Chrome Web Store

You can export tests right from the Recorder panel with theCypress Extension for DevTools. With this extension, you can quickly export Chrome DevTools Recorder recordings as Cypress tests. You can explore this subject further:

Installation

$ npm install -g @cypress/chrome-recorder

Run the following commands to use the interactive CLI:

$ npx @cypress/chrome-recorder

Loading the extension in Google Chrome

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

Load extension in developer mode

As a developer, you can upload your extension to see if it works in the Chrome browser or on a ChromeOS device.

How to Load the Cypress Chrome Extension - DZone (1)

  • Choose the type of test device you need:…
  • Save the extension folder on 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 unzipped by clicking.
  • Locate and choose the extension folder.

Load the unzipped extension

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

  • Use the three dots in the upper-right corner to access Chrome's settings.
  • Then choose Extensions.
  • With chrome:/extensions you can open extensions directly.
  • Enable developer mode now.
  • Choose the Unzip folder and click Load Unpacked.
  • You must choose the folder that contains the manifest file. How is the installer folder of our extension.
  • The extension will now be implemented.

It is crucial to remember that the use of authentic browsers is required for Cypress tests to produce reliable results. Start evaluating the latest browser versions for Windows and macOS with BrowserStack. Fast, hassle-free parallelization will help you get results faster without sacrificing accuracy. Software can be tested in real-world usage scenarios to catch bugs before users do.

final notes

It's simple to install Cypress, create tests, debug tests, and incorporate it into continuous integration. Cypress works directly in the browser and has a distinct DOM manipulation method. It supports multiple versions of Chrome browser as well as many other browsers.

Top Articles
Latest Posts
Article information

Author: Frankie Dare

Last Updated: 06/29/2023

Views: 6164

Rating: 4.2 / 5 (53 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Frankie Dare

Birthday: 2000-01-27

Address: Suite 313 45115 Caridad Freeway, Port Barabaraville, MS 66713

Phone: +3769542039359

Job: Sales Manager

Hobby: Baton twirling, Stand-up comedy, Leather crafting, Rugby, tabletop games, Jigsaw puzzles, Air sports

Introduction: My name is Frankie Dare, I am a funny, beautiful, proud, fair, pleasant, cheerful, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.