Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Essential Cypress Plugins I Can't Live Without
Sam E. Lawrence
Sam E. Lawrence

Posted on • Edited on

     

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'scy-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 asregression, 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') withmousemove andmouseup. 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 untilI found an answer from someone else using Angular that pointed me to thecypress-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 thison 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.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hi, I'm Sam and I'm an advocate for quality software. I'm a Cypress Ambassador and I work as the QA Lead at Pointivo where we're digitizing real-world infrastructure for analysis and maintenance.
  • Location
    ATL
  • Education
    Georgia Tech
  • Pronouns
    He/him/his
  • Work
    QA Lead @ Pointivo
  • Joined

More fromSam E. Lawrence

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp