mcpField
F
flutter-skill

flutter-skill

本地服务
github.com/ai-dashboad开发工具3988 周前更新

关于 flutter-skill

flutter-skill 是一个 AI E2E 测试工具,让 AI Agent 能够观察并操作正在运行的应用,无需编写测试代码。它面向使用 Flutter 及其他多平台应用的开发者,通过单个 MCP 服务提供大量工具。

主要功能

  1. 01通过无障碍树获取页面语义摘要
  2. 02支持点击、输入、滚动等界面操作
  3. 03批量执行多个操作以减少调用次数
  4. 04提供截图、断言和等待等测试工具
  5. 05支持 Flutter、React Native、Electron 等平台

适用场景

  1. 01让 AI Agent 用自然语言探索应用并报告问题
  2. 02在无需测试代码的情况下执行端到端测试
  3. 03在 CI/CD 流程中通过 HTTP 模式运行浏览器自动化

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"ai-dashboad-flutter-skill": {
"command": "npx",
"args": [
"-y",
"flutter-skill"
]
}
}
}
启动命令npx -y flutter-skill

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npmflutter-skill0.9.36

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具,维护者暂未提供工具列表。

详细介绍

flutter-skill 命令行演示 — 在网站间导航、点击、输入和截图

flutter-skill

让任何 AI Agent 都能在任何正在运行的应用中看见并操作。
10 个平台。无需编写测试代码。一个 MCP 服务。

Stars pub.dev npm CI License

演示 • 快速开始 • AI 平台 • 平台 • 与其他方案对比 • 文档

🚀 无需配置。无需编写测试代码。只需与 AI 对话。

如果它为你节省了时间,请考虑为仓库点个星 ⭐ — 这能帮助更多人发现它!


30 秒演示

https://github.com/user-attachments/assets/d4617c73-043f-424c-9a9a-1a61d4c2d3c6

一句提示词。28 个 AI 驱动的操作。无需编写测试代码。 AI 自主探索 TikTok 克隆应用、切换标签页、滚动信息流、测试搜索、填写表单。


为什么要做这个

编写 E2E 测试很痛苦。维护测试更痛苦。flutter-skill 采用了另一种方式:

  • 🔌 通过 MCP 将任何 AI Agent(Claude、Cursor、Windsurf、Copilot、OpenClaw)直接连接到正在运行的应用
  • 👀 Agent 可以看到你的屏幕 — 点击按钮、输入文字、滚动、导航,就像永不休息的人类测试人员
  • ✅ 无需编写测试代码 — 不需要 Page Object、XPath 或脆弱的选择器,只需使用日常语言
  • ⚡ 无需配置 — 只需 2 行代码,适用于全部 10 个平台
You: "Test the checkout flow with an empty cart, then add 3 items and complete purchase"

Your AI agent handles the rest — screenshots, taps, text entry, assertions, navigation.
No Page Objects. No XPath. No brittle selectors. Just plain English.

快速开始

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 的 Agent。

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、Agent Skill)
方式命令
npmnpm install -g flutter-skill
Homebrewbrew install ai-dashboad/flutter-skill/flutter-skill
Scoopscoop install flutter-skill
Dockerdocker pull ghcr.io/ai-dashboad/flutter-skill
pub.devdart pub global activate flutter_skill
VSCode扩展 → "Flutter Skill"
JetBrains插件 → "Flutter Skill"
Agent Skillnpx skills add ai-dashboad/flutter-skill
零配置flutter-skill init(自动检测并修补你的应用)

与 AI 平台搭配使用

MCP 服务模式(IDE 集成)

兼容任何支持 MCP 的 AI 工具。只需一行配置:

{
  "mcpServers": {
    "flutter-skill": {
      "command": "flutter-skill",
      "args": ["server"]
    }
  }
}
平台配置文件状态
Cursor.cursor/mcp.json✅
Claude Desktopclaude_desktop_config.json✅
Windsurf~/.codeium/windsurf/mcp_config.json✅
VSCode Copilot.vscode/mcp.json✅
ClineVSCode 设置 → Cline → MCP✅
OpenClaw技能或 MCP 配置✅
Continue.dev.continue/config.json✅
HTTP 服务模式(命令行与自动化)

适用于独立的浏览器自动化、CI/CD 流水线或远程访问:

# Start server
flutter-skill serve https://your-app.com

# Use CLI client commands
flutter-skill nav https://google.com
flutter-skill snap                    # Accessibility tree (99% fewer tokens)
flutter-skill screenshot /tmp/ss.jpg
flutter-skill tap "Login"
flutter-skill type "[email protected]"
flutter-skill eval "document.title"
flutter-skill tools                   # List all available 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 Agent 集成命令行 / 自动化 / CI/CD
协议MCP(通过 stdio 传输的 JSON-RPC)HTTP REST
工具253(根据页面动态变化)246(通用)
浏览器自动启动 Chrome连接到现有 Chrome
最适用于Cursor、Claude、VSCodeOpenClaw、脚本、流水线

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


10 个平台,一个工具

大多数测试工具只能用于 1–2 个平台。flutter-skill 可用于 10 个平台。

平台SDK测试得分
Flutter(iOS/Android/Web)flutter_skill✅ 188/195
React Nativesdks/react-native✅ 75/75
Electronsdks/electron✅ 75/75
Tauri(Rust)sdks/tauri✅ 75/75
Android(Kotlin)sdks/android✅ 74/75
KMP Desktopsdks/kmp✅ 75/75
.NET MAUIsdks/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)ElectronAndroid
connect93 ms55 ms103 ms
tap1 ms1 ms2 ms
enter_text1 ms1 ms2 ms
inspect3 ms12 ms10 ms
snapshot2 ms8 ms29 ms
screenshot31 ms80 ms88 ms
eval1 ms——

