JinDaGe - flutter-skill MCP Details

article

README

🚀 flutter-skill

flutter-skill 可以让任何 AI 智能体在运行的应用程序中拥有视觉和交互能力。它支持 10 个平台，无需编写测试代码，仅需一个 MCP 服务器即可。

🚀 快速开始

1. 安装（30 秒）

npm install -g flutter-skill

2. 添加到你的 AI（复制粘贴到 MCP 配置中）

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

支持 Claude Desktop、Cursor、Windsurf、Copilot、Cline、OpenClaw 等任何兼容 MCP 的智能体。

3. 添加到你的应用（Flutter 只需 2 行代码）

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

4. 测试 — 直接与你的 AI 对话

"启动我的应用，探索每个屏幕，并报告任何错误"

就是这么简单。无需配置，无需测试代码，整个过程在 60 秒内完成。

📦 更多安装方法（Homebrew、Scoop、Docker、IDE、智能体技能）

| 方法 | 命令 | |--------|---------| | npm | npm install -g flutter-skill | | Homebrew | brew install ai-dashboad/flutter-skill/flutter-skill | | Scoop | scoop install flutter-skill | | Docker | docker pull ghcr.io/ai-dashboad/flutter-skill | | pub.dev | dart pub global activate flutter_skill | | VSCode | 扩展 → "Flutter Skill" | | JetBrains | 插件 → "Flutter Skill" | | 智能体技能 | npx skills add ai-dashboad/flutter-skill | | 零配置 | flutter-skill init（自动检测并修补你的应用） |

✨ 主要特性

连接任意 AI 智能体：通过 MCP 直接将任何 AI 智能体（Claude、Cursor、Windsurf、Copilot、OpenClaw 等）连接到你正在运行的应用程序。
智能体可查看屏幕：智能体可以像不知疲倦的人类测试人员一样，点击按钮、输入文本、滚动页面和导航。
无需测试代码：无需使用 Page Objects、XPath 或脆弱的选择器，只需用普通英语描述测试任务。
零配置：只需两行代码，即可在所有 10 个平台上运行。

💻 使用示例

基础用法

# 让 AI 自动探索应用并查找错误
flutter-skill explore https://my-app.com --depth=3

# 进行猴子/模糊测试，执行随机操作并检测崩溃
flutter-skill monkey https://my-app.com --actions=100 --seed=42

# 并行多平台测试
flutter-skill test --url https://my-app.com --platforms web,electron,android

# 零配置 WebMCP 服务器，使任何网站都可测试
flutter-skill serve https://my-app.com

高级用法

// 批量操作示例
{"actions": [
  {"type": "fill", "target": "input:Coupon Code", "value": "SAVE20"},
  {"type": "tap", "target": "button:Apply"},
  {"type": "tap", "target": "button:Checkout"},
  {"type": "fill", "target": "input:Email", "value": "test@example.com"},
  {"type": "tap", "target": "button:Continue"}
]}

📚 详细文档

与 AI 平台结合使用

MCP 服务器模式（IDE 集成）

适用于任何兼容 MCP 的 AI 工具，只需一行配置：

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}

| 平台 | 配置文件 | 状态 | |----------|-------------|--------| | Cursor | .cursor/mcp.json | ✅ | | Claude Desktop | claude_desktop_config.json | ✅ | | Windsurf | ~/.codeium/windsurf/mcp_config.json | ✅ | | VSCode Copilot | .vscode/mcp.json | ✅ | | Cline | VSCode 设置 → Cline → MCP | ✅ | | OpenClaw | 技能或 MCP 配置 | ✅ | | Continue.dev | .continue/config.json | ✅ |

HTTP 服务模式（CLI 和自动化）

适用于独立的浏览器自动化、CI/CD 管道或远程访问：

# 启动服务器
flutter-skill serve https://your-app.com

# 使用 CLI 客户端命令
flutter-skill nav https://google.com
flutter-skill snap                    # 可访问性树（减少 99% 的令牌）
flutter-skill screenshot /tmp/ss.jpg
flutter-skill tap "Login"
flutter-skill type "hello@example.com"
flutter-skill eval "document.title"
flutter-skill tools                   # 列出所有可用工具

