Cypress Tips May 2024
Cypress and GitHub Copilot, plus a great plugin cypress-plugin-last-failed
Cypress And GitHub Copilot
This month I have been busy preparing and delivering the presentation “Writing Tests Using GitHub Copilot“ at iJS San Diego conference. You can find the slides at https://slides.com/bahmutov/writing-tests-using-github-copilot together with all my other slide decks. The presentation was well received by the audience and highly rated (5/5) by the attendees using the conference app. You should be able to watch the video on the DevMio platform. The main takeaways from the presentation are summarized below:
Copilot Good Points
Easy test data generation
Good starting point
Follows the comments
Speeds up typing
Copilot Weaknesses
Hallucinations
Outdated information
Unorthodox suggestions
Complex suggestions
If you are thinking about using Copilot to generate code and tests, I would say:
❌ writing code that I do not know how to write myself (new language or framework)
❌ write big chunks of code (generate 10 tests at once)
✅ speeding up writing code guided by comments
✅ test data generation
✅ code or data in-place transformations
😒 commit message generation
❤️ the "/explain" command
Overall, GitHub copilot made me more productive when writing tests. If you want to see how Copilot behaves and how to direct it to produce better testing code, check out my online course “Write Cypress Tests Using GitHub Copilot”
Plugin Spotlight 🔦
Recently Dennis Bergevin wrote a cool plugin cypress-plugin-last-failed with both CLI and Cypress UI pieces to run just the previously failed tests locally. Here is the plugin’s own demo GIF showing re-running the failed tests by clicking a button:
I should probably make a lesson or two about this plugin and add it to my “Cypress Plugins” course. Great job, Dennis!
Cypress Quiz
Yevhen Laichenkov created a nice online advanced Cypress Quiz. Check it out, you will learn something new. Every question has an explainer, which is great.
Nice job, Yevhen!
Cypress Component Testing Supports Vite v5
Finally, Cypress v13.10.0 added support to components bundled using Vite v5 (Cypress previously supported Vite v4). Finally, I can bump my example repo https://github.com/bahmutov/visual-store to use Vite v5 when showing visual component testing through the course “Visual Testing With Cypress“.
Cypress Toy Visual Testing Plugin
Speaking of open-source local visual testing: I am using my plugin cypress-toy-visual-testing to do some light local visual testing. I am thinking about the plugin’s future. There are a lot of ideas, but I want to make sure the effort and time that goes into adding new features and debugging errors is sustainable. I think the plugin should be dual-licensed:
free use for open-source public projects
free use for commercial companies up to 10 people
small yearly fee or donation commercial companies up to 500 people
a larger yearly fee for commercial companies above 500 employees
I want this plugin to be safe to use while the company is small and force larger companies that use it successfully to pay for the benefits they derive from the open-source efforts.
Happy Testing!