Sebastian Clavijo Suero

Posted on Feb 12

My Top 19+1 Favorite Cypress Plugins for Testing with Wick-like Precision!

#cypress #qa #automation #plugins

My Top 19 Favorite Plugins Of All Time + 1 More Favorite From My QA Engineer Pal Don Welsh.

(Cover image from pexels.com by Jakub Zerdzicki)

ACT 1: EXPOSITION
ACT 2: CONFRONTATION
ACT3: RESOLUTION

ACT 1: EXPOSITION

This is the 8th article in the "Cypress Plugins to Talk About" series, and it's all about... PLUGINS, of course! What would the Cypress community be without the multitude of plugins crafted by fearless and selfless contributors?! 🦾

In this post, I'd like to share my 19 all-time favorite open-source Cypress plugins, although some are not exclusively for Cypress. I also asked my QA pal Don Welsh to share one of his favorites that he thought I might have missed (hence the 19+1). 😊

Some of these plugins are better maintained than others, but their usefulness is absolutely guaranteed!

I must admit that some people might think there is potential bias in this list, as it includes two of my own plugins. However, these personal plugins I developed address longstanding gaps in the Cypress ecosystem, such as schema validation and accessibility. Therefore, I felt it wouldn't be fair to exclude them just because I'm the author of this article. 😅

Check them all out!

ACT 2: CONFRONTATION

I wanted this to be a purposeful and curated list, where each plugin corresponds to a specific use case that any QA automation engineer may encounter in their daily work.

While there are certainly other use cases out there, these are the ones I chose to highlight based on their impact and relevance.

In alphabetical order by use case:

Accessibility

wick-a11y (by Sebastian Clavijo, yours truly 🙂)

It allows you to easily incorporate accessibility checks into your Cypress framework with the command cy.checkAccessibility(). It logs detailed information in the Cypress log, generates HTML documents with screenshots of the violations, and even provides voice support by delivering audible information for accessibility issues, all out-of-the-box.

The interface is fully interactive, allowing you to hover over a violation in the Cypress log or the affected DOM element to highlight it graphically and display a tooltip with the violation information. It is fully configurable by impact levels, rules, and guidelines. This functionality leverages the plugins axe-core (by Deque Systems) and cypress-axe (maintained by component-driven).

API Testing

I'm genuinely torn between these two options: cypress-plugin-api (by Filip Hric) or cy-api (by Gleb Bahmutov). Hmm.... which one to choose?

I really like both! They are very similar in that they simplify API testing within Cypress by directly displaying the API call request and response in the Cypress runner using the command cy.api(). Personally, I find that cy-api offers an edge with clearer data representation, albeit with less detail than cypress-plugin-api.

cypress-plugin-api (by Filip Hric)

cy-api (by Gleb Bahmutov)

API Schema Validation

cypress-ajv-schema-validator (by Sebastian Clavijo, yes me again!)

This plugin offers robust JSON schema validation with the command cy.validateSchema(). It supports schemas provided as plain JSON schemas or as complete OpenAPI 3.0.1 and Swagger 2.0 schema documents.

It leverages the plugin ajv (by Ajv JSON schema validator), and does the legwork for you interpreting the raw results returned by the AJV validator and presenting the errors and their locations in an easy-to-understand manner directly over the validated data.

Additionally, it is fully integrated with both cypress-plugin-api and cy-api plugins.

CI/CD Integration Tools

cypress-fail-fast (by Javier Brea)

It introduces a mechanism to halt Cypress test execution upon the first test failure, embracing the fail-fast philosophy to conserve time and resources in large-scale test suites.

Users can configure it to apply the fail-fast strategy to specific tests, disable it for others, and even use it during parallel runs. This approach is particularly valuable in continuous integration environments where resources might be limited.

Cross-Browser Testing

playwright-webkit (by Microsoft)

This package is a vital tool for extending Cypress's cross-browser testing capabilities to support WebKit browsers.