Token 效率: snapshot() 返回结构化的元素树,而不是图像——与向 AI Agent 发送屏幕截图相比,Token 数量减少 87–99%。

速度有多快? 一次 tap 的端到端耗时为 1–2 ms。Playwright 和 Selenium 等浏览器自动化工具执行相同操作通常需要 50–100 ms。速度快 50–100 倍,因为 flutter-skill 直接与应用运行时通信,无需经过 WebDriver 或 CDP 间接转接。

高负载 DOM 网站(真实场景)

在生产网站上测试了 15 个 MCP 工具——75/75 全部通过,零超时:

网站工具总耗时snapshotscreenshotcount_elements
YouTube15/15 ✅6.9s43 ms30 ms4 ms
Amazon15/15 ✅14.2s1 ms5 ms2 ms
Reddit15/15 ✅17.9s6 ms32 ms51 ms
Hacker News15/15 ✅4.8s53 ms188 ms1 ms
Wikipedia15/15 ✅7.8s15 ms336 ms1 ms

总耗时包含页面加载时间。即使在 DOM 复杂的网站上,工具执行时间也稳定低于 100 ms。


为什么不选 Playwright / Appium / Detox?

flutter-skillPlaywright MCPAppiumDetox
MCP 工具253~33❌❌
平台101(Web)移动端React Native
设置时间30 秒几分钟几小时几小时
需要编写测试代码❌ 不需要✅ 需要✅ 需要✅ 需要
原生支持 AI(MCP)✅✅❌❌
自愈测试✅❌❌❌
Monkey / 模糊测试✅❌❌❌
视觉回归✅❌❌❌
网络模拟 / 回放✅❌❌❌
API + UI 测试✅❌❌❌
多设备同步✅❌部分支持❌
无障碍审计✅❌❌❌
国际化测试✅❌❌❌
性能监控✅❌❌❌
自然语言✅❌❌❌
Flutter 支持✅ 原生支持部分支持部分支持❌
桌面应用✅✅❌❌

| AI 页面理解 | ✅ AX Tree | ❌ 仅截图 | ❌ | ❌ | | 边界 / 安全测试 | ✅ 13 个载荷 | ❌ | ❌ | ❌ | | 批量操作 | ✅ 每次调用 5 项以上 | 每次调用 1 项 | 每次调用 1 项 | 每次调用 1 项 |

flutter-skill 是唯一一款原生支持 AI、可跨移动端、Web 和桌面平台运行的端到端测试工具,工具数量是最接近的竞争者的 7 倍。


CLI 命令

# 🤖 AI autonomous exploration — finds bugs automatically
flutter-skill explore https://my-app.com --depth=3

# 🐒 Monkey/fuzz testing — random actions, crash detection
flutter-skill monkey https://my-app.com --actions=100 --seed=42

# 🚀 Parallel multi-platform testing
flutter-skill test --url https://my-app.com --platforms web,electron,android

# 🌐 Zero-config WebMCP server — any website becomes testable
flutter-skill serve https://my-app.com

🧠 原生支持 AI:减少 95% 的令牌用量

大多数 AI 测试工具会向大模型发送截图——每张截图约消耗 4,000 个令牌。

flutter-skill 使用 Chrome 的无障碍树,为 AI 提供任意页面的精简语义摘要:

// page_summary → ~200 tokens (vs ~4,000 for a screenshot)
{
  "title": "Shopping Cart",
  "nav": ["Home", "Products", "Cart", "Account"],
  "forms": [{"input:Coupon Code": "text"}],
  "buttons": ["Apply", "Checkout", "Continue Shopping"],
  "features": {"search": true, "pagination": true},
  "links": 47, "inputs": 3
}

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

// explore_actions → 5 actions per call (vs 5 separate tool calls)
{"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": "[email protected]"},
  {"type": "tap", "target": "button:Continue"}
]}

结果: 与基于截图的工具相比,AI Agent 测试速度更快、成本更低,还能更好地理解页面。

flutter-skill基于截图的工具
每页令牌数~200~4,000
每次调用的操作数5 项以上1
理解语义✅ 角色、名称、状态❌ 仅像素
支持 Shadow DOM✅❌

功能

👀 查看
  • 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.37
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 要测试什么:

提示词执行内容
“使用错误密码测试登录”截图 → 输入凭据 → 点击登录 → 验证错误
“探索每个屏幕并报告问题”系统地浏览所有屏幕,测试所有元素
“使用边界情况填写注册表单”测试 emoji 🌍、长字符串、空字段、特殊字符
“比较 iOS 和 Android 上的结账流程”在两个平台上运行相同的测试,并比较截图
“为全部 5 个标签页截图”点击每个标签页,捕获状态

贡献

请参阅 CONTRIBUTING.md 了解指南。

git clone https://github.com/ai-dashboad/flutter-skill
cd flutter-skill
dart pub get
dart run bin/flutter_skill.dart server  # Start MCP server

链接

📦 pub.dev🧩 VSCode
📦 npm🧩 JetBrains
🍺 Homebrew📖 文档
🤖 Agent 技能📋 变更日志

⭐ 如果 flutter-skill 为你节省了时间,请为它点亮星标,让更多人也能发现它!

MIT 许可证 © 2025

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。