November 28, 2024

Cypress is a robust end-to-end testing framework known for its developer-friendly design and seamless integration capabilities. However, its true power lies in its plugin ecosystem, which allows for extending core functionalities, automating tedious workflows, and solving real-world testing challenges. In this blog, we’ll explore the role of Cypress plugins, their benefits, and also highlight two key plugins to improve your test automation efforts. 

What Are Cypress Plugins?

Cypress plugins are extensions that add new capabilities to Cypress’s core features. Cypress plugins are JavaScript modules that extend the functionality of the Cypress test runner. They can be used to:

• Create new commands 
• Modify existing commands 
• Register custom task runners 

Types of Cypress Plugins

• cypress-mochawesome-reporter
• allure-plugin
• cypress-axe
• cypress-file-upload
• cypress-downloadfile
• cypress-image-snapshot
• percy-cypress
• cypress-plugin-api
• cypress-network-idle
• cypress-plugin-snapshots
• cypress-data-session
• cypress-sql-server
• cypress-browserstack
• cypress-browserify-preprocessor
• cypress-real-events
• cypress-wait-until
• cypress-multi-tab
• cypress-iframe
• cypress-dotenv
• cypress-env-vars
• cypress-split
• cypress-gherkin-preprocessor
• cypress-i18n-test
• cypress-log-to-output
• cypress-sentry
• cypress-lighthouse

We’ll explore the importance of plugins, some commonly used ones, and how they can elevate your testing experience.

Key Features of Cypress Plugins

Setting Up a Cypress Plugin

Install the required plugin:

npm install <plugin-name> --save-dev

Introduction to Key Cypress Plugins

Cypress provides a range of plugins for different testing needs. Here’s a quick look at two essential plugins: 

• Cypress-iframe: Simplifies interaction with iframes. 
• Cypress-file-upload: File Upload Testing Simplified   

Let’s dive deeper into these plugins and their applications. 

1. Cypress-iframe: Simplified Interaction with Iframes

Overview

Testing iframes in web applications can be a complex task because Cypress does not natively support direct interaction with iframe elements. The cypress-iframe plugin simplifies this process by providing custom commands to easily interact with and assert iframe content.

Key Features

• Custom Commands
  • cy.frameLoaded() ensures an iframe is fully loaded before interacting with its contents.
  • cy.iframe() allows direct interaction with elements inside an iframe.
• Support for Chaining
  • You can chain .iframe() commands to perform actions such as clicking, typing, or making assertions inside the iframes.
• Simplifies Nested Iframe Interaction
  • Allows working with deeply nested iframes by chaining iframe calls without needing custom logic for each level.

How to Set Up Cypress-iframe

1. Install the plugin:

npm install –D cypress-iframe 

2. Import: import it into our Cypress configuration file (support/e2e.ts or support/commands.ts):

import  “cypress-iframe”;  

3. Define a custom command for nested IFrame :

To enhance reusability, we created a custom Cypress command to handle nested iframes.
Here’s the implementation:

Cypress.Commands.add("getNestedIFrame",(selector1: string, selector2: string):any => 
{ 
return cy.iframe(selector1).find(selector2).its("0.contentDocument.body").should("be.visible") 
.then(cy.wrap); 
}) 

This command allows us to access elements inside nested iframes by passing the parent iframe (selector1) and the child element selector (selector2) as parameters. 

4. Example: Navigating Through a Nested iFrame in Cypress

When testing web applications, interacting with elements embedded inside nested iframes can be challenging. In this example, we demonstrate how to use Cypress to navigate and click on a specific section within a navigation bar that exists inside a nested iframe. 

What the Code Does:

This method is designed to:

• Locate a navigation bar section inside a nested iframe.
• Find the specific section of the navigation bar based on the provided name (navBarObjectName).
• Click on the desired section to trigger the corresponding action.

Usage Example

• If we want to click on a navigation bar section labeled “Orchestrator”, we can call the method like this:
• clickOnNavBarSection(“Orchestrator”);

Benefits

• Simplifies handling iframe elements, eliminating manual workarounds. 
• Improves test readability and maintainability. 

2. Cypress-file-upload: File Upload Testing Simplified

Overview

File upload functionality is integral to web applications. The cypress-file-upload plugin makes it easy to test file input fields, drag-and-drop zones, and any multi-file uploads.

Key Features

• Simulates file uploads in tests. 
• Enables virtual file creation for testing without any external dependencies. 
• Supports drag-and-drop and multi-file uploads. 

How to Set Up Cypress-file-upload

npm install cypress-file-upload - -save-dev

3. Import :

import it into our Cypress configuration file (support/e2e.ts or support/commands.ts)

Import   “cypress-file-upload" 

4.Load the File Content

• This loads the content of the file specified by fileName from the cypress/fixtures directory. 
• The second argument, ‘binary’, ensures that the file is loaded in its raw binary format. 

  cy.fixture(fileName, 'binary').then((fileContent) => { 
    cy.getHomeModuleNestedIFrame(commonSelectorsRMF.mainPageFrame, commonSelectorsRMF.navBarFrame, bscSelectors.bscMainPageFrame) 
      .find(commonSelectorsRMF.fileUploadInput) 
      .attachFile({ 
        fileContent: fileContent, 
        fileName: fileName 
      }); 
  }); 
}); 

1. .find(…): 
   Within the nested iFrame, this locates the file input element specified by commonSelectorsRMF.fileUploadInput.             
2. .attachFile(…): 
   This command comes from the Cypress File Upload plugin and simulates uploading a file. 
   • fileContent: The raw binary content of the file, loaded earlier using cy.fixture. 
   • fileName: The name of the file being uploaded. This ensures the uploaded file has the correct name in the application. 

5. Example Usage:

 cy.uploadBinaryTypeFile("dt_csv", inboxSelectors.uploadButton);

Both the custom command and the method accept the same two parameters:

• fileName:  The name of the file to upload (e.g., “dt_csv”). 
  • This is used by cy.fixture to load the file content. 
• fileOperation: The selector for the element that triggers the file upload operation   (e.g., a button). 
  • This is passed to the .find() method to locate and click the element. 

Benefits

• Automates file upload testing, reducing manual effort.
• Handles real-world scenarios like size validation and file previews.
• Integrates easily into CI/CD pipelines.

Best Practices for Using Cypress Plugins

Conclusion

Plugins can help Cypress, an automation tool for testing, reach its full potential. 

Key Advantages

• Improve Test Accuracy: Plugins can enhance test accuracy by adding real events and file uploads. 
• Enhance Team Collaboration: Plugins like Slack reporting improve team collaboration. 

By effectively leveraging plugins, you can streamline your testing process and ensure robust, scalable automation for any project.