Interestingly, developed by Microsoft as part of the Playwright project, it provides the only Cypress-friendly solution for testing on WebKit, which is not natively supported by Cypress itself.

Documenting Tests

cypress-plugin-steps (by Filip Hric)

It's a Cypress helper that allows for the integration of step definitions directly within Cypress tests to enhance test readability and maintainability.

What I really like about this plugin is that instead of commenting on your test code with JavaScript comments, you can use the commands cy.section() and cy.step(). These commands serve as comments to your source code and also display those messages in the Cypress log, facilitating debugging.

DOM Selectors

cypress-testing-library (by Testing Library)

Collection of custom Cypress commands and utilities that facilitate the use of DOM Testing Library methods within Cypress. This library ensures DOM queries mimic user interactions, favoring more resilient selectors over CSS.

While the use of data-* attributes is considered best practice (according to the official Cypress documentation), when modifying the application code is not possible, the Testing Library can be a great option over other CSS selectors.

Drag and Drop

cypress-drag-drop (by Fabasoft 4teamwork AG)

It significantly simplifies drag-and-drop interactions in Cypress tests by allowing users to seamlessly simulate these actions on web elements.

By registering the drag and move commands, it enables straightforward execution and supports numerous customizations, offering flexibility for diverse scenarios. Additionally, it provides immediate feedback on the success of drag attempts, thereby enhancing the debugging and testing process with greater efficiency.

Files Upload

cypress-file-upload (by Paul Auramenka)

It offers robust functionality for simulating file uploads, allowing developers to effortlessly attach files to input elements.

This plugin streamlines the testing of file input elements by enabling seamless simulation of various scenarios such as file drag-and-drop, attaching multiple files, and testing different file encodings. With these features developers can efficiently validate diverse file handling scenarios with ease.

Filtering Tests

@bahmutov/cy-grep (by Gleb Bahmutov)

This plugin enables developers to efficiently filter and execute specific tests by applying grep-like logic to test titles and tags. By utilizing environment variables like grep and grepTags, it allows for streamlined and focused test runs.

Supporting various filtering options such as substring matches, tag-based filtering, and logical combinations of tags (using AND, OR, NOT), it optimizes test execution by concentrating on the most relevant tests. This targeted approach not only saves time and resources but also enhances the overall efficiency of the testing process.

I will explore this plugin in detail in one of my upcoming articles in the "Cypress vs Playwright" series.

Helper Tools

cypress-map (by Gleb Bahmutov)

A powerful plugin that introduces additional query commands and assertions for Cypress version 12+, enhancing the framework’s capabilities in handling and manipulating DOM elements and Cypress chainable. It provides a variety of functions such as cy.map, cy.reduce, cy.difference, and more, allowing users to easily transform collections, apply functions to elements, map or reduce arrays directly in Cypress tests, or identify differences between two arrays or objects.

New: Recently, the plugin introduced a new assertion called possess, which can check if the subject has a given property and verify the property's value while yielding the original subject. I think this feature has become my favorite aspect of this plugin!

iFrame Handling

cypress-iframe (by Kevin Groat)

Designed to streamline interactions with iframes in Cypress, this plugin offers custom commands such as cy.frameLoaded(), cy.iframe(), and cy.enter().

These commands allow users to effectively detect when an iframe has fully loaded and to interact with elements contained within it, enhancing the reliability and efficiency of web testing.

Linting

eslint-plugin-cypress (by Cypress.io)

This tool significantly enhances testing practices by integrating Cypress-specific linting rules into ESLint, ensuring adherence to recommended best practices and maintaining consistent style in test scripts. It's an essential asset for developers, because allow them to catch common errors and uphold clean, efficient code. Key rules include prohibiting the assignment of cy call return values, arbitrary waits, and the use of cy.pause() and async/await in Cypress tests.

Additionally, its integration with the eslint-plugin-no-only-tests (by Levi Buzolic) helps identify overlooked .only annotations, keeping the test suite robust.

