The Most Popular Cypress Packages of 2023

The year is nearly finished, and I've decided to spend several hours uncovering the most popular Cypress packages of the year. So, to achieve this, I've gathered tons of data such as download count from the NPM registry, community feedback, and other sources from GitHub, aiming to identify the top-ranking packages.

My article will introduce you to some innovative Cypress plugins and highlight the crucial packages that have significantly contributed to Cypress's success over the past year.

#10 Cypress Fail Fast

The cypress-fail-fast plugin enables fail-fast Cypress, skipping the rest of the tests on the first failure. Moreover, the plugin can be configured to bypass all the remaining tests in the current specification file, during the current execution, or even across parallel executions.

Fun fact, this plugin was created using ideas suggested by the community in response to a specific issue on Cypress.

Installation:

npm i cypress-fail-fast

Information:

#9 Cypress Recurse

The cypress-recurse plugin provides a way to re-run Cypress commands until a predicate function returns true.

Installation:

npm i cypress-recurse

Usage:

import { recurse } from 'cypress-recurse';

it('gets 7', () => {
  recurse(
    () => cy.task('randomNumber'),
    (n) => n === 7,
  )
})

Information:

#8 Cypress Cucumber Preprocessor

This preprocessor aims to provide a developer experience and behavior similar to that of Cucumber, to Cypress.

Installation

npm i @badeball/cypress-cucumber-preprocessor

Information:

#7 Cypress Plugin Tab

The cypress-plugin-tab plugin adds a custom tab command. That can help you to accomplish your testing needs.

Installation:

npm i cypress-plugin-tab

Usage:

// type foo, then press tab, then type bar  
cy.get('input').type('foo').tab().type('bar')

// tab into the first tabbable element on the page
cy.get('body').tab()

// tab into the currently focused element
cy.focused().tab()

Information:

#6 Cypress iframe

The cypress-iframe package comes with three Cypress’ custom commands that bring iframe support.

Installation:

npm i cypress-iframe

Usage:

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.frameLoaded()

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.iframe().find('.some-button').should('be.visible').click()

// This will verify that the iframe is loaded to any page other than 'about:blank'
cy.enter('#my-iframe').then(getBody => {
  getBody().find('.some-button').should('be.visible').click()
  getBody().contains('Some hidden element').should('not.be.visible')
})

Information:

#5 Cypress Axe

The cypress-axe plugin brings accessibility testing to your Cypress tests.

Installation:

npm i cypress-axe

Usage:

// This will inject the axe-core runtime into the page under test
cy.injectAxe()

// This will run axe against the document at the point in which it is called
cy.checkA11y()

Information:

#4 Cypress Wait Until

The cypress-wait-until plugin adds the Cypress waiting power to virtually everything. Use this plugin to wait for everything not expected by Cypress wait.

Installation:

npm i cypress-wait-until

Usage:

// wait until a cookie is set
cy.waitUntil(() => cy.getCookie('token').then(cookie => Boolean(cookie && cookie.value)));

// wait until a global variable has an expected value
cy.waitUntil(() => cy.window().then(win => win.foo === "bar"));

Information:

#3 Cypress Testing Library 🥉

Simple and complete custom Cypress commands and utilities that encourage good testing practices.

Installation:

npm i @testing-library/cypress

Usage:

cy.findAllByText('Button Text').should('exist')

cy.findAllByLabelText('Label text', {timeout: 7000}).should('exist')

Information:

#2 Cypress File Upload 🥈

The cypress-file-upload package adds a custom Cypress command that allows you to make an abstraction on how exactly you upload files through HTML controls and focus on testing user workflows.

Installation:

npm i cypress-file-upload

Usage:

cy.get('[data-cy="file-input"]').attachFile('myfixture.json');

cy.get('[data-cy="dropzone"]') .attachFile('myfixture.json', { subjectType: 'drag-n-drop' });

cy.get('[data-cy="file-input"]') .attachFile(['myfixture1.json', 'myfixture2.json']);

Information:

#1 Cypress ESlint Plugin🥇

Official Cypress ESlint plugin offers many advantages, especially for maintaining code quality and consistency. Here are some key points highlighting why you should consider using ESLint: Code Consistency, Catch Errors Early, Improve Code Quality, Automated Fixing, Prevent Technical Debt, and many more.

In my view, the plugin is a valuable tool for maintaining high code quality, improving developer productivity, and ensuring consistency across your projects, making it an essential part of modern Cypress test development. So, in case you are not using it then you should install it in your current Cypress project now.

Installation:

npm i eslint-plugin-cypress

Information:

To sum up my research of the top 10 most popular Cypress packages, as detailed in this article, showcases Cypress's transformative impact on developers' approach to testing.

All of these packages excel not only in streamlining and simplifying testing procedures but also in significantly boosting the quality and dependability of the open-source world.

Additionally, certain plugins are ingeniously designed to circumvent Cypress's inherent limitations, illustrating the adaptability and innovation within the toolset.

Furthermore, supporting these outstanding plugins on GitHub with a star is a great way to contribute to the community and acknowledge the authors' efforts.

Follow me on GitHub and Twitter.