Cypress MCP

柏树mcp

Cypress的MCP服务器——让AI代理运行测试、管理规范、快照页面和自动化浏览器。

______________________________________________________________________

这是什么？

cypress-mcp 是一个 模型上下文协议 服务器，将Cypress作为一组AI可用工具公开。将其连接到Claude、Cursor、VS Code或任何MCP客户端，让您的AI助手：

• 运行Cypress测试 并获得结构化的通过/失败结果
• 读写规范文件 --从自然语言生成新测试
• 快照任何页面 通过ARIA可访问性树——无需截图
• 自动化浏览器 --导航、单击、键入、评估JavaScript

把它想象成赛普拉斯的等价物 @playwright/mcp.

______________________________________________________________________

运作原理

Your AI (Claude / Cursor / VS Code)
        │
        │  MCP protocol (stdio or HTTP/SSE)
        ▼
   cypress-mcp server
        │
        ├── Spec tools ──────────► Filesystem (list / read / write .cy.ts files)
        ├── Runner tools ─────────► Cypress CLI (run tests, open GUI, get results)
        └── Browser tools ────────► Playwright-core (navigate, snapshot, screenshot)

浏览器自动化使用一个单独的Playwright核心实例，而不是Cypress浏览器，将自动化和测试问题清晰地分开。

______________________________________________________________________

快速开始

1.安装浏览器（一次性）

npx playwright install chromium

2.连接到您的MCP客户端

克劳德桌面版 (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "cypress": {
      "command": "npx",
      "args": ["cypress-mcp", "--project", "/path/to/your/app"]
    }
  }
}

VS代码/光标 （HTTP/SSE模式）：

npx cypress-mcp --port 8932 --project /path/to/your/app

然后将您的MCP客户端指向 http://localhost:8932/sse.

3.开始问你的AI

> List the spec files in my project
> Navigate to http://localhost:3000/login and take a snapshot
> Write a Cypress test for the login form based on what you see
> Run the login spec and tell me what failed

______________________________________________________________________

工具

规范文件工具

测试流道工具

浏览器自动化工具

______________________________________________________________________

工作流程示例

以下是当你要求人工智能为你的应用程序编写测试时会发生的情况：

1.快照页面 — cypress_navigate + cypress_snapshot

Accessibility Snapshot:
- heading "My Todo List" [level=1]
- textbox "New todo"
- button "Add"
- list "Todo list"
  - listitem: No todos yet. Add one above!

2.AI编写规范 — cypress_write_spec

describe('Todo App', () => {
  it('adds a new todo', () => {
    cy.visit('http://localhost:4000');
    cy.get('[aria-label="New todo"]').type('Buy groceries');
    cy.get('button').contains('Add').click();
    cy.get('#todo-list').should('contain', 'Buy groceries');
  });
});

3.运行测试 — cypress_run

✅ Cypress Run PASSED
Tests:    10
Passed:   10
Failed:   0
Duration: 3.21s

______________________________________________________________________

CLI选项

cypress-mcp [options]

  --project 
    Cypress project root (default: current directory)
  --port      Start HTTP/SSE server instead of stdio
  --browser     Browser for automation: chromium | firefox | webkit (default: chromium)
  --headed            Show the automation browser window
  --help              Show help
  --version           Show version

______________________________________________________________________

本地运行

git clone https://github.com/yashpreetbathla/cypress-mcp.git
cd cypress-mcp
npm install
npx playwright install chromium
npm run build
npm test

开发模式

npm run dev        # TypeScript watch mode
npm test           # Run unit tests (Vitest)
npm run test:watch # Watch mode

______________________________________________________________________

需求

柏树是一种 对等依赖 --在项目中安装它，而不是全局安装。MCP服务器自动从 node_modules/.bin/cypress.

______________________________________________________________________

建筑

cypress-mcp/
├── src/
│   ├── index.ts          CLI entry point
│   ├── server.ts         MCP server (stdio + HTTP/SSE transports)
│   ├── context.ts        Playwright-core browser context singleton
│   ├── toolHandler.ts    Central tool dispatcher
│   ├── tools/
│   │   ├── specs.ts      Spec file management (filesystem)
│   │   ├── runner.ts     Cypress test execution (CLI)
│   │   └── browser.ts    Browser automation (Playwright-core)
│   ├── types.ts          TypeScript interfaces
│   └── version.ts        Version constant
└── tests/
    └── unit/
        ├── specs.test.ts      13 tests for file tools
        ├── tools.test.ts       8 tests for tool definitions
        └── toolHandler.test.ts 4 tests for dispatch logic

为什么Playwright是浏览器自动化的核心？

Cypress是一个测试框架-它的浏览器不能作为实时自动化API访问。与其试图侵入Cypress浏览器， cypress-mcp 运行一个轻量级的独立Playwright核心实例，用于自动化任务（导航、快照、截图）。Cypress浏览器仅在通过以下方式运行实际测试时使用 cypress_run.

______________________________________________________________________

与@description/mcp的比较

______________________________________________________________________

贡献

欢迎发布问题和PR。请在开始重要工作之前打开一个问题。

npm test             # must pass
npm run build        # must compile cleanly

______________________________________________________________________

许可证

MIT© 雅什普里特巴特拉