Yin14333/PlaywrightMCP_ApplyFIiltersOnWebApp

Playwright MCP Server

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright, demo case enables Claude desktop to interact with web pages through programmatic browser control like clicking checkboxs and choose date from calendar.

Features

• Launch and control Chromium browser instances
• Navigate to URLs
• Click elements by role or CSS selector
• Wait for elements to appear
• Clean resource management

Prerequisites

• Python 3.10 or higher (required for MCP package compatibility)
• macOS or Linux (tested on macOS)

Installation

1. Clone or Download the Server.py File

Written by Claude with prompt specified to minimum token usage and serve the purpose of locating and clicking on WebApp filters. Tools include:

1. pw_launch

Launch browser instance
Options: headless mode, initial URL

2. pw_goto

Navigate to URL

3. pw_get_by_role_click

Find element by ARIA role and click
Parameters: role, name/label, exact match option

4. pw_locator_click

Find element by CSS selector and click
Parameters: selector, optional index for multiple matches

5. pw_wait_for_selector

Wait for element to appear
Parameters: selector, timeout (default 30s)

6. pw_close

Close browser and cleanup resources

2. Create Virtual Environment

Important: Ensure you're using Python 3.10+. Check your version:

python3 --version

Create virtual environment with Python 3.10 or higher:

# If you have Python 3.11
python3.11 -m venv venv

# Or Python 3.10
python3.10 -m venv venv

Activate the virtual environment:

source venv/bin/activate  # macOS/Linux

Verify correct Python version in venv:

python --version  # Should show 3.10 or higher

3. Install Dependencies

pip install mcp playwright
playwright install chromium

4. Get Absolute Paths

Find the absolute paths needed for Claude configuration:

# Navigate to project directory
cd pw_filter_mcp

# Get directory path
pwd

# Get Python path (while venv is activated)
which python

Example output:

• Directory: /Users/yourname/pw_filter_mcp
• Python: /Users/yourname/pw_filter_mcp/venv/bin/python

5. Configure Claude Desktop

Locate Config File

macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

Quick open:

open ~/Library/Application\ Support/Claude/

Add MCP Configuration

Edit claude_desktop_config.json:

{
  "mcpServers": {
    "Playwright_filter_mcp": {
      "command": "/Users/yourname/pw_filter_mcp/venv/bin/python",
      "args": ["/Users/yourname/pw_filter_mcp/server.py"]
    }
  }
}

Important: Replace paths with your actual absolute paths from step 5.

6. Restart Claude Desktop

Completely quit and reopen the Claude Desktop application.

7. Verify Installation

In Claude chat, the MCP tools should now be available. You can verify by asking Claude to list available tools or attempt browser automation.

Troubleshooting

Python Version Error

Issue: SyntaxError: invalid syntax on match statement

Solution: MCP requires Python 3.10+. Recreate venv with correct version:

deactivate
rm -rf venv
python3.11 -m venv venv  # or python3.10
source venv/bin/activate
pip install mcp playwright
playwright install chromium

Module Not Found Error

Issue: ModuleNotFoundError: No module named 'mcp'

Solutions:

1. Verify venv is activated and packages installed:

source venv/bin/activate
pip list | grep mcp

2. Verify Python path in Claude config matches venv Python:

which python  # Should match config file path

3. Test import manually:

python -c "from mcp.server.models import InitializationOptions; print('Success')"

Connection Failed

Issue: Claude shows "Server disconnected" error

Check:

1. Config file syntax is valid JSON
2. All paths are absolute (not relative)
3. No extra arguments in config
4. Claude Desktop was fully restarted after config changes

View logs (macOS):

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

Usage Examples

https://github.com/user-attachments/assets/b512d5ee-47dd-4f21-9715-cabb22e1904a

Once connected, you can paste this prompt:

ask: Filter KCLS library events and report results using Playwright_filter_mcp Steps:

1. Navigate to https://kcls.bibliocommons.com/v2/events
2. Click "Select a date" → select October 31, 2025
3. Location: Click "Show more" → click Auburn, Bellevue, Bothell checkboxes rapidly without waiting between clicks → close picker
4. Audience: Click "Kids(Ages 3 to 5)" checkbox
5. Event type: Click "Learning and Play", "Art and Entertainment" checkboxes rapidly without waiting between clicks
6. Wait for results to load, then output: Event count and titles only Note: Do not wait for page refresh between checkbox clicks in same filter section

License

MIT