Flutter Skill

🚀 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 秒內完成。

✨ 主要特性

• 連接任意 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"]
    }
  }
}

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                   # 列出所有可用工具

支持 --port=N、--host=H 標誌以及 FS_PORT/FS_HOST 環境變量。

兩種模式對比

完整的 CLI 客戶端參考：docs/CLI_CLIENT.md

支持 10 個平臺

大多數測試工具僅支持 1 - 2 個平臺，而 flutter-skill 支持 10 個平臺：

總計：656/664 個測試通過（98.8%）——每個平臺都針對一個包含 50 多個元素的複雜社交媒體應用進行了測試。

性能表現

針對複雜社交媒體應用的自動化測試運行的真實基準測試結果：

令牌效率：snapshot() 返回結構化的元素樹，而不是圖像，與向 AI 智能體發送截圖相比，減少 87 - 99% 的令牌。

速度有多快：一次 tap 操作的端到端時間僅為 1 - 2 毫秒。像 Playwright 和 Selenium 這樣的瀏覽器自動化工具通常需要 50 - 100 毫秒才能完成相同的操作。這意味著 flutter-skill 快 50 - 100 倍，因為它直接與應用程序運行時通信，而無需通過 WebDriver 或 CDP 間接通信。

複雜 DOM 網站（真實世界場景）

對 15 個 MCP 工具在生產網站上進行了測試，75/75 通過，無超時情況：

總時間包括頁面加載時間。即使在複雜 DOM 網站上，工具執行時間也始終低於 100 毫秒。

與其他工具對比

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 — 自動查找應用

平臺設置

dependencies:
  flutter_skill: ^0.9.7

import 'package:flutter_skill/flutter_skill.dart';

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

npm install flutter-skill-react-native

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

npm install flutter-skill-electron

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

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

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

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

FlutterSkillBridge.start(this)

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

示例提示

只需告訴 AI 要測試的內容：

🔧 技術細節

減少 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 智能體測試速度更快，成本更低，並且比基於截圖的工具更能理解頁面。

📄 許可證

MIT License © 2025

貢獻指南

請參閱 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 為你節省了時間，請給項目點個星，讓更多人發現它！