@ejazullah/browser-mcp 0.0.56

package/README.md

@@ -0,0 +1,860 @@
+## @ejazullah/browser-mcp
+
+An Enhanced Model Context Protocol (MCP) server that provides comprehensive browser automation capabilities using [Playwright](https://playwright.dev). This server enables LLMs to interact with web pages through structured accessibility snapshots and includes advanced features like CDP (Chrome DevTools Protocol) support for connecting to existing browser instances.
+
+### Enhanced Features
+
+- **Fast and lightweight**. Uses Playwright's accessibility tree, not pixel-based input.
+- **LLM-friendly**. No vision models needed, operates purely on structured data.
+- **Deterministic tool application**. Avoids ambiguity common with screenshot-based approaches.
+- **🆕 CDP Support**. Connect to existing Chrome/Chromium instances via DevTools Protocol.
+- **🆕 Dynamic Selectors**. CSS, XPath, text-based, and role-based element selection.
+- **🆕 Form Automation**. Comprehensive form interaction tools (checkboxes, radio buttons, inputs).
+- **🆕 Element States**. Check visibility, enabled status, and wait for elements.
+- **🆕 Advanced Interactions**. Scroll, focus, double-click, right-click capabilities.
+- **🆕 Data Extraction**. Bulk extraction of links, images, tables, and CSS styles.
+
+### Requirements
+- Node.js 18 or newer
+- VS Code, Cursor, Windsurf, Claude Desktop, Goose or any other MCP client
+
+<!--
+// Generate using:
+node utils/generate-links.js
+-->
+
+### Getting started
+
+First, install the Enhanced Playwright MCP server with your client.
+
+**Standard config** works in most of the tools:
+
+```js
+{
+  "mcpServers": {
+    "ejaz-playwright": {
+      "command": "npx",
+      "args": [
+        "@ejazullah/browser-mcp@latest"
+      ]
+    }
+  }
+}
+```
+
+[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522ejaz-playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540ejazullah%252Fbrowser-mcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522ejaz-playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540ejazullah%252Fbrowser-mcp%2540latest%2522%255D%257D)
+
+
+<details>
+<summary>Claude Code</summary>
+
+Use the Claude Code CLI to add the Enhanced Playwright MCP server:
+
+```bash
+claude mcp add ejaz-playwright npx @ejazullah/browser-mcp@latest
+```
+</details>
+
+<details>
+<summary>Claude Desktop</summary>
+
+Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user), use the standard config above.
+
+</details>
+
+<details>
+<summary>Cursor</summary>
+
+#### Click the button to install:
+
+[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=EjazPlaywright&config=eyJjb21tYW5kIjoibnB4IEBlamF6dWxsYWgvbWNwLXBsYXl3cmlnaHRAIiwgImFyZ3MiOiBbImxhdGVzdCJdfQ%3D%3D)
+
+#### Or install manually:
+
+Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, use `command` type with the command `npx @ejazullah/browser-mcp@latest`. You can also verify config or add command like arguments via clicking `Edit`.
+
+</details>
+
+<details>
+<summary>Gemini CLI</summary>
+
+Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use the standard config above.
+
+</details>
+
+<details>
+<summary>Goose</summary>
+
+#### Click the button to install:
+
+[![Install in Goose](https://block.github.io/goose/img/extension-install-dark.svg)](https://block.github.io/goose/extension?cmd=npx&arg=%40ejazullah%2Fbrowser-mcp%40latest&id=ejaz-playwright&name=EjazPlaywright&description=Enhanced%20Playwright%20MCP%20with%20CDP%20support%20for%20browser%20automation)
+
+#### Or install manually:
+
+Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @ejazullah/browser-mcp`. Click "Add Extension".
+</details>
+
+<details>
+<summary>LM Studio</summary>
+
+#### Click the button to install:
+
+[![Add MCP Server playwright to LM Studio](https://files.lmstudio.ai/deeplink/mcp-install-light.svg)](https://lmstudio.ai/install-mcp?name=playwright&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJAcGxheXdyaWdodC9tY3BAbGF0ZXN0Il19)
+
+#### Or install manually:
+
+Go to `Program` in the right sidebar -> `Install` -> `Edit mcp.json`. Use the standard config above.
+</details>
+
+<details>
+<summary>Qodo Gen</summary>
+
+Open [Qodo Gen](https://docs.qodo.ai/qodo-documentation/qodo-gen) chat panel in VSCode or IntelliJ → Connect more tools → + Add new MCP → Paste the standard config above.
+
+Click <code>Save</code>.
+</details>
+
+<details>
+<summary>VS Code</summary>
+
+#### Click the button to install:
+
+[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522ejaz-playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540ejazullah%252Fbrowser-mcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522ejaz-playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540ejazullah%252Fbrowser-mcp%2540latest%2522%255D%257D)
+
+#### Or install manually:
+
+Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server), use the standard config above. You can also install the Enhanced Playwright MCP server using the VS Code CLI:
+
+```bash
+# For VS Code
+code --add-mcp '{"name":"ejaz-playwright","command":"npx","args":["@ejazullah/browser-mcp@latest"]}'
+```
+
+After installation, the Enhanced Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
+</details>
+
+<details>
+<summary>Windsurf</summary>
+
+Follow Windsurf MCP [documentation](https://docs.windsurf.com/windsurf/cascade/mcp). Use the standard config above.
+
+</details>
+
+### ✨ Enhanced Features
+
+#### 🔗 CDP (Chrome DevTools Protocol) Support
+
+Connect to existing Chrome/Chromium browser instances for debugging and automation:
+
+```javascript
+// Discover available CDP endpoints
+await client.callTool({
+  name: 'browser_get_cdp_endpoints',
+  arguments: { port: 9222 }
+});
+
+// Connect to remote browser
+await client.callTool({
+  name: 'browser_connect_cdp',
+  arguments: { endpoint: 'wss://your-browser-endpoint/devtools/session-id' }
+});
+
+// Use any browser tool normally!
+await client.callTool({
+  name: 'browser_navigate',
+  arguments: { url: 'https://example.com' }
+});
+```
+
+#### 🎯 Dynamic Selectors
+
+Multiple flexible ways to target elements:
+
+```javascript
+// CSS Selectors
+await client.callTool({
+  name: 'browser_get_text_by_css',
+  arguments: { selector: '#main-heading' }
+});
+
+// XPath Expressions  
+await client.callTool({
+  name: 'browser_get_text_by_xpath',
+  arguments: { xpath: '//button[contains(text(), "Submit")]' }
+});
+
+// Text-based Selection
+await client.callTool({
+  name: 'browser_get_text_by_text',
+  arguments: { text: 'Click here', elementType: 'button' }
+});
+
+// ARIA Role-based
+await client.callTool({
+  name: 'browser_get_text_by_role',
+  arguments: { role: 'button', name: 'Submit' }
+});
+```
+
+#### 📋 Form Automation
+
+Comprehensive form interaction tools:
+
+```javascript
+// Checkbox operations
+await client.callTool({
+  name: 'browser_check_checkbox',
+  arguments: { element: 'I agree', ref: 'e3', checked: true }
+});
+
+// Radio button selection
+await client.callTool({
+  name: 'browser_select_radio',
+  arguments: { element: 'Payment method', ref: 'e4' }
+});
+
+// Input field operations
+await client.callTool({
+  name: 'browser_get_input_value',
+  arguments: { element: 'Email field', ref: 'e2' }
+});
+```
+
+#### 🔍 Element States & Interactions
+
+Advanced element state checking and interactions:
+
+```javascript
+// State checking
+await client.callTool({
+  name: 'browser_is_visible',
+  arguments: { selector: '#loading-spinner' }
+});
+
+// Advanced interactions
+await client.callTool({
+  name: 'browser_double_click',
+  arguments: { element: 'File icon', ref: 'e5' }
+});
+
+// Scrolling
+await client.callTool({
+  name: 'browser_scroll_to',
+  arguments: { selector: '#footer' }
+});
+```
+
+#### 📊 Data Extraction
+
+Bulk data extraction capabilities:
+
+```javascript
+// Extract all links
+await client.callTool({
+  name: 'browser_get_all_links',
+  arguments: { includeHref: true }
+});
+
+// Extract table data
+await client.callTool({
+  name: 'browser_get_table_data',
+  arguments: { selector: 'table.data-table' }
+});
+
+// Get CSS styles
+await client.callTool({
+  name: 'browser_get_css_styles',
+  arguments: { selector: '.button', properties: ['color', 'background'] }
+});
+```
+
+### Configuration
+
+Enhanced Playwright MCP server supports following arguments. They can be provided in the JSON configuration above, as a part of the `"args"` list:
+
+<!--- Options generated by update-readme.js -->
+
+```
+> npx @ejazullah/browser-mcp@latest --help
+  --allowed-origins <origins>  semicolon-separated list of origins to allow the
+                               browser to request. Default is to allow all.
+  --blocked-origins <origins>  semicolon-separated list of origins to block the
+                               browser from requesting. Blocklist is evaluated
+                               before allowlist. If used without the allowlist,
+                               requests not matching the blocklist are still
+                               allowed.
+  --block-service-workers      block service workers
+  --browser <browser>          browser or chrome channel to use, possible
+                               values: chrome, firefox, webkit, msedge.
+  --caps <caps>                comma-separated list of additional capabilities
+                               to enable, possible values: vision, pdf.
+  --cdp-endpoint <endpoint>    CDP endpoint to connect to.
+  --config <path>              path to the configuration file.
+  --device <device>            device to emulate, for example: "iPhone 15"
+  --executable-path <path>     path to the browser executable.
+  --headless                   run browser in headless mode, headed by default
+  --host <host>                host to bind server to. Default is localhost. Use
+                               0.0.0.0 to bind to all interfaces.
+  --ignore-https-errors        ignore https errors
+  --isolated                   keep the browser profile in memory, do not save
+                               it to disk.
+  --image-responses <mode>     whether to send image responses to the client.
+                               Can be "allow" or "omit", Defaults to "allow".
+  --no-sandbox                 disable the sandbox for all process types that
+                               are normally sandboxed.
+  --output-dir <path>          path to the directory for output files.
+  --port <port>                port to listen on for SSE transport.
+  --proxy-bypass <bypass>      comma-separated domains to bypass proxy, for
+                               example ".com,chromium.org,.domain.com"
+  --proxy-server <proxy>       specify proxy server, for example
+                               "http://myproxy:3128" or "socks5://myproxy:8080"
+  --save-session               Whether to save the Playwright MCP session into
+                               the output directory.
+  --save-trace                 Whether to save the Playwright Trace of the
+                               session into the output directory.
+  --storage-state <path>       path to the storage state file for isolated
+                               sessions.
+  --user-agent <ua string>     specify user agent string
+  --user-data-dir <path>       path to the user data directory. If not
+                               specified, a temporary directory will be created.
+  --viewport-size <size>       specify browser viewport size in pixels, for
+                               example "1280, 720"
+```
+
+<!--- End of options generated section -->
+
+### User profile
+
+You can run Playwright MCP with persistent profile like a regular browser (default), or in the isolated contexts for the testing sessions.
+
+**Persistent profile**
+
+All the logged in information will be stored in the persistent profile, you can delete it between sessions if you'd like to clear the offline state.
+Persistent profile is located at the following locations and you can override it with the `--user-data-dir` argument.
+
+```bash
+# Windows
+%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile
+
+# macOS
+- ~/Library/Caches/ms-playwright/mcp-{channel}-profile
+
+# Linux
+- ~/.cache/ms-playwright/mcp-{channel}-profile
+```
+
+**Isolated**
+
+In the isolated mode, each session is started in the isolated profile. Every time you ask MCP to close the browser,
+the session is closed and all the storage state for this session is lost. You can provide initial storage state
+to the browser via the config's `contextOptions` or via the `--storage-state` argument. Learn more about the storage
+state [here](https://playwright.dev/docs/auth).
+
+```js
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@ejazullah/browser-mcp",
+        "--isolated",
+        "--storage-state={path/to/storage.json}"
+      ]
+    }
+  }
+}
+```
+
+### Configuration file
+
+The Playwright MCP server can be configured using a JSON configuration file. You can specify the configuration file
+using the `--config` command line option:
+
+```bash
+npx @ejazullah/browser-mcp --config path/to/config.json
+```
+
+<details>
+<summary>Configuration file schema</summary>
+
+```typescript
+{
+  // Browser configuration
+  browser?: {
+    // Browser type to use (chromium, firefox, or webkit)
+    browserName?: 'chromium' | 'firefox' | 'webkit';
+
+    // Keep the browser profile in memory, do not save it to disk.
+    isolated?: boolean;
+
+    // Path to user data directory for browser profile persistence
+    userDataDir?: string;
+
+    // Browser launch options (see Playwright docs)
+    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
+    launchOptions?: {
+      channel?: string;        // Browser channel (e.g. 'chrome')
+      headless?: boolean;      // Run in headless mode
+      executablePath?: string; // Path to browser executable
+      // ... other Playwright launch options
+    };
+
+    // Browser context options
+    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
+    contextOptions?: {
+      viewport?: { width: number, height: number };
+      // ... other Playwright context options
+    };
+
+    // CDP endpoint for connecting to existing browser
+    cdpEndpoint?: string;
+
+    // Remote Playwright server endpoint
+    remoteEndpoint?: string;
+  },
+
+  // Server configuration
+  server?: {
+    port?: number;  // Port to listen on
+    host?: string;  // Host to bind to (default: localhost)
+  },
+
+  // List of additional capabilities
+  capabilities?: Array<
+    'tabs' |    // Tab management
+    'install' | // Browser installation
+    'pdf' |     // PDF generation
+    'vision' |  // Coordinate-based interactions
+  >;
+
+  // Directory for output files
+  outputDir?: string;
+
+  // Network configuration
+  network?: {
+    // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+    allowedOrigins?: string[];
+
+    // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+    blockedOrigins?: string[];
+  };
+ 
+  /**
+   * Whether to send image responses to the client. Can be "allow" or "omit". 
+   * Defaults to "allow".
+   */
+  imageResponses?: 'allow' | 'omit';
+}
+```
+</details>
+
+### Standalone MCP server
+
+When running headed browser on system w/o display or from worker processes of the IDEs,
+run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable HTTP transport.
+
+```bash
+npx @ejazullah/browser-mcp --port 8931
+```
+
+And then in MCP client config, set the `url` to the HTTP endpoint:
+
+```js
+{
+  "mcpServers": {
+    "playwright": {
+      "url": "http://localhost:8931/mcp"
+    }
+  }
+}
+```
+
+<details>
+<summary><b>Docker</b></summary>
+
+**NOTE:** The Docker implementation only supports headless chromium at the moment.
+
+```js
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "docker",
+      "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
+    }
+  }
+}
+```
+
+You can build the Docker image yourself.
+
+```
+docker build -t mcr.microsoft.com/playwright/mcp .
+```
+</details>
+
+<details>
+<summary><b>Programmatic usage</b></summary>
+
+```js
+import http from 'http';
+
+import { createConnection } from '@ejazullah/browser-mcp';
+import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
+
+http.createServer(async (req, res) => {
+  // ...
+
+  // Creates a headless Playwright MCP server with SSE transport
+  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
+  const transport = new SSEServerTransport('/messages', res);
+  await connection.sever.connect(transport);
+
+  // ...
+});
+```
+</details>
+
+### Tools
+
+<!--- Tools generated by update-readme.js -->
+
+<details>
+<summary><b>Core automation</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_click**
+  - Title: Click
+  - Description: Perform click on a web page
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+    - `doubleClick` (boolean, optional): Whether to perform a double click instead of a single click
+    - `button` (string, optional): Button to click, defaults to left
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_close**
+  - Title: Close browser
+  - Description: Close the page
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_console_messages**
+  - Title: Get console messages
+  - Description: Returns all console messages
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_drag**
+  - Title: Drag mouse
+  - Description: Perform drag and drop between two elements
+  - Parameters:
+    - `startElement` (string): Human-readable source element description used to obtain the permission to interact with the element
+    - `startRef` (string): Exact source element reference from the page snapshot
+    - `endElement` (string): Human-readable target element description used to obtain the permission to interact with the element
+    - `endRef` (string): Exact target element reference from the page snapshot
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_evaluate**
+  - Title: Evaluate JavaScript
+  - Description: Evaluate JavaScript expression on page or element
+  - Parameters:
+    - `function` (string): () => { /* code */ } or (element) => { /* code */ } when element is provided
+    - `element` (string, optional): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string, optional): Exact target element reference from the page snapshot
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_file_upload**
+  - Title: Upload files
+  - Description: Upload one or multiple files
+  - Parameters:
+    - `paths` (array): The absolute paths to the files to upload. Can be a single file or multiple files.
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_handle_dialog**
+  - Title: Handle a dialog
+  - Description: Handle a dialog
+  - Parameters:
+    - `accept` (boolean): Whether to accept the dialog.
+    - `promptText` (string, optional): The text of the prompt in case of a prompt dialog.
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_hover**
+  - Title: Hover mouse
+  - Description: Hover over element on page
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_navigate**
+  - Title: Navigate to a URL
+  - Description: Navigate to a URL
+  - Parameters:
+    - `url` (string): The URL to navigate to
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_navigate_back**
+  - Title: Go back
+  - Description: Go back to the previous page
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_navigate_forward**
+  - Title: Go forward
+  - Description: Go forward to the next page
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_network_requests**
+  - Title: List network requests
+  - Description: Returns all network requests since loading the page
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_press_key**
+  - Title: Press a key
+  - Description: Press a key on the keyboard
+  - Parameters:
+    - `key` (string): Name of the key to press or a character to generate, such as `ArrowLeft` or `a`
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_resize**
+  - Title: Resize browser window
+  - Description: Resize the browser window
+  - Parameters:
+    - `width` (number): Width of the browser window
+    - `height` (number): Height of the browser window
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_select_option**
+  - Title: Select option
+  - Description: Select an option in a dropdown
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+    - `values` (array): Array of values to select in the dropdown. This can be a single value or multiple values.
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_snapshot**
+  - Title: Page snapshot
+  - Description: Capture accessibility snapshot of the current page, this is better than screenshot
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_take_screenshot**
+  - Title: Take a screenshot
+  - Description: Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.
+  - Parameters:
+    - `type` (string, optional): Image format for the screenshot. Default is png.
+    - `filename` (string, optional): File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified.
+    - `element` (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.
+    - `ref` (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.
+    - `fullPage` (boolean, optional): When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots.
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_type**
+  - Title: Type text
+  - Description: Type text into editable element
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+    - `text` (string): Text to type into the element
+    - `submit` (boolean, optional): Whether to submit entered text (press Enter after)
+    - `slowly` (boolean, optional): Whether to type one character at a time. Useful for triggering key handlers in the page. By default entire text is filled in at once.
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_wait_for**
+  - Title: Wait for
+  - Description: Wait for text to appear or disappear or a specified time to pass
+  - Parameters:
+    - `time` (number, optional): The time to wait in seconds
+    - `text` (string, optional): The text to wait for
+    - `textGone` (string, optional): The text to wait for to disappear
+  - Read-only: **true**
+
+</details>
+
+<details>
+<summary><b>Tab management</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_tab_close**
+  - Title: Close a tab
+  - Description: Close a tab
+  - Parameters:
+    - `index` (number, optional): The index of the tab to close. Closes current tab if not provided.
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_tab_list**
+  - Title: List tabs
+  - Description: List browser tabs
+  - Parameters: None
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_tab_new**
+  - Title: Open a new tab
+  - Description: Open a new tab
+  - Parameters:
+    - `url` (string, optional): The URL to navigate to in the new tab. If not provided, the new tab will be blank.
+  - Read-only: **true**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_tab_select**
+  - Title: Select a tab
+  - Description: Select a tab by index
+  - Parameters:
+    - `index` (number): The index of the tab to select
+  - Read-only: **true**
+
+</details>
+
+<details>
+<summary><b>Browser installation</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_install**
+  - Title: Install the browser specified in the config
+  - Description: Install the browser specified in the config. Call this if you get an error about the browser not being installed.
+  - Parameters: None
+  - Read-only: **false**
+
+</details>
+
+<details>
+<summary><b>Coordinate-based (opt-in via --caps=vision)</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_mouse_click_xy**
+  - Title: Click
+  - Description: Click left mouse button at a given position
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `x` (number): X coordinate
+    - `y` (number): Y coordinate
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_mouse_drag_xy**
+  - Title: Drag mouse
+  - Description: Drag left mouse button to a given position
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `startX` (number): Start X coordinate
+    - `startY` (number): Start Y coordinate
+    - `endX` (number): End X coordinate
+    - `endY` (number): End Y coordinate
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_mouse_move_xy**
+  - Title: Move mouse
+  - Description: Move mouse to a given position
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `x` (number): X coordinate
+    - `y` (number): Y coordinate
+  - Read-only: **true**
+
+</details>
+
+<details>
+<summary><b>PDF generation (opt-in via --caps=pdf)</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_pdf_save**
+  - Title: Save as PDF
+  - Description: Save page as PDF
+  - Parameters:
+    - `filename` (string, optional): File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.
+  - Read-only: **true**
+
+</details>
+
+
+<!--- End of tools generated section -->
+
+---
+
+## 🚀 **About @ejazullah/browser-mcp**
+
+This enhanced version of the Playwright MCP server includes **25+ additional tools** and advanced features:
+
+### ✨ **New Tool Categories:**
+- **🔗 CDP Tools** (3): Connect to existing browsers via Chrome DevTools Protocol
+- **🎯 Selector Tools** (5): CSS, XPath, text-based, and role-based element targeting  
+- **📋 Form Tools** (5): Checkbox, radio, input field automation
+- **🔍 State Tools** (5): Element visibility, enabled status, waiting
+- **🤝 Interaction Tools** (4): Advanced scrolling, focusing, double/right-click
+- **📊 Extraction Tools** (4): Bulk data extraction (links, images, tables, styles)
+
+### 🎯 **Key Enhancements:**
+- **Remote Browser Support**: Connect to Chrome instances anywhere via WebSocket
+- **Dynamic Element Selection**: No more relying only on element references
+- **Comprehensive Form Handling**: Full form automation capabilities
+- **Enhanced Data Extraction**: Bulk operations for web scraping
+- **Mobile & Remote Testing**: Debug mobile browsers via CDP
+- **Advanced Interactions**: Beyond basic click/type operations
+
+### 📈 **Total Tools: 52+**
+- **Original Playwright MCP**: ~25 tools
+- **Enhanced Features**: +25 new tools
+- **All original functionality preserved** ✅
+
+### 🔧 **Perfect for:**
+- **Web Testing & QA**: Comprehensive browser automation
+- **Web Scraping**: Advanced data extraction capabilities  
+- **Remote Debugging**: Connect to browsers on different machines
+- **Mobile Testing**: Debug mobile browsers via USB/network
+- **Integration Testing**: Connect to existing browser sessions
+
+---
+
+**Built by [Ejaz Ullah](https://github.com/ejazullah)** | Enhanced version of Microsoft's Playwright MCP