AI导哈

测试代码生成服务

TWD MCP服务器通过浏览器自动化数据生成测试代码，适用于AI助手（如Cursor、Claude Desktop）进行自动化测试场景。

  • by BRIKEV
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 BRIKEV/twd-mcp

使用说明

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服务器

先决条件

  1. 安装依赖项：
npm install
  1. 构建项目：
npm run build

方法1：使用MCP检查员进行测试（推荐）

  1. 全局安装MCP检查器：
npm install -g @modelcontextprotocol/inspector
  1. 运行检查器：
mcp-inspector npx twd-mcp

这将打开一个web界面，您可以在其中交互式地测试所有三个工具。

方法2：通过Cursor/Claude桌面进行测试（建议用于实际测试）

  1. 将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 对象。

  1. 重新启动Cursor/Claude桌面

  2. 通过以下问题测试集成：

    • 使用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将：

  1. 使用剧作家MCP：
    • 导航到URL
    • 以编程方式执行所描述的操作（点击、键入、导航）
    • 使用可访问性树数据捕获DOM快照
    • 捕获网络请求/响应
  2. 将剧作家数据转换为TWD MCP格式
  3. 致电TWD MCP generateTestFromRecording 具有交互和网络调用功能的工具
  4. 输出一个完整的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
  });
});

资源

相关 MCP