custom-ui-automator

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

Installation

``bash
npm install custom-ui-automator
`

After installation, you need to install Playwright browsers:

`bash
npx playwright install chromium
`

Usage

$3

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

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

$3

Add this to your .mcp.json:

`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 "user@example.com" into the email field
``

License

MIT