paint-brush
The Most Popular Cypress Packages of 2023 by@elaichenkov
634 reads
634 reads

The Most Popular Cypress Packages of 2023

by Yevhen LaichenkovDecember 22nd, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.

Company Mentioned

Mention Thumbnail
featured image - The Most Popular Cypress Packages of 2023
Yevhen Laichenkov HackerNoon profile picture

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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

117

6 806 740

npm | github


There are some limitations:

  • All spec files will be loaded, even after entering "skip mode", but every tests and hooks inside them will be skipped.


  • The spec strategy does not work in headed mode because for Cypress events, it is like running a single spec, so all remaining tests will be skipped.

#9 Cypress Recurse

cypress-recurse debug image


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

111

11 222 311

npm | github


#8 Cypress Cucumber Preprocessor

cypress + cucumber


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

1 273

11 648 073

npm | github


#7 Cypress Plugin Tab

cypress-plugin-tab demo


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

93

11 952 807

npm | github


#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:

GitLab ⭐

Yearly Downloads 📈

Links 🔗

11

17 423 338

npm | gitlab


Cypress does not take snapshots of dom state inside of iframes. Therefore, even if you are using this library, in your tests, when you hover over commands executed within an iframe, a placeholder will be displayed rather than the actual contents of the iframe when the command was executed.


#5 Cypress Axe

cypress-axe terminal reporter


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

593

17 936 645

npm | github


#4 Cypress Wait Until

cypress-wait-until log


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

677

28 309 886

npm | github


#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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

1 769

48 848 038

npm | github


#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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

496

54 823 231

npm | github


#1 Cypress ESlint Plugin🥇

cypress ESlint rules


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:

GitHub ⭐

Yearly Downloads 📈

Links 🔗

681

136 241 804

npm | github


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.