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 plugin enables fail-fast Cypress, skipping the rest of the tests on the first failure. Moreover, the plugin can be to bypass all the remaining tests in the current specification file, during the current execution, or even across parallel executions. cypress-fail-fast configured 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 The c plugin provides a way to Cypress commands until a predicate function returns true. ypress-recurse re-run 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 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 The plugin adds a custom tab command. That can help you to accomplish your testing needs. cypress-plugin-tab 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 package comes with three Cypress’ custom commands that bring iframe support. cypress-iframe 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 The plugin brings accessibility testing to your Cypress tests. cypress-axe 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 The plugin adds the Cypress waiting power to virtually everything. Use this plugin to wait for everything not expected by Cypress wait. cypress-wait-until 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 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. cypress-file-upload 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🥇 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: , , , , and many more. Code Consistency, Catch Errors Early Improve Code Quality Automated Fixing Prevent Technical Debt 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 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. To sum up 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 and . GitHub Twitter

Augmentastic || Augmented Reality

Read My Stories

Too Long; Didn't Read

Making security fun one episode at a time

The Most Popular Cypress Packages of 2023

Too Long; Didn't Read

Company Mentioned

Yevhen Laichenkov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Most Popular Cypress Packages of 2023

Too Long; Didn't Read

Company Mentioned

Yevhen Laichenkov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES