LocatorLabs MCP Server

🎯 Intelligent Playwright locator generation powered by AI

An MCP (Model Context Protocol) server that provides smart locator generation for Playwright test automation.

Works directly in VS Code (with GitHub Copilot), Cursor, Windsurf, Cline, and Claude Desktop. No extra apps needed - just your favorite IDE!

⚡ Quick Install

VS Code (v1.99+) - Copy & run in terminal:

code --add-mcp '{"name":"locatorlabs","command":"npx","args":["-y","locatorlabs-mcp"]}'

Cursor:

cursor --add-mcp '{"name":"locatorlabs","command":"npx","args":["-y","locatorlabs-mcp"]}'

Windows PowerShell:

code --add-mcp '{\"name\":\"locatorlabs\",\"command\":\"npx\",\"args\":[\"-y\",\"locatorlabs-mcp\"]}'

✨ Features

🔧 Supported Frameworks

🚀 Quick Start

For VS Code (v1.99+ with GitHub Copilot)

One-Line Install (Mac/Linux):

code --add-mcp '{"name":"locatorlabs","command":"npx","args":["-y","locatorlabs-mcp"]}'

One-Line Install (Windows PowerShell):

code --add-mcp '{\"name\":\"locatorlabs\",\"command\":\"npx\",\"args\":[\"-y\",\"locatorlabs-mcp\"]}'

Or Manual Setup:

1. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
2. Type: MCP: Add Server
3. Select: Command (stdio)
4. Command: npx
5. Args: -y locatorlabs-mcp

Using with GitHub Copilot:

1. Enable Agent Mode: Settings → Search chat.agent.enabled → Enable
2. Open Copilot Chat (Ctrl+Cmd+I / Ctrl+Alt+I)
3. Switch to Agent mode (dropdown at top)
4. Chat: "Get locators for login button on https://saucedemo.com"

For Claude Desktop

Step 1: Open config file

• Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Step 2: Add this configuration:

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

Step 3: Restart Claude Desktop

For Cursor IDE

One-Line Install:

cursor --add-mcp '{"name":"locatorlabs","command":"npx","args":["-y","locatorlabs-mcp"]}'

Or Manual: Go to Cursor Settings → MCP → Add new MCP Server

• Name: locatorlabs
• Command: npx -y locatorlabs-mcp

For VS Code + Cline Extension

Add to Cline MCP settings:

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

📖 Usage Examples

Just chat naturally:

Get Locators for an Element

"Get me all locators for the login button on https://www.saucedemo.com"

Response:

Analyze Entire Page

"Analyze all form elements on https://www.saucedemo.com"

Generate Page Object Model

Playwright:

"Generate a TypeScript Page Object for https://www.saucedemo.com and call it LoginPage"

Selenium:

"Generate a Java Selenium Page Object for https://www.saucedemo.com and call it LoginPage"

"Generate a C# Selenium Page Object for https://www.saucedemo.com called LoginPage"

"Generate a Python Selenium POM for https://www.saucedemo.com named LoginPage"

Run a Test

"Run a test that logs into saucedemo.com with standard_user and secret_sauce, then verify Products page appears"

Response:

✅ Test PASSED (3.2s)
- Navigate to login page ✅
- Enter username ✅
- Enter password ✅
- Click login ✅
- Verify Products visible ✅

Generate Test Script

"Generate a Python test script for the saucedemo login flow"

🛠️ Available Tools

📦 Supported Languages for Page Objects

🎯 Supported Test Actions

🏆 Locator Priority

LocatorLabs ranks locators by reliability:

1. data-testid (98%) - Best, explicitly for testing
2. Role + Name (95%) - Playwright recommended
3. Label (90%) - Accessible
4. ID (90%) - Stable if meaningful
5. Placeholder (85%) - Good for inputs
6. Text (75%) - May change
7. CSS (60%) - Can be brittle
8. XPath (40%) - Avoid unless necessary

🔄 LocatorLabs vs Playwright MCP

They work great together! Use Playwright MCP for navigation/scraping, LocatorLabs MCP for locators/POMs/tests.

📋 Requirements

• Node.js 18+
• Playwright browsers (auto-installed on first run)

🔧 Troubleshooting

Playwright browsers not installed

npx playwright install chromium

Permission issues on Mac

chmod +x ~/.npm/_npx/*/node_modules/.bin/locatorlabs-mcp

View logs (Claude Desktop)

tail -f ~/Library/Logs/Claude/mcp*.log

Auto-approve tools in VS Code

Add to settings.json:

{
  "chat.tools.autoApprove": true
}

🤝 Contributing

Contributions welcome! Please open an issue or PR on GitHub.

📺 Author

Naveen AutomationLabs

• YouTube: @naveenautomationlabs (500K+ subscribers)
• Website: naveenautomationlabs.com
• LinkedIn: Naveen AutomationLabs

📄 License

MIT