博客

当你构建一个组件并需要测试其功能时，你通常会编写大量的自动化脚本来模拟用户行为，确保它按预期工作。然而，随着项目的复杂性增加，这些测试脚本也变得更加庞大和难以维护。
此时，你可能会想：
“我能不能用自然语言告诉工具——‘请为我测试这个按钮的点击效果’？”
在过去，这个想法可能看起来不切实际。但今天，随着大型语言模型（LLMs）的兴起和Playwright生态系统的不断创新，这一幻想正在变为现实。
我们今天要探索的关键推动因素——playwright-mcp。
第一部分：应用指南
playwright-mcp（模型上下文协议）的核心地位是充当桥梁。
它作为一个本地服务运行，允许你的AI助手连接并控制浏览器。
步骤1：安装和配置
你不需要复杂的全局安装。
playwright-mcp的设计哲学是按需启动——最简单的方法是使用npx。
• 通用配置方法：
大多数支持MCP的AI工具（如Cursor）允许你在它们的JSON配置中添加一个mcpServers字段。示例：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
• VS Code一键配置：
如果你是VS Code或Cursor用户，只需在终端中运行以下命令：
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
执行后，VS Code将自动将此服务信息添加到配置中。
完成后，你将在Cursor MCP工具中看到此MCP配置条目。
MCP工具
步骤2：自定义你的自动化环境
playwright-mcp提供了丰富的命令行参数，允许你通过args数组细化对自动化环境的控制。
--allowed-origins
允许的请求来源，用分号分隔。默认情况下，所有来源都允许。
--blocked-origins
阻止的请求来源，用分号分隔。阻止列表优先于允许列表。
如果没有指定允许列表，不在阻止列表中的任何请求仍然被允许。
--block-service-workers
阻止服务工作者。
--browser
指定要使用的浏览器或Chrome频道。可能的值：chrome, firefox, webkit, msedge。
--caps
启用附加功能，以逗号分隔列表提供。可能的值：vision, pdf。
--cdp-endpoint
指定要连接的CDP（Chrome DevTools协议）端点。
--cdp-header
指定连接到CDP端点时要包含的自定义标头。可以定义多个标头。
--config
指定配置文件的路径。
--device
模拟设备，例如：“iPhone 15”。
--executable-path
指定浏览器可执行文件的路径。
--extension
连接到已运行的浏览器实例（仅限Edge/Chrome）。
需要安装Playwright MCP Bridge浏览器扩展。
--headless
以无头模式运行浏览器（默认带有GUI）。
--host
指定要绑定到的服务器主机名。默认为localhost。
使用0.0.0.0绑定到所有可用的网络接口。
--ignore-https-errors
忽略HTTPS错误。
--isolated
仅在内存中存储浏览器配置文件数据，不写入磁盘。
--image-responses
指定是否将图像响应发送到客户端。
可能的值：allow或omit。默认为allow。
--no-sandbox
为通常由沙箱隔离的所有进程禁用沙箱。
--output-dir
指定输出文件将存储的目录路径。
--port
指定SSE（服务器发送事件）传输监听的端口。
--proxy-bypass
应绕过代理的域名的逗号分隔列表。
例如：.com,chromium.org,.domain.com。
--proxy-server
指定要使用的代理服务器。
例如：
http://myproxy:3128或socks5://myproxy:8080。
--save-session
确定是否将Playwright MCP会话保存到输出目录。
--save-trace
确定是否将Playwright Trace（调试跟踪）保存到输出目录。
--secrets
指定包含密钥的dotenv文件的路径。
--storage-state
指定用于会话隔离的存储状态文件的路径。
--timeout-action
指定操作超时时间（毫秒）。默认：5000ms。
--timeout-navigation
指定页面导航超时时间（毫秒）。默认：60000ms。
--user-agent
指定自定义User-Agent字符串。
--user-data-dir
指定用户数据目录的路径。
如果没有指定，将自动创建一个临时目录。
--viewport-size
指定浏览器视口大小（像素），例如：“1280,720