Mouse Events

cypress-real-events (by Dmitriy Kovalenko)

It allows the simulation of native system events within Cypress, enhancing the realism of user interactions like clicks, typing, hovering, and more. By utilizing the Chrome DevTools Protocol, this plugin ensures these events are recognized as trusted by the system, enabling more accurate testing scenarios.

These real events are especially useful in situations where traditional simulated events in Cypress, like .click() and .trigger(), fall short, such as interacting with native alerts or clipboard functionalities. The plugin is designed to work only with Chromium based browsers, so Firefox is not supported.

On-boarding

cye2e (by Ademola Bhadmus)

Designed to help users set up a Cypress end-to-end testing project with ease by answering a series of questions. This tool is particularly beneficial for newcomers to QA engineering and automation, simplifying the process of integrating Cypress with a Behavior-Driven Development (BDD) framework, and setting a reporter. Users can create a customizable Cypress template to fit their specific needs, making setup straightforward and stress-free.

I discussed this plugin in depth in my article The Test Drama (The Opening Salvo): Cypress vs Playwright Installation - The Good, The Bad, and the... Bug-ly!

Output Logging

cypress-log-to-output (by Zach Bloomquist)

This tool efficiently redirects all console logs from the browser—such as console.log, console.info, and console.error—directly to the terminal's stdout.

This capability proves particularly beneficial when developing plugins that register analysis results in the terminal without the need for specific cy.task() commands. It ensures clear and immediate access to browser-generated insights, enhancing the development and debugging process.

Parallelism

cypress-split (by Gleb Bahmutov)

It allows users to distribute Cypress test specifications across multiple parallel CI machines, enhancing testing speed and efficiency. It supports GitLab CI, CircleCI, BuildKit, GitHub Actions, Jenkins, and other platforms.

This approach functions without relying on external services like Cypress Cloud Orchestration, streamlining the setup and execution of parallel tests locally or in CI environments. It is particularly beneficial for optimizing resource usage and reducing test duration in complex projects with extensive test suites.

Reporting

allure-cypress (by Allure Framework)

Allure JS is a comprehensive reporting tool as part of the Allure Framework that integrates with various JavaScript test frameworks such as CucumberJS, Vitest, Jest, Jasmine, Mocha, Playwright, Cypress, Newman, and CodeceptJS.

It supports visualization of test results by aggregating shared components and reporters to present results in a structured, aesthetic manner. Available on npm as allure-cypress, Allure JS significantly aids in diagnosing test failures promptly by standardizing test report layouts.

Additionally, wick-a11y Cypress accessibility plugin offers full integration with allure-cypress, providing enhanced capabilities for accessibility testing and reporting.

Test Runner Additions for Debugging

cypress-plugin-grep-boxes (by Dennis Bergevin)

It is designed to enhance Cypress testing experience in Open Mode by allowing users to filter and run specific tests selected directly from the Cypress Log UI.

By using this plugin, developers can efficiently manage and isolate particular sets of tests, ensuring that the focus remains on relevant testing scenarios without unnecessary overhead. This targeted approach can improve testing speed and facilitate debugging.

ACT3: RESOLUTION

Okay, I'm not going to bore you now with a long blah, blah, blah, conclusion since I think these plugins speak for themselves and have made their case. ✔️

I want to extend a special thanks to Don Welsh for his valuable contributions to this article and for all the support he offered when I first began working with Cypress and exploring the incredible world of QA!

I'd love to hear from you! Please don't forget to follow me, leave a comment, or a reaction if you found this article useful or insightful. ❤️ 🦄 🤯 🙌 🔥

You can also connect with me on my new YouTube channel: https://www.youtube.com/@SebastianClavijoSuero

If you'd like to support my work, consider buying me a coffee or contributing to a training session, so I can keep learning and sharing cool stuff with all of you.
Thank you for your support!

Forem