| 命令 | 描述 | |---------|-------------| | nav <url> | 导航到 URL | | snap | 可访问性树快照 | | screenshot [path] | 截图 | | tap <text\|ref\|x y> | 点击元素 | | type <text> | 通过键盘输入文本 | | key <key> [mod] | 按下按键 | | eval <js> | 执行 JavaScript | | title | 获取页面标题 | | text | 获取可见文本 | | hover <text> | 悬停在元素上 | | upload <sel> <file> | 上传文件 | | tools | 列出工具 | | call <tool> [json] | 调用任何工具 |

支持 --port=N、--host=H 标志以及 FS_PORT/FS_HOST 环境变量。

两种模式对比

| | server（MCP stdio） | serve（HTTP） | |---|---|---| | 用例 | IDE / AI 智能体集成 | CLI / 自动化 / CI/CD | | 协议 | MCP（通过 stdio 的 JSON-RPC） | HTTP REST | | 工具 | 253（每页动态变化） | 246（通用） | | 浏览器 | 自动启动 Chrome | 连接到现有的 Chrome | | 最适合 | Cursor、Claude、VSCode | OpenClaw、脚本、管道 |

完整的 CLI 客户端参考：docs/CLI_CLIENT.md

支持 10 个平台

大多数测试工具仅支持 1 - 2 个平台，而 flutter-skill 支持 10 个平台：

| 平台 | SDK | 测试得分 | |----------|-----|:----------:| | Flutter (iOS/Android/Web) | flutter_skill | ✅ 188/195 | | React Native | sdks/react-native | ✅ 75/75 | | Electron | sdks/electron | ✅ 75/75 | | Tauri (Rust) | sdks/tauri | ✅ 75/75 | | Android (Kotlin) | sdks/android | ✅ 74/75 | | KMP Desktop | sdks/kmp | ✅ 75/75 | | .NET MAUI | sdks/dotnet-maui | ✅ 75/75 | | iOS (Swift/UIKit) | sdks/ios | ✅ 19/19 | | Web (任何网站) | sdks/web | ✅ | | Web CDP (零配置) | 无需 SDK | ✅ 141/156 |

总计：656/664 个测试通过（98.8%）——每个平台都针对一个包含 50 多个元素的复杂社交媒体应用进行了测试。

性能表现

针对复杂社交媒体应用的自动化测试运行的真实基准测试结果：

| 操作 | Web (CDP) | Electron | Android | |-----------|:---------:|:--------:|:-------:| | connect | 93 ms | 55 ms | 103 ms | | tap | 1 ms | 1 ms | 2 ms | | enter_text | 1 ms | 1 ms | 2 ms | | inspect | 3 ms | 12 ms | 10 ms | | snapshot | 2 ms | 8 ms | 29 ms | | screenshot | 31 ms | 80 ms | 88 ms | | eval | 1 ms | — | — |

令牌效率：snapshot() 返回结构化的元素树，而不是图像，与向 AI 智能体发送截图相比，减少 87 - 99% 的令牌。

速度有多快：一次 tap 操作的端到端时间仅为 1 - 2 毫秒。像 Playwright 和 Selenium 这样的浏览器自动化工具通常需要 50 - 100 毫秒才能完成相同的操作。这意味着 flutter-skill 快 50 - 100 倍，因为它直接与应用程序运行时通信，而无需通过 WebDriver 或 CDP 间接通信。

复杂 DOM 网站（真实世界场景）

对 15 个 MCP 工具在生产网站上进行了测试，75/75 通过，无超时情况：

| 网站 | 工具 | 总时间 | snapshot | screenshot | count_elements | |------|:-----:|:----------:|:----------:|:------------:|:----------------:| | YouTube | 15/15 ✅ | 6.9s | 43 ms | 30 ms | 4 ms | | Amazon | 15/15 ✅ | 14.2s | 1 ms | 5 ms | 2 ms | | Reddit | 15/15 ✅ | 17.9s | 6 ms | 32 ms | 51 ms | | Hacker News | 15/15 ✅ | 4.8s | 53 ms | 188 ms | 1 ms | | Wikipedia | 15/15 ✅ | 7.8s | 15 ms | 336 ms | 1 ms |

总时间包括页面加载时间。即使在复杂 DOM 网站上，工具执行时间也始终低于 100 毫秒。

与其他工具对比

