Autofix Browser Errors with the Playwright MCP in Cursor

Fixing runtime errors in web applications, especially those that require browser interaction or appear in stages, can be a tedious back-and-forth. This lesson demonstrates how to create a powerful, automated debugging loop using Playwright MCP integrated into Cursor IDE via custom Rules, allowing the AI to interact with your live application, identify errors, and iteratively fix them.

Workflow demonstrated in this lesson:

Install and configure the Playwright MCP server in Cursor settings.
Create a custom Cursor Rule (e.g., "autofix") instructing the AI to:
- Use Playwright MCP to open a specified URL in a browser.
- Check for any errors displayed on the page.
- Automatically attempt to fix those errors in your codebase.
- Iterate this process until all errors are resolved.
Invoke the custom rule within Cursor's AI Agent, providing the application's URL.
Observe the AI agent launch Playwright, navigate the browser, identify errors, and apply code changes.
For errors hidden behind UI elements (like an error button), provide a screenshot to the AI, instructing it to interact with the UI to reveal and then fix subsequent errors.

Key benefits:

Automated Debugging Cycle: Let the AI handle the repetitive task of launching, testing, and fixing common web application errors.
Iterative Problem Solving: The AI can tackle multiple errors sequentially, making changes and re-testing.
Browser Interaction: Leverages Playwright to understand the application's state directly from the browser.
Visual AI Assistance: Use screenshots to guide the AI in interacting with UI elements to uncover and fix deeper issues.
Reduced Manual Effort: Spend less time manually debugging and more time on feature development.

By combining Playwright MCP with Cursor's AI Agent and custom Rules, you can significantly streamline your web development workflow, turning a frustrating debugging process into an automated one.


    "playwright": {
      "command": "pnpm",
      "args": ["dlx", "@playwright/mcp@latest"]
    }


Please use the Playwright MCP to open a browser to the URL I provide, check for any errors, and then automatically fix those errors in my codebase, then continue to iterate until all the errors are gone.

[00:00] I have the Playwright MCP installed in my main cursor config under MCP and I'll include this configuration which you can copy and paste. And what I'm going to do is in this application I'm working on I'll open the agent with command-I. I'm going to hit command-shift-P and create a new cursor rule And this rule is going to be auto fix. We'll leave it at manual and I'll describe the rule as, please use the playwright MCP to open a browser to the URL I provide, check for any errors, and then automatically fix those errors in my codebase, then continue to iterate until all the errors are gone. Then let that paste in and now we have a rule we can use in our agent.

[00:41] I'm just going to go ahead and close all. So you'll see this isn't influenced by anything else. And I'm going to at reference my rule of autofix, and then just paste in my localhost URL. Then I can just hit enter and sit back and leave my desk. So you'll see it opens the browser.

[01:01] I'm going to scooch this over. It finds the errors and it fixes the first error. And I intentionally included two errors so it'd have to fix one and then find the second one. So we've moved on to the next error. And now it fixed the import and I literally did not have to do anything.

[01:21] So it fixed all the errors, all the dialogues are gone, but I still have this little red button that means something, but this error doesn't show up until you click on it. So I'm going to take a little screenshot of this, drop the screenshot into the chat, In my new conversation, I'm going to add my auto-fix, paste in the URL, then tell it, please click on that red button that should pop open a dialog, which will reveal more errors for you to fix. Then sit back and let this one fix it. Now it provided a client-side fix here. Our little red button is gone.

[01:51] If I refresh and double-check, no more hydration error.

Autofix Browser Errors with the Playwright MCP in Cursor

John Lindquist

Transcript