Essential Cypress Plugins I Can't Live Without

@bahmutov/cy-grep (NPM)

I'm a big fan of and very grateful for the work that @bahmutov does in educating and providing tools for the Cypress community. Cypress doesn't provide a good solution out-of-the-box for running arbitrary selective groups of tests. Gleb's cy-grep plugin handles this beautifully, whether you rely on test name conventions or prefer to use tags to categorize and organize your tests.

On my team, we are currently only using a single tag, smoke, to mark our smoke tests (we refer to more data-intensive tests as regression, though I'm looking for a better term). Even though we're only categorizing tests based on this single dimension, the plugin has already had a big impact on our testing strategy, frequency, and quality. We're now able to trigger small smoke suites in response to every developer change, and when tests flake or fail we're able to get back into the code faster for a fix.

As we look toward the future, it seems inevitable that we will add more tags to our tests, and it's nice to know that we don't have to use some sort of contrived naming hack or specific directory placement to control the slicing and filtering of our tests. This plugin will make it easy for us to develop new categories for our test cases well into the future.

cypress-real-events (NPM)

I work on an Angular app, and it doesn't always play nicely with browser automation. I recently needed to use drag-and-drop and couldn't get it to work using things like .invoke('mousedown') with mousemove and mouseup. I tried using the @4tw/cypress-drag-drop (NPM) plugin, but it didn't work for me. It actually could initiate a click/drag, but then couldn't move the mouse cursor beyond the parent container - and I couldn't debug the issue after a couple hours of trying. It might be a great plugin option if you're using React, I can't comment.

I dug around on Stack Overflow until I found an answer from someone else using Angular that pointed me to the cypress-real-events plugin. Once I got it set up, it worked like a charm, and now I'm able to approach a whole new class of problems in my testing framework.

cypress-real-events uses a novel way to send input events to the browser. By default, Cypress uses simulated events via Javascript. In contrast, cypress-real-events uses the Chrome Devtools Protocol, which can be much more reliable. If you're interested, you can read more about this on their README.

Honorable mentions

• prettier (NPM): I cannot overstate the value of having consistent code style, especially if you work on a team. By setting rules about our code, my team has been able to achieve much higher code quality.
• cypress-command-chain (NPM): This plugin can help with test debugging, as it gives a condensed view of actions firing off from Cypress' perspective.