Playwright MCP Project

by vikaskumarprofessional92

314 downloads

Not rated

GitHub

Automation

About

A project to demonstrate Playwright MCP server usage with Jenkins pipeline

Details

Author: vikaskumarprofessional92
Downloads: 314
Categories: Automation

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Playwright MCP Project

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

From the repository

Clone the repository, install dependencies with npm install, configure the MCP server in settings.json with the command npx @playwright/mcp@latest --vision, then run tests with npx playwright test.

`browser_close`

Close the page

`browser_resize`

Resize the browser window

`browser_console_messages`

Returns all console messages

`browser_handle_dialog`

Handle a dialog

`browser_evaluate`

Evaluate JavaScript expression on page or element

`browser_file_upload`

Upload one or multiple files

`browser_drop`

Drop files or MIME-typed data onto an element, as if dragged from outside the page. At least one of "paths" or "data" must be provided.

`browser_find`

Search the accessibility snapshot of the current page for text or a regular expression. Returns matching snapshot nodes with a few lines of surrounding context (like search snippets), each shown under its path from the root of the tree, which is cheaper than capturing the whole snapshot when you only need to locate an element and its ref.

`browser_fill_form`

Fill multiple form fields

`browser_press_key`

Press a key on the keyboard

`browser_type`

Type text into editable element

`browser_mouse_move_xy`

Move mouse to a given position

`browser_mouse_click_xy`

Click mouse button at a given position

`browser_mouse_drag_xy`

Drag left mouse button to a given position

`browser_mouse_down`

Press mouse down

`browser_mouse_up`

Press mouse up

`browser_mouse_wheel`

Scroll mouse wheel

`browser_navigate`

Navigate to a URL

`browser_navigate_back`

Go back to the previous page in the history

`browser_network_requests`

Returns a numbered list of network requests since loading the page. Use browser_network_request with the number to get full details.

`browser_network_request`

Returns full details (headers and body) of a single network request, or a single part if `part` is set. Use the number from browser_network_requests.

`browser_run_code_unsafe`

Run a Playwright code snippet. Unsafe: executes arbitrary JavaScript in the Playwright server process and is RCE-equivalent.

`browser_take_screenshot`

Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.

`browser_snapshot`

Capture accessibility snapshot of the current page, this is better than screenshot

`browser_click`

Perform click on a web page

`browser_drag`

Perform drag and drop between two elements

`browser_hover`

Hover over element on page

`browser_select_option`

Select an option in a dropdown

`browser_tabs`

List, create, close, or select a browser tab.

`browser_wait_for`

Wait for text to appear or disappear or a specified time to pass

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "playwright mcp project": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--vision"
                ]
            }
        }
    }
}

McpServers

{
    "playwright": {
        "command": "npx",
        "args": [
            "@playwright/mcp@latest",
            "--vision"
        ]
    }
}

Playwright MCP Project

A project to demonstrate Playwright MCP server usage with Jenkins pipeline.

Prerequisites

- Node.js installed on your machine.
- npm (Node Package Manager) comes with Node.js.

Installation

1. Clone the repository:

   git clone https://github.com/vikaskumarprofessional92/playwright-mcp-project.git

   cd playwright-mcp-project

2. Install the dependencies:

   npm install

3. Set up the Playwright MCP server:
- Ensure you have the MCP server configured in your settings.json as follows:

     {

       "mcpServers": {

         "playwright": {

           "command": "npx",

           "args": [

             "@playwright/mcp@latest",

             "--vision"

           ]

         }

       }

     }

Running Tests

To run the tests, use the following command:

npx playwright test

Test Specifications

The test specifications can be found in the src/tests/example.spec.ts file. This file contains a test suite that includes a test case for opening a browser and navigating to the Google.ca website.

Jenkins Integration

This project includes Jenkins pipeline configuration for continuous integration. The pipeline is configured to:
- Install dependencies
- Run tests
- Generate and publish test reports

License

This project is licensed under the MIT License.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

browser_close

browser_resize

browser_console_messages

browser_handle_dialog

browser_evaluate

browser_file_upload

browser_drop

browser_find

browser_fill_form

browser_press_key

browser_type

browser_mouse_move_xy

browser_mouse_click_xy

browser_mouse_drag_xy

browser_mouse_down

browser_mouse_up

browser_mouse_wheel

browser_navigate

browser_navigate_back

browser_network_requests

browser_network_request

browser_run_code_unsafe

browser_take_screenshot

browser_snapshot

browser_click

browser_drag

browser_hover

browser_select_option

browser_tabs

browser_wait_for

Claude Desktop / Cursor

McpServers

Playwright MCP Project

Prerequisites

Installation

Running Tests

Test Specifications

Jenkins Integration

License

Install

More like this

@mendableai/firecrawl Mcp Server

Umut Naci

Playwright

Fetch

Puppeteer

Playwright

`browser_close`

`browser_resize`

`browser_console_messages`

`browser_handle_dialog`

`browser_evaluate`

`browser_file_upload`

`browser_drop`

`browser_find`

`browser_fill_form`

`browser_press_key`

`browser_type`

`browser_mouse_move_xy`

`browser_mouse_click_xy`

`browser_mouse_drag_xy`

`browser_mouse_down`

`browser_mouse_up`

`browser_mouse_wheel`

`browser_navigate`

`browser_navigate_back`

`browser_network_requests`

`browser_network_request`

`browser_run_code_unsafe`

`browser_take_screenshot`

`browser_snapshot`

`browser_click`

`browser_drag`

`browser_hover`

`browser_select_option`

`browser_tabs`

`browser_wait_for`