custom-ui-automator

A Playwright-based MCP (Model Context Protocol) server for browser UI automation.

Installation

npm install custom-ui-automator

After installation, you need to install Playwright browsers:

npx playwright install chromium

Usage

With Claude Desktop

Add this to your Claude Desktop configuration (claude_desktop_config.json):

{
  "mcpServers": {
    "custom-ui-automator": {
      "command": "npx",
      "args": ["custom-ui-automator"]
    }
  }
}

With Claude Code

Add this to your .mcp.json:

{
  "mcpServers": {
    "custom-ui-automator": {
      "command": "npx",
      "args": ["custom-ui-automator"]
    }
  }
}

Available Tools

| Tool | Description | |------|-------------| | navigate_to | Navigate the browser to a specified URL | | go_back | Navigate back to the previous page | | click | Click an element using CSS selector | | double_click | Double click an element | | right_click | Right click (context click) an element | | type_text | Type text into an input field | | drag_and_drop | Drag and drop elements | | wait_for_element | Wait for an element to reach a specific state | | select_option | Select option(s) from a dropdown | | execute_javascript | Execute JavaScript in the browser context | | browser_handle_dialog | Handle modal dialogs (alert, confirm, prompt) | | browser_upload_file | Upload files via file chooser | | resize_window | Resize the browser window | | press_key | Press keyboard keys or combinations | | hover | Hover over an element | | close_browser | Close the browser instance |

CSS Selector Priority

When selecting elements, follow this priority order:

1. data-dgat attribute: [data-dgat="value"]
2. data-testid attribute: [data-testid="value"]
3. id attribute: #id
4. class or complex CSS selectors (last resort)

Example Usage

Navigate to https://example.com
Click the login button using [data-testid="login-btn"]
Type "[email protected]" into the email field

License

MIT