How to Use playwright-mcp with Cursor IDE - Complete Guide

You've set up Cursor and Playwright MCP, and now it's time to let AI write your Playwright tests the right way. In this guide, we'll take you through writing an end-to-end Playwright test for MakeMyTrip search using Cursor—without manually handling selectors or debugging flaky AI-generated code.

By the end of this, you'll know how to:

• Open a browser using Cursor chat
• Interact with a website and capture test steps
• Add extra context to make the test smarter
• Extract the right DOM elements
• Generate a complete, AI-assisted Playwright test case

If you're tired of manually writing test scripts, let Cursor do the work for you. Let's get started.

---

Before you begin: Check If Playwright MCP is Installed

Before anything else, make sure Playwright MCP is installed on your Cursor IDE.

• Once installed, you'll see a tool icon in Cursor. Click it.
• This will bring up a list of available Playwright MCP tools. Check the screenshot reference to see what to expect.
• If you don't see the tools, head over to the installation guide and set it up first.

---

Let's Start Writing an End-to-End Playwright Test

We're going to write a full Playwright test for MakeMyTrip Search. Instead of manually writing selectors and hoping they work, we'll let Cursor watch our interactions, record them, and generate the test for us.

---

Step 1: Open a Playwright-Controlled Browser

To begin, we need a browser window that Cursor can see and interact with.

1. In Cursor chat type:

   Browser init

2. Since this tool requires a URL, Cursor will ask you to enter one.

3. Enter the MakeMyTrip website:

   makemytrip.com

4. Cursor will ask for permission to run the tool. Allow it.

5. Once approved, a browser window will open.

At this point, you can start interacting with the MakeMyTrip website just like you would manually.

Step 2: Record Your Interactions

Here's where the magic happens. After you click "Start recording", and start using the website - clicking, searching, filling out forms - Cursor will record every action.

Look at the right-hand side of Cursor's interface. You'll see every step you take being logged in real-time.

This means no more:

1. Manually writing test steps
2. Guessing which selectors to use
3. Debugging flaky AI-generated test cases

Everything you do is automatically turned into Playwright test steps.

Step 3: Add Extra Context (The Secret Sauce for Better Tests)

Most test recording tools just capture actions but don't understand what's actually happening on the page.

Cursor, however, can generate smarter test cases if we provide extra context.

1. At the bottom-right corner, you'll see a plus (+) icon. Click it.
2. Select DOM.
3. Now, choose a specific part of the page that's important for the test.

By doing this, you're telling Cursor:

• Which elements actually matter in your test
• Which selectors to focus on
• How to make your Playwright test more reliable and accurate

Once you've selected a DOM section, you'll see the extracted HTML appear below your recorded steps. This ensures that Cursor picks the best possible selectors instead of making AI guesses.

Step 4: Extract Context for the Final Test Case

Now that recording is complete, it's time to give Cursor all the information it needs to write a rock-solid Playwright test.

1. Go to Cursor and ask it to write the test case.

2. Instead of immediately generating a test case, Cursor will need more context from your recorded interactions.

3. Ask Cursor to call another tool, either:

   get context

4. This tool will retrieve all recorded interactions along with the exact HTML component that you selected earlier.

At this point, Cursor will describe all interactions it captured.

• It will list the actions you performed.
• It will show the selected elements with their context.

Now, Cursor has everything it needs to generate a Playwright test that actually works.

Step 5: Ask Cursor to Write the Playwright Test Case

The last step is simple:

1. Ask Cursor:

   Using the context, help me write a Playwright test case for e2e testing.

2. Cursor will analyze the recorded interactions, extracted DOM, and selectors.

3. It will generate a fully automated Playwright test.

You'll see how Cursor writes a clean, structured Playwright test based on your recorded session.

This is not just another AI-generated script—this is a fully usable, highly accurate Playwright test with validated selectors and reliable interactions.

---

What Happens Next?

You now have a complete test case. Here's what to do next:

1. Copy the generated Playwright test code and add it to your test suite.

2. Run it with Playwright using:

   npx playwright test

3. Fine-tune selectors or assertions if needed.

And that's it. You've just written an end-to-end Playwright test using Cursor and Playwright MCP—without manually writing a single selector.

---

Why This Changes Everything for Playwright Testers

Writing Playwright tests manually is slow, tedious, and prone to errors.

With playwright-mcp, you:

• Record actual interactions instead of guessing test steps
• Extract the real DOM instead of using unreliable selectors
• Generate full test cases instead of writing them from scratch
• Validate selectors before running tests, so they don't break unexpectedly

This isn't just another AI tool that sort of helps. This is an AI-powered test assistant that actually understands your web page and writes accurate, reusable tests.

Bonus:

Here is a more descriptive prompt for you to use:

## DON'T ASSUME ANYTHING. Whatever you write in code, it must be found in the context. Otherwise leave comments.

    ## Goal
    Help me write playwright code with following functionalities:
    - [[add semi-high level functionality you want here]]
    - [[more]]
    - [[more]]
    - [[more]]

    ## Reference
    - Use @x, @y files if you want to take reference on how I write POM code

    ## Steps
    - First fetch the context from `get-context` tool, until it returns no elements remaining
    - Based on context and user functionality, write code in POM format, encapsulating high level functionality into reusable functions
    - Try executing code using `execute-code` tool. You could be on any page, so make sure to navigate to the correct page
    - Write spec file using those reusable functions, covering multiple scenarios

This prompt will also make sure that the selectors are working(A problem we face with LLM based tests a lot).

Now that you understand how to write a basic test case, head over to advanced features for more advanced usage.

Happy coding!