Test it, then build it

1. Test it, then build it

Welcome back! In this video, we’ll learn how test-driven development, or TDD, makes working with Cursor’s AI assistant easier and more reliable.

2. Test-Driven Development (TDD)

Instead of asking the Cursor agent to build an entire feature at once, we’ll break things into smaller, clear goals and their tests. Each test tells Cursor exactly what we want, and the AI writes code to make that test pass. We’ll continue using our Next.js portfolio app for this example.

3. Test-Driven Development (TDD)

Cursor’s AI assistant can get confused when instructions are vague. TDD helps solve that by defining clear rules for what “working code” means. Cursor can then just focus on meeting those rules without guessing or hallucinating.

4. TDD in action

Let’s start by testing our homepage. In our project, we create a test file. Then, we add a simple test. This test checks if our homepage shows the text with our greeting. Now we can ask the Cursor agent to make the test pass by referencing the file. Cursor will read our test, understand what needs to be done, and update the relevant files automatically.

5. Adding more tests

We can even add more small tests for other parts of our portfolio app like: Does the navigation bar render correctly? Are your project cards showing? Do links open in new tabs? After each test, we can ask the Cursor to make it pass. This iterative loop of writing a test, running it, fixing it, and repeating—keeps both us and Cursor focused on one small goal at a time.

6. Cursor browser for real testing

Now, let’s take this one step further with the Cursor Browser. This tool lets Cursor actually open our app, see how it looks, click buttons, and check for real-world issues. We can either connect it to Cursor’s built-in browser or any external browser like Google Chrome.

7. Cursor browser for real testing

Let’s see that in action by prompting the Cursor agent to start our app and tagging @browser so that we can see the results inside Cursor’s browser. Our Next.js portfolio will open on localhost:3000 inside Cursor’s built-in Browser. We can use the browser tool for test-driven development. For instance, let’s ask Cursor to confirm the title, tagging @browser. Cursor will open the app, take screenshots, and verify it visually—just like a human tester would.

8. Visual testing with images

Beyond automated tests, we can even drag a design screenshot into the chat box and ask the agent to

9. Visual testing with images

Compare this image with @browser localhost:3000 and fix layout differences. Cursor will analyze our screenshot, check spacing, colors, and typography, and adjust the code to match our design. This makes TDD more powerful—we’re not just testing logic anymore, but also the look and feel of our app.

10. Bringing it all together

TDD gives AI structure, and Cursor’s Browser brings that structure to life. Together, they help us: Define clear goals with tests. Let Cursor build toward them. Visually check the results in the Browser. With this flow, we’re not only building faster, we're building with confidence.

11. Let's practice!

Let’s practice Test-Driven Development!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.