.webp?#)
Cypress Meets Cursor: A Smarter Way to Write Tests
What is Cursor? Cursor is an AI-powered code editor released in 2023, built on top of Visual Studio Code. It was created by a team of students at MIT and quickly gained traction due to its familiar interface and seamless import of VS Code themes and settings. The standout feature? AI integration. Cursor brings advanced AI capabilities like code completion and an incredibly fast, responsive chat assistant. These tools don’t replace your programming skills, but they significantly speed up your workflow, especially for tasks like writing repetitive test code. I personally used Cursor this year while building Cypress automation tests, and among the many tools I tried, this one fit my workflow the best. Using Cursor to Write Cypress Tests Let’s break down Cursor’s features and how to best use them to improve the quality of our tests and get amazing results. It’s worth mentioning that I’ve been using the Pro plan, but they also offer a free version which is more than enough if you want to test its capabilities or don’t use it that often. Code Autocompletion As soon as you start writing a test, Cursor begins predicting your next steps. For example, let’s say you’re writing a simple homepage test. You’ve written your describe block and the initial steps like visit() and checking page visibility. Cursor instantly suggests the next assertion in the correct Cypress format: You just press Tab and it autocompletes the suggestion. You can adjust it if needed, but it usually follows the same pattern you’ve already established. This applies across the board—Cursor understands your use of Cypress, recognizes the structure, and even autocompletes methods, custom commands, or API calls. Honestly, this is one of my favorite parts of using Cursor (especially over other Copilot implementations). Test code is often repetitive, and this helps you move fast without compromising on consistency. The Chat Assistant Cursor’s chat is powerful. You can ask questions, give instructions in natural language, and get precise code edits in return. There are three main modes: 1. Agent The Agent mode is the most powerful one. It has access to your entire codebase, documentation, terminal, and file system. It can edit files, run commands, and even browse the web. For example, I typed: “Add a custom command for a login method in the commands.js file” And it delivered a complete, reusable custom command using getByTestId and parameterized login values—without me needing to explain anything about my codebase. That’s the magic of having full context awareness. 2. Ask The Ask mode is a “read-only” chat designed for exploration and learning. You can ask about specific parts of the codebase, and it’ll respond intelligently. However, it won’t modify files for you. For instance, using the same prompt as above, it still offered a login command, but this time it required manual copy-pasting. 3. Edit Edit allows you to highlight code and describe what you want changed. Cursor will then suggest and apply changes based on your instructions. While each mode has its strengths, Agent combines the capabilities of both Ask and Edit, making it the fastest and most efficient option in most cases. Choosing Your LLM Model Cursor also lets you choose which large language model to use—or you can set it to Auto, which selects the best model dynamically based on your prompt. This gives you flexibility while still optimizing for speed and accuracy. Integrated Terminal Another killer feature: Cursor’s chat has terminal access. You can run commands directly from the chat interface without switching windows. For example, if you’ve just generated a test, you can run it immediately by clicking a button: Super helpful when debugging or running quick verifications. Handling Errors and Debugging Let’s say a test fails. Instead of pasting logs or searching Stack Overflow, you can: • Paste the error • Or even just send a screenshot In one case, I simply uploaded a screenshot with the prompt: “I have this error” Without any additional context, Cursor identified the issue and provided a fix. This is a serious time-saver when debugging tricky problems:
What is Cursor?
Cursor is an AI-powered code editor released in 2023, built on top of Visual Studio Code. It was created by a team of students at MIT and quickly gained traction due to its familiar interface and seamless import of VS Code themes and settings.
The standout feature? AI integration. Cursor brings advanced AI capabilities like code completion and an incredibly fast, responsive chat assistant. These tools don’t replace your programming skills, but they significantly speed up your workflow, especially for tasks like writing repetitive test code.
I personally used Cursor this year while building Cypress automation tests, and among the many tools I tried, this one fit my workflow the best.
Using Cursor to Write Cypress Tests
Let’s break down Cursor’s features and how to best use them to improve the quality of our tests and get amazing results.
It’s worth mentioning that I’ve been using the Pro plan, but they also offer a free version which is more than enough if you want to test its capabilities or don’t use it that often.
Code Autocompletion
As soon as you start writing a test, Cursor begins predicting your next steps. For example, let’s say you’re writing a simple homepage test. You’ve written your describe block and the initial steps like visit() and checking page visibility. Cursor instantly suggests the next assertion in the correct Cypress format:
You just press Tab and it autocompletes the suggestion. You can adjust it if needed, but it usually follows the same pattern you’ve already established.
This applies across the board—Cursor understands your use of Cypress, recognizes the structure, and even autocompletes methods, custom commands, or API calls.
Honestly, this is one of my favorite parts of using Cursor (especially over other Copilot implementations). Test code is often repetitive, and this helps you move fast without compromising on consistency.
The Chat Assistant
Cursor’s chat is powerful. You can ask questions, give instructions in natural language, and get precise code edits in return. There are three main modes:
1. Agent
The Agent mode is the most powerful one. It has access to your entire codebase, documentation, terminal, and file system. It can edit files, run commands, and even browse the web.
For example, I typed:
“Add a custom command for a login method in the commands.js file”
And it delivered a complete, reusable custom command using getByTestId and parameterized login values—without me needing to explain anything about my codebase. That’s the magic of having full context awareness.
2. Ask
The Ask mode is a “read-only” chat designed for exploration and learning. You can ask about specific parts of the codebase, and it’ll respond intelligently. However, it won’t modify files for you.
For instance, using the same prompt as above, it still offered a login command, but this time it required manual copy-pasting.
3. Edit
Edit allows you to highlight code and describe what you want changed. Cursor will then suggest and apply changes based on your instructions.
While each mode has its strengths, Agent combines the capabilities of both Ask and Edit, making it the fastest and most efficient option in most cases.
Choosing Your LLM Model
Cursor also lets you choose which large language model to use—or you can set it to Auto, which selects the best model dynamically based on your prompt. This gives you flexibility while still optimizing for speed and accuracy.
Integrated Terminal
Another killer feature: Cursor’s chat has terminal access. You can run commands directly from the chat interface without switching windows. For example, if you’ve just generated a test, you can run it immediately by clicking a button:
Super helpful when debugging or running quick verifications.
Handling Errors and Debugging
Let’s say a test fails. Instead of pasting logs or searching Stack Overflow, you can:
• Paste the error
• Or even just send a screenshot
In one case, I simply uploaded a screenshot with the prompt: “I have this error”
Without any additional context, Cursor identified the issue and provided a fix. This is a serious time-saver when debugging tricky problems:
