Playwright MCP

This project uses Playwright for automated browser testing and is integrated and deployed with Cloudflare Workers, Browser Rendering, and @cloudflare/playwright, supporting web page interaction operations through an AI assistant.

Browser automation Developer tools #Automated Testing #Browser Interaction #AI Assistant #Cloud Deployment Local .TypeScript

rating : 2.5 points

downloads : 48

update time : 2025-04-28

What is Cloudflare Playwright MCP?

Cloudflare Playwright MCP is an automated browser operation tool based on Playwright. It allows developers to complete web page interaction tasks through model - generated instructions. It can help users perform operations such as taking screenshots, clicking, and inputting, and is widely used in fields like testing and AI collaboration.

How to use Cloudflare Playwright MCP?

Simply deploy the server and configure the model connection to start using it. Trigger the tool to perform operations through simple instructions, such as navigating to a specific page or taking a screenshot.

Applicable Scenarios

Suitable for scenarios that require frequent web page interaction or automated testing, such as website monitoring, data scraping, and intelligent customer service.

Main Features

Automated Browser OperationsSupports various browser operations, such as clicking, inputting, and dragging.

Tool Mode SwitchingProvides two interaction modes, snapshot mode (default) and visual mode, to meet different needs.

Multi - tool SupportBuilt - in multiple useful tools, including taking screenshots, uploading files, and saving PDFs.

Advantages and Limitations

Advantages

Powerful automation capabilities to improve work efficiency.

Compatible with multiple devices and browsers.

Easy to use without complex configuration.

Limitations

Somewhat dependent on the network environment.

Some advanced features may require additional payment.

How to Use

Install Dependencies

Run `npm ci` in the project directory to install the required dependencies.

Build the Project

Enter the `cloudflare` folder and execute `npm run build`.

Deploy to Cloudflare Workers

Use the `wrangler` tool for deployment.

Usage Examples

Open the TodoMVC Example and Add a Todo ItemSimulate a user opening the TodoMVC example application and creating a new todo item.

Perform a Series of Browser OperationsShow the complete operation process from opening the page to taking the final screenshot.

Frequently Asked Questions

How to start the Cloudflare Playwright MCP server?

Does it support custom tools?

Related Resources

Official Documentation

Cloudflare official documentation center.

GitHub Repository

Open - source project source code address.

Tutorial Video

Quick start guide.

🚀 Cloudflare Tool Command Reference

This documentation provides a comprehensive reference for the commands available in the Cloudflare tool, covering various aspects such as tab management, navigation, keyboard operations, console access, file and media handling, and utility functions.

🚀 Quick Start

The Cloudflare tool offers a wide range of commands to interact with the browser. Here are some basic steps to get you started:

Use browser_tab_new to open a new tab.
Navigate to a specific URL using browser_navigate.
Perform various operations like keyboard presses, file uploads, etc.

✨ Features

🔍 Tab Management

browser_tab_list
- Description: Lists all browser tabs.
- Parameters: None
browser_tab_new
- Description: Opens a new browser tab.
- Parameters:
  - url (string, optional): The URL to navigate to in the new tab. If not specified, the new tab will be empty.
browser_tab_select
- Description: Selects a browser tab by its index.
- Parameters:
  - index (number): The index of the tab to select.
browser_tab_close
- Description: Closes a browser tab.
- Parameters:
  - index (number, optional): The index of the tab to close. If not specified, the current tab will be closed.

🚗 Navigation

browser_navigate
- Description: Navigates to a specified URL.
- Parameters:
  - url (string): The URL to navigate to.
browser_navigate_back
- Description: Navigates back to the previous page.
- Parameters: None
browser_navigate_forward
- Description: Navigates forward to the next page.
- Parameters: None

⌨️ Keyboard Operations

browser_press_key
- Description: Presses a key on the keyboard.
- Parameters:
  - key (string): The name or character of the key to press, e.g., ArrowLeft or a.

💻 Console

browser_console_messages
- Description: Returns all console messages.
- Parameters: None

📂 File and Media

browser_file_upload
- Description: Uploads one or more files.
- Parameters:
  - paths (array): The absolute paths of the files to upload. Can be a single file or multiple files.
browser_pdf_save
- Description: Saves the current page as a PDF file.
- Parameters: None

🛠️ Tools and Utilities

browser_close
- Description: Closes the current browser window.
- Parameters: None
browser_wait
- Description: Waits for a specified number of seconds.
- Parameters:
  - time (number): The number of seconds to wait.
browser_resize
- Description: Resizes the browser window.
- Parameters:
  - width (number): The width of the browser window.
  - height (number): The height of the browser window.
browser_handle_dialog
- Description: Handles browser dialogs.
- Parameters:
  - accept (boolean): Whether to accept the dialog.
  - promptText (string, optional): The text to enter in a prompt dialog.

This reference provides a complete list of commands for the Cloudflare tool, covering navigation, keyboard operations, file and media management, console access, and utility functions.