Playwright Recorder

🚀 How to Use playwright-mcp?

🚀 Quick Start

Have you ever tried using Cursor or Claude to write Playwright tests? Yes, and the results were a mess.

Why? Because your AI assistant knows nothing about your web page. It's like trying to describe a painting to a blindfolded person. What happens then?

• Unstable tests → The AI is guessing selectors and often gets them wrong.
• Broken scripts → You spend more time fixing tests than writing them.
• Debugging nightmares → The AI can't "see" what's going on, so you have to do all the heavy lifting.

What if the AI could truly understand your web page?

Enter playwright-mcp!

playwright-mcp gives your AI assistant superpowers, making it fully visible. Once installed, playwright-mcp launches a browser controlled by Playwright and gives your AI assistant full access to it. This unlocks:

1. Record interactions → Clicks, inputs, scrolls - let playwright-mcp turn your actions into test code.
2. Get the full DOM → Retrieve HTML and CSS information directly from the browser, ensuring accurate selectors.
3. Take screenshots → Capture screenshots of the page to verify UI changes.
4. Execute code → Run custom JavaScript code in the browser to test dynamic features.
5. Initialize the browser → Start a new browser context and begin a new test session.
6. Validate selectors → Ensure selectors don't break due to page changes.

✨ Features

• Empowers AI assistants to understand web pages fully.
• Records interactions and converts them into test code.
• Retrieves full DOM information for accurate selectors.
• Captures screenshots for UI verification.
• Executes custom JavaScript code in the browser.
• Initializes new browser contexts for test sessions.
• Validates selectors to prevent breakage.

📦 Installation

Run the following command in your terminal:

npm install -g playwright-mcp

💻 Usage Examples

Using with Cursor

1. Install playwright-mcp (the easy part)

   npm install -g playwright-mcp
   

2. Update the configuration file
   • Open the %USERPROFILE%/.cursorrc file.
   • Add the following content:

     {
       "mcpServers": {
         "playwright": {
           "command": "npx",
           "args": ["-y", "playwright-mcp"]
         }
       }
     }
     

3. Restart Cursor (and everything gets better)
4. Verify it's working
   • Enter the following command in Cursor:

     list available mcp tools
     

   • If installed correctly, you should see the list of tools:
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

Now, Cursor is connected to the browser and can write highly context-aware tests! For more information, refer to the Cursor Tutorial.

Using with Claude Desktop

1. Install playwright-mcp (the easy part)

   npm install -g playwright-mcp
   

2. Update the configuration file
   • Locate the configuration file:
     • Windows: %APPDATA%\Claude\claude_desktop_config.json
     • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Update it to the following content:

     {
       "mcpServers": {
         "playwright": {
           "command": "npx",
           "args": ["-y", "playwright-mcp"]
         }
       }
     }
     

3. Restart Claude Desktop (open a new world)
4. Verify it's working
   • Enter the following command in Claude:

     list available mcp tools
     

   • If installed correctly, you should see the list of tools:
     1. get-context
     2. get-full-dom
     3. get-screenshot
     4. execute-code
     5. init-browser
     6. validate-selectors

Now, Claude can access the web page and write highly relevant tests! For more information, refer to the Claude Desktop Tutorial.

📖 View Documentation