TWD-MCP
MCP（模型上下文协议）服务器，用于从浏览器自动化数据生成TWD测试。
概述
此MCP服务器使AI助手（Cursor、Claude Desktop）能够从浏览器自动化会话中生成TWD测试。它与 剧作家MCP 以编程方式执行浏览器操作并自动生成测试代码。
📖 全部文件：有关完整文档，请参阅 TWD MCP集成指南 在TWD文件中。
建筑
Playwright MCP (captures) → AI (orchestrates) → TWD MCP (generates test code)TWD MCP仅关注 数据转换--浏览器捕获由Playwright MCP处理。我们专注于剧作家MCP，因为：
- 语义对齐：剧作家使用可访问性树快照，完美地映射到迪士尼的
screenDom（测试库）方法 - 结构化数据：Playwright提供干净、结构化的交互数据，非常适合代码生成
- 跨浏览器：适用于Chromium、Firefox和WebKit
- 以测试为重点：专为自动化和测试场景而构建
工具
1. suggestSelectors
将DOM元素映射到测试库选择器建议。优先考虑可访问的选择器（角色>标签>文本>占位符>testid）。
输入：
tagName（必填）：HTML标记名称role,textContent,ariaLabel,placeholder,testId,name（可选）
输出： 具有优先级的选择器建议数组
2. generateMocksFromNetwork
根据捕获的网络请求/响应生成TWD模拟请求处理程序。
输入：
requests：网络请求数组url,method，以及response（与status和body)
输出： TWD模拟处理程序代码
3. generateTestFromRecording
从浏览器记录数据生成完整的TWD测试文件。
输入：
interactions：用户交互数组（单击、键入、导航）networkCalls（可选）：要模拟的网络请求数组testName（可选）：测试名称
输出： 完整的TWD测试文件代码
安装
TWD MCP服务器旨在通过以下方式使用 npx，因此不需要安装。但是，如果你想开发或为项目做出贡献：
npm install
npm run build测试MCP服务器
先决条件
- 安装依赖项：
npm install- 构建项目：
npm run build方法1：使用MCP检查员进行测试（推荐）
- 全局安装MCP检查器：
npm install -g @modelcontextprotocol/inspector- 运行检查器：
mcp-inspector npx twd-mcp这将打开一个web界面，您可以在其中交互式地测试所有三个工具。
方法2：通过Cursor/Claude桌面进行测试（建议用于实际测试）
- 将Playwright MCP和TWD MCP添加到光标设置中。
对于光标：编辑 ~/.cursor/mcp.json （如果不存在则创建）
适用于克劳德桌面：编辑 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）
你可以参考 mcp.json.example 在这个仓库中，以获得确切的格式。添加两台服务器：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp"]
},
"twd-mcp": {
"command": "npx",
"args": ["twd-mcp@1.0.0"]
}
}
}版本选项 twd-mcp:
"twd-mcp@1.0.0"-固定到特定版本（建议稳定）"twd-mcp@^1.0.0"-允许补丁和次要更新（1.0.1、1.1.0，但不包括2.0.0）"twd-mcp@latest"-始终使用最新版本（可能会因重大更新而中断）"twd-mcp"-使用最新版本，但npx缓存可能会延迟更新
备注：如果您已经配置了其他MCP服务器（如 chrome-devtools)，只需添加 playwright 和 twd-mcp 到现有 mcpServers 对象。
- 重新启动Cursor/Claude桌面
- 通过以下问题测试集成：
- 使用Playwright导航到example.com并单击登录按钮，然后从中生成一个TWD测试 - “使用Playwright自动导航到我的应用程序，单击登录按钮，填写表单，然后生成TWD测试” - 或测试单个工具： - “为带有文本‘Submit’的按钮元素建议选择器” - “从这些网络请求生成模拟：\[粘贴JSON\]” - “从这些交互中生成测试：\[粘贴JSON\]”
发展
# Watch mode for development
npm run dev
# Build for production
npm run build用法示例
在Cursor（配置了Playwright MCP和TWD MCP）中，您可以提示：
“使用Playwright导航到我的应用程序，单击登录按钮，填写表格test@example.com，然后根据这些操作生成TWD测试”
备注：Playwright MCP根据您的描述以编程方式执行操作——它不会手动记录您的浏览器交互。您描述应该发生什么，Playwright MCP执行这些操作并捕获数据。
AI将：
- 使用剧作家MCP：
- 导航到URL - 以编程方式执行所描述的操作（点击、键入、导航） - 使用可访问性树数据捕获DOM快照 - 捕获网络请求/响应
- 将剧作家数据转换为TWD MCP格式
- 致电TWD MCP
generateTestFromRecording具有交互和网络调用功能的工具 - 输出一个完整的TWD测试文件，准备使用
生成输出示例
import { twd, userEvent, screenDom } from "twd-js";
import { describe, it, beforeEach } from "twd-js/runner";
describe("Login flow", () => {
beforeEach(() => {
twd.clearRequestMockRules();
});
it("should complete the recorded flow", async () => {
// Define mocks before interactions
twd.mockRequest("LoginRequest", {
method: "POST",
url: "/api/login",
response: { token: "abc123" },
status: 200
});
await userEvent.click(screenDom.getByRole('button', { name: /login/i }));
await userEvent.type(screenDom.getByLabelText(/email/i), 'user@example.com');
// ... more interactions
});
});