在现代软件开发中,自动化浏览器测试已变得不可或缺,可确保 Web 应用程序在不同的浏览器和环境之间平稳运行。如果您使用过Playwright,您就会了解它在自动化 Web 交互方面的强大功能。但是,当多个测试脚本、调试工具或自动化服务需要同时与同一个Playwright实例交互时,Playwright多客户端协议 (MCP) 服务器将发挥作用。
node:internal/modules/cjs/loader:646 throw e; ^ Error: Cannot find module'/Users/cnych/.npm/_npx/9833c18b2d85bc59/node_modules/yaml/dist/index.js' at createEsmNotFoundErr (node:internal/modules/cjs/loader:1285:15) at finalizeEsmResolution (node:internal/modules/cjs/loader:1273:15) at resolveExports (node:internal/modules/cjs/loader:639:14) at Module._findPath (node:internal/modules/cjs/loader:747:31) at Module._resolveFilename (node:internal/modules/cjs/loader:1234:27) at Module._load (node:internal/modules/cjs/loader:1074:27) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at require (node:internal/modules/helpers:135:16) { code:'MODULE_NOT_FOUND', path:'/Users/cnych/.npm/_npx/9833c18b2d85bc59/node_modules/yaml/package.json'}
除了配置文件和通过 IDE 自动启动之外,Playwright MCP 还可以直接集成到您的 Node.js 应用程序中。这提供了对服务器设置和通信传输的更多控制。
import{ createServer }from"@playwright/mcp"; // Import necessary transport classes, e.g., from '@playwright/mcp/lib/sseServerTransport'; // Or potentially implement your own transport mechanism.
asyncfunctionrunMyMCPServer() { // Create the MCP server instance const server = createServer({ // You can pass Playwright launch options here launchOptions: { headless: true, // other Playwright options... }, // You might specify other server options if available }); // Example using SSE transport (requires appropriate setup like an HTTP server) // This part is conceptual and depends on your specific server framework (e.g., Express, Node http) /* const http = require('http'); const { SSEServerTransport } = require('@playwright/mcp/lib/sseServerTransport'); // Adjust path as needed consthttpServer = http.createServer((req, res) =>{ if(req.url==='/messages'&& req.method==='GET') { res.writeHead(200, { 'Content-Type':'text/event-stream', 'Cache-Control':'no-cache', 'Connection':'keep-alive', }); consttransport =newSSEServerTransport("/messages", res);// Pass the response object server.connect(transport); // Connect the MCP server to this transport req.on('close',() =>{ // Handle client disconnect if necessary server.disconnect(transport); }); }else{ res.writeHead(404); res.end(); }
}); httpServer.listen(8931,() =>{ console.log('MCP Server with SSE transport listening on port 8931'); }); */ // For simpler non-web transport, you might use other mechanisms // server.connect(yourCustomTransport); console.log("Playwright MCP server started programmatically."); // Keep the server running, handle connections, etc. // Add cleanup logic for server shutdown.}
Microsoft Playwright MCP 为 AI 代理提供了一种强大而有效的方式LLMs来与 Web 交互。通过在默认快照模式下利用浏览器的辅助功能树,它提供了一种快速、可靠且文本友好的浏览器自动化方法,非常适合导航、数据提取和表单填写等常见任务。可选的视觉模式可作为需要与视觉元素进行基于坐标的交互的方案的后备方案。
Playwright MCP 通过 npx 进行简单安装,深度集成到 Cursor 等 Claude MCP 客户端中,以及灵活的配置选项(包括无头作和自定义传输),是一款多功能工具,可供开发人员构建下一代 Web 感知 AI 代理。通过了解其核心概念和可用工具,您可以有效地使您的应用程序和代理能够在广阔的 Internet 上导航和交互。