| | flutter-skill | Playwright MCP | Appium | Detox | |---|:---:|:---:|:---:|:---:| | MCP 工具 | 253 | ~33 | ❌ | ❌ | | 平台 | 10 | 1 (web) | 移动 | React Native | | 设置时间 | 30 秒 | 几分钟 | 几小时 | 几小时 | | 需要测试代码 | ❌ 无需 | ✅ 需要 | ✅ 需要 | ✅ 需要 | | 原生支持 AI (MCP) | ✅ | ✅ | ❌ | ❌ | | 自修复测试 | ✅ | ❌ | ❌ | ❌ | | 猴子/模糊测试 | ✅ | ❌ | ❌ | ❌ | | 视觉回归测试 | ✅ | ❌ | ❌ | ❌ | | 网络模拟/重放 | ✅ | ❌ | ❌ | ❌ | | API + UI 测试 | ✅ | ❌ | ❌ | ❌ | | 多设备同步 | ✅ | ❌ | 部分支持 | ❌ | | 可访问性审计 | ✅ | ❌ | ❌ | ❌ | | 国际化测试 | ✅ | ❌ | ❌ | ❌ | | 性能监控 | ✅ | ❌ | ❌ | ❌ | | 自然语言支持 | ✅ | ❌ | ❌ | ❌ | | Flutter 支持 | ✅ 原生支持 | 部分支持 | 部分支持 | ❌ | | 桌面应用支持 | ✅ | ✅ | ❌ | ❌ | | AI 页面理解 | ✅ 可访问性树 | ❌ 截图 | ❌ | ❌ | | 边界/安全测试 | ✅ 13 种有效负载 | ❌ | ❌ | ❌ | | 批量操作 | ✅ 每次调用 5 个以上操作 | 每次调用 1 个操作 | 每次调用 1 个操作 | 每次调用 1 个操作 |

flutter-skill 是唯一一款跨移动、Web 和桌面平台的原生 AI 端到端测试工具，其工具数量是最接近的竞争对手的 7 倍。

支持的操作

查看

screenshot — 捕获屏幕
inspect_interactive — 获取所有可点击/可输入元素及其语义引用
find_element / wait_for_element
get_elements — 获取完整的元素树

交互

tap / long_press / swipe / drag
enter_text / set_text / clear_text
scroll — 支持所有方向滚动
go_back / press_key

检查（v0.8.0）

语义引用：button:Login, input:Email
在 UI 更改时保持稳定
tap(ref: "button:Submit")
支持 7 种角色：按钮、输入框、开关、滑块、选择框、链接、项目

控制

launch_app — 以不同的版本启动应用
hot_reload / hot_restart
get_logs / get_errors
scan_and_connect — 自动查找应用

253 个工具 — 完整参考

AI 探索：page_summary, explore_actions, boundary_test, explore_report

启动与连接：launch_app, scan_and_connect, connect_cdp, hot_reload, hot_restart, list_sessions, switch_session, close_session, disconnect, stop_app

屏幕操作：screenshot, screenshot_region, screenshot_element, native_screenshot, inspect, inspect_interactive, snapshot, get_widget_tree, find_by_type, get_text_content, get_visible_text

交互操作：tap, double_tap, long_press, enter_text, set_text, clear_text, swipe, scroll_to, drag, go_back, press_key, type_text, hover, fill, select_option, set_checkbox, focus, blur, native_tap, native_input_text, native_swipe

智能测试：smart_tap, smart_enter_text, smart_assert（通过模糊匹配实现自修复）

断言操作：assert_text, assert_visible, assert_not_visible, assert_element_count, assert_batch, wait_for_element, wait_for_gone, wait_for_idle, wait_for_stable, wait_for_url, wait_for_text, wait_for_element_count

视觉回归测试：visual_baseline_save, visual_baseline_compare, visual_baseline_update, visual_regression_report, visual_verify, visual_diff, compare_screenshot

网络模拟：mock_api, mock_clear, record_network, replay_network, intercept_requests, clear_interceptions, block_urls, http_request

API 测试：api_request, api_assert

覆盖与可靠性测试：coverage_start, coverage_stop, coverage_report, coverage_gaps, retry_on_fail, stability_check

数据驱动测试：test_with_data, generate_test_data

多设备测试：multi_connect, multi_action, multi_compare, multi_disconnect, parallel_snapshot, parallel_tap

可访问性测试：accessibility_audit, a11y_full_audit, a11y_tab_order, a11y_color_contrast, a11y_screen_reader

国际化测试：set_locale, verify_translations, i18n_snapshot

性能测试：perf_start, perf_stop, perf_report, get_performance, get_frame_stats, get_memory_stats

会话管理：save_session, restore_session, session_diff

录制与导出：record_start, record_stop, record_export（支持 Playwright、Cypress、XCUITest、Espresso、Detox、Maestro 等 5 种以上格式）, video_start, video_stop

认证操作：auth_inject_session, auth_biometric, auth_otp, auth_deeplink

CDP 浏览器操作：navigate, reload, go_forward, get_title, get_page_source, eval, get_tabs, new_tab, switch_tab, close_tab, get_cookies, set_cookie, clear_cookies, get_local_storage, set_local_storage, clear_local_storage, generate_pdf, set_viewport, emulate_device, throttle_network, go_offline, set_geolocation, set_timezone, set_color_scheme

调试操作：get_logs, get_errors, get_console_messages, get_network_requests, diagnose, diagnose_project, reset_app

平台设置

Flutter (iOS / Android / Web)

dependencies:
  flutter_skill: ^0.9.7

import 'package:flutter_skill/flutter_skill.dart';

void main() {
  if (kDebugMode) FlutterSkillBinding.ensureInitialized();
  runApp(MyApp());
}

React Native

npm install flutter-skill-react-native

import FlutterSkill from 'flutter-skill-react-native';
FlutterSkill.start();

Electron

npm install flutter-skill-electron

const { FlutterSkillBridge } = require('flutter-skill-electron');
FlutterSkillBridge.start(mainWindow);

iOS (Swift)

// Swift Package Manager: FlutterSkillSDK
import FlutterSkill
FlutterSkillBridge.shared.start()

Text("Hello").flutterSkillId("greeting")

Android (Kotlin)

implementation("com.flutterskill:flutter-skill:0.8.0")

FlutterSkillBridge.start(this)

Tauri (Rust)

[dependencies]
flutter-skill-tauri = "0.8.0"

KMP Desktop

添加 Gradle 依赖 — 详情见 sdks/kmp。

.NET MAUI

添加 NuGet 包 — 详情见 sdks/dotnet-maui。

示例提示

只需告诉 AI 要测试的内容：

| 提示 | 操作 | |--------|-------------| | "使用错误密码测试登录功能" | 截图 → 输入凭证 → 点击登录 → 验证错误信息 | | "探索每个屏幕并报告错误" | 系统地浏览所有屏幕，测试所有元素 | | "使用边界情况填写注册表单" | 测试表情符号 🌍、长字符串、空字段、特殊字符 | | "比较 iOS 和 Android 上的结账流程" | 在两个平台上运行相同的测试，比较截图 | | "截取所有 5 个标签页的屏幕截图" | 点击每个标签页，捕获状态 |

🔧 技术细节

减少 95% 的令牌使用

大多数 AI 测试工具会向大语言模型发送截图，每张截图大约需要 4000 个令牌。而 flutter-skill 使用 Chrome 的 可访问性树 为 AI 提供任何页面的紧凑语义摘要：

// 页面摘要 → 约 200 个令牌（相比截图的约 4000 个令牌）
{
  "title": "购物车",
  "nav": ["主页", "产品", "购物车", "账户"],
  "forms": [{"输入框:优惠券代码": "文本"}],
  "buttons": ["应用", "结算", "继续购物"],
  "特性": {"搜索": true, "分页": true},
  "链接": 47, "输入框": 3
}

然后在一次调用中批量执行多个操作：

// 探索操作 → 每次调用执行 5 个操作（相比每次调用执行 1 个工具操作）
{"actions": [
  {"type": "填充", "目标": "输入框:优惠券代码", "值": "SAVE20"},
  {"type": "点击", "目标": "按钮:应用"},
  {"type": "点击", "目标": "按钮:结算"},
  {"type": "填充", "目标": "输入框:电子邮件", "值": "test@example.com"},
  {"type": "点击", "目标": "按钮:继续"}
]}

结果：你的 AI 智能体测试速度更快，成本更低，并且比基于截图的工具更能理解页面。

| | flutter-skill | 基于截图的工具 | |---|:---:|:---:| | 每页令牌数 | ~200 | ~4000 | | 每次调用操作数 | 5+ | 1 | | 是否理解语义 | ✅ 角色、名称、状态 | ❌ 仅像素信息 | | 是否支持 Shadow DOM | ✅ | ❌ |

📄 许可证

贡献指南

请参阅 CONTRIBUTING.md 获取贡献指南。

git clone https://github.com/ai-dashboad/flutter-skill
cd flutter-skill
dart pub get
dart run bin/flutter_skill.dart server  # 启动 MCP 服务器

flutter-skill