Quick Wins with Playwright MCP + Cursor

I’ve been experimenting with Playwright’s MCP server tool inside Cursor, and honestly—it’s kind of magic.

I spun up the classic TodoMVC app just to test things out, and within minutes I had working UI tests:

Add a to-do item Remove a to-do item Check that it stuck

No fuss. No deep dive into selectors. Just fast, clean interaction with a real app.

Where MCP Shines

Here’s where the Playwright MCP + Cursor combo really shines:

When you know what you want the test to do, but you don’t want to burn 30 minutes getting the TypeScript syntax just right.

In other words:

You’re not designing a robust suite (yet).

You’re just trying to get real signal fast.

That’s where this workflow flies.

AI + Testing = Acceleration (Not Replacement)

To be clear, architecting a solid test suite still takes work—strategy, structure, edge cases, naming conventions, cleanup logic. You know… all the stuff that makes tests worth running in the long term.

But that’s the beauty here:

AI isn’t replacing any of that. It’s just accelerating the ramp-up.

You can sketch ideas, try things, refine.

Then build the real suite once you know what matters.

My Takeaway So Far

Tools like this change how I think about test scaffolding:

Short feedback loops: Try something, see it run, improve it. AI as a testing assistant: Not writing everything, but getting you started. Speed without sloppiness: When used well, these tools speed you up without skipping important thinking.

If you’ve ever put off writing a test because setting up the test felt harder than the test itself… try this combo.

It’s not perfect, but it’s fast.

And sometimes, that’s exactly what you need.

⚡ Quick Start Guide: Playwright MCP + Cursor

🛠️ Step 1: Install the TodoMVC App

Clone the classic TodoMVC example or use your own small app to experiment.

git clone https://github.com/tastejs/todomvc.git cd todomvc/examples/react npm install npm start

This gives you a local app to write and run UI tests against.

🧪 Step 2: Add Playwright + MCP Support

If you haven’t already, install Playwright:

npm install -D @playwright/test npx playwright install

Then, to enable MCP in Cursor:

Visit https://docs.cursor.com/tools/mcp Scroll to the Playwright card Click “Add Playwright to Cursor”

I didn’t even need to run anything manually. I just restarted Cursor once, and it connected automatically. Your mileage may vary, but the setup was impressively smooth.

💡 Step 3: Write and Run Tests (with AI Help)

Once MCP is active, open a new tab in Cursor and run this prompt to explore your local app:

use the playwright mcp tool to explore and write tests for localhost:8080

You can experiment with other versions of the prompt to add more detail, like:

“Start by writing a basic test that adds a todo and checks that it appears.” “Write 3 test cases for deleting todos, including an edge case where the list is empty.”

The MCP connection lets Cursor explore the running app, interact with it, and generate working Playwright test scripts—without you needing to wire everything up manually.

✨ Bonus: Sample .cursorrules Prompt

@testcases - Playwright Test Skeleton You are a senior QA engineer using Playwright Test. Write a basic UI test to verify the following: [user adds a todo item, sees it listed, and deletes it]. Use TypeScript and the Playwright testing API.

Or stick with direct prompting in the Cursor composer for more control.

🧠 Pro Tips

Don’t skip test teardown—AI might forget to clean up state. Keep a scratchpad folder for rough drafts and auto-generated tests. Use this approach to validate flows before you design a full suite.

Final Thought

You still need good judgment, especially when building long-term test infrastructure. But this tooling removes so much of the friction at the beginning of the process.

It’s not about skipping craft.

It’s about skipping tedium.

And I’m here for that.

Beau Brown

Testing in the real world: messy, human, worth it.

Comments

Leave a comment