关于 tauri-mcp-testing
用于通过 MCP 桥接对 Tauri 应用进行端到端测试的技能,涵盖会话管理、界面交互、IPC 检查和调试。
主要功能
- 01管理应用测试会话
- 02截图并检查界面元素
- 03操作 Webview 并输入文本
- 04测试和监控 IPC 调用
- 05读取日志并检查窗口
适用场景
- 01验证开发中的 Tauri 界面行为
- 02测试文件和编辑器交互
- 03检查操作触发的 IPC 调用
- 04检查响应式布局和日志
MCP 相关
通过 MCP Bridge Plugin 使用 `tauri_*` MCP 工具连接运行中的 Tauri 应用;明确建议不要用 Chrome DevTools MCP 测试 Tauri 端到端流程。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ xiaolai/ vmark --skill tauri-mcp-testing安装后在 Claude Code 中输入/tauri-mcp-testing确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/debugging.mdipc-testing.mdsession-management.mdwebview-testing.md详细介绍
Tauri MCP 端到端测试
重要: 对 Tauri 应用进行端到端测试时,务必使用 tauri_* MCP 工具。切勿使用 Chrome DevTools MCP——它仅适用于浏览器页面。
快速参考
| 任务 | MCP 工具 |
|---|---|
| 连接到应用 | tauri_driver_session |
| 截取屏幕截图 | tauri_webview_screenshot |
| 查找元素 | tauri_webview_find_element |
| 点击/滚动/滑动 | tauri_webview_interact |
| 输入文本 | tauri_webview_keyboard |
| 等待元素 | tauri_webview_wait_for |
| 执行 JS | tauri_webview_execute_js |
| 获取 CSS 样式 | tauri_webview_get_styles |
| 测试 IPC 命令 | tauri_ipc_execute_command |
| 监控 IPC 调用 | tauri_ipc_monitor |
| 读取控制台日志 | tauri_read_logs |
| 管理窗口 | tauri_manage_window |
前提条件
- 已在 Tauri 应用中安装 MCP Bridge 插件
- 应用正在开发模式下运行(
pnpm tauri:dev) - VMark 自动化可访问端口 9323。 VMark 会将仅用于调试的 Tauri MCP bridge 固定到
127.0.0.1:9323;端口 9223 是 VMark 自身受身份验证保护的 MCP 服务,不能用于端到端自动化。
如果连接失败,请运行 tauri_get_setup_instructions 获取插件安装指南。
核心工作流
1. START SESSION → Connect to running Tauri app
2. VERIFY STATE → Screenshot + find elements
3. INTERACT → Click, type, scroll
4. WAIT → Wait for expected results
5. VERIFY → Check IPC, logs, DOM state
6. CLEANUP → Stop session when done
会话管理
启动会话
// Connect to VMark's automation bridge
tauri_driver_session({ action: 'start', port: 9323 })
// Connect to specific port
tauri_driver_session({ action: 'start', port: 9324 })
// Connect to remote host (mobile testing)
tauri_driver_session({ action: 'start', host: '<device-ip>', port: 9323 })
检查状态
tauri_driver_session({ action: 'status' })
// Returns: connected apps, default app, identifiers
停止会话
// Stop all sessions
tauri_driver_session({ action: 'stop' })
// Stop specific app
tauri_driver_session({ action: 'stop', appIdentifier: 9323 })
测试模式
模式 1:视觉验证
// 1. Take screenshot to see current state
tauri_webview_screenshot()
// 2. Take screenshot of specific element
tauri_webview_screenshot({ uid: 'editor-content' })
// 3. Save to file for comparison
tauri_webview_screenshot({ filePath: 'dev-docs/archive/test-screenshots/test-screenshot.png' })
模式 2:元素交互
// 1. Find element first
tauri_webview_find_element({ selector: '.save-button' })
// 2. Click element
tauri_webview_interact({ action: 'click', selector: '.save-button' })
// 3. Double-click
tauri_webview_interact({ action: 'double-click', selector: '.editor' })
// 4. Long-press (touch simulation)
tauri_webview_interact({ action: 'long-press', selector: '.item', duration: 500 })
// 5. Scroll
tauri_webview_interact({ action: 'scroll', selector: '.content', scrollY: 500 })
// 6. Swipe
tauri_webview_interact({
action: 'swipe',
fromX: 300, fromY: 400,
toX: 100, toY: 400,
duration: 300
})
模式 3:键盘输入
// Type into focused element
tauri_webview_keyboard({
action: 'type',
selector: '.editor-input',
text: '# Hello World'
})
// Press key
tauri_webview_keyboard({ action: 'press', key: 'Enter' })
// Key with modifiers
tauri_webview_keyboard({
action: 'press',
key: 's',
modifiers: ['Control'] // Ctrl+S
})
// Key combinations
tauri_webview_keyboard({
action: 'press',
key: 'z',
modifiers: ['Meta', 'Shift'] // Cmd+Shift+Z (redo on macOS)
})
模式 4:等待状态
// Wait for element to appear
tauri_webview_wait_for({
type: 'selector',
value: '.success-toast',
timeout: 5000
})
// Wait for text to appear
tauri_webview_wait_for({
type: 'text',
value: 'File saved successfully',
timeout: 3000
})
// Wait for IPC event
tauri_webview_wait_for({
type: 'ipc-event',
value: 'file-saved',
timeout: 5000
})
模式 5:IPC 测试
// Start monitoring IPC calls
tauri_ipc_monitor({ action: 'start' })
// Perform action that triggers IPC
tauri_webview_interact({ action: 'click', selector: '.save-button' })
// Get captured IPC calls
tauri_ipc_get_captured({ filter: 'save_file' })
// Execute IPC command directly
tauri_ipc_execute_command({
command: 'get_document_state',
args: { id: 'doc-123' }
})
// Emit event to test handlers
tauri_ipc_emit_event({
eventName: 'file-changed',
payload: { path: '/test/file.md' }
})
// Stop monitoring
tauri_ipc_monitor({ action: 'stop' })
模式 6:JavaScript 执行
// Get value from DOM (MUST use IIFE for return values)
tauri_webview_execute_js({
script: '(() => { return document.querySelector(".editor").textContent; })()'
})
// Check Tauri API available
tauri_webview_execute_js({
script: '(() => { return typeof window.__TAURI__ !== "undefined"; })()'
})
// Get computed style
tauri_webview_execute_js({
script: '(() => { return getComputedStyle(document.body).backgroundColor; })()'
})
// Trigger custom event
tauri_webview_execute_js({
script: 'document.dispatchEvent(new CustomEvent("test-event", { detail: { test: true } }))'
})
调试
读取控制台日志
// Get recent console logs
tauri_read_logs({ source: 'console', lines: 50 })
// Filter logs
tauri_read_logs({ source: 'console', filter: 'error', lines: 100 })
// Logs since specific time
tauri_read_logs({
source: 'console',
since: '2024-01-01T10:00:00Z',
lines: 50
})
特定平台的日志
// Desktop system logs
tauri_read_logs({ source: 'system', lines: 100 })
// Android logcat
tauri_read_logs({ source: 'android', filter: 'vmark', lines: 100 })
// iOS simulator logs
tauri_read_logs({ source: 'ios', lines: 100 })
窗口管理
// List all windows
tauri_manage_window({ action: 'list' })
// Get window info
tauri_manage_window({ action: 'info', windowId: 'main' })
// Resize window for responsive testing
tauri_manage_window({ action: 'resize', width: 800, height: 600 })
// Resize specific window
tauri_manage_window({
action: 'resize',
windowId: 'settings',
width: 400,
height: 300
})
获取 CSS 样式
// Get all computed styles
tauri_webview_get_styles({ selector: '.editor' })
// Get specific properties
tauri_webview_get_styles({
selector: '.editor',
properties: ['font-size', 'color', 'background-color']
})
// Get styles from multiple elements
tauri_webview_get_styles({
selector: '.toolbar button',
multiple: true,
properties: ['opacity', 'visibility']
})
常见测试场景
场景:文件操作
// 1. Connect
tauri_driver_session({ action: 'start', port: 9323 })
// 2. Open file dialog
tauri_webview_keyboard({ action: 'press', key: 'o', modifiers: ['Control'] })
// 3. Wait for content to load (using IPC)
tauri_ipc_monitor({ action: 'start' })
// ... file selection happens externally or via mocked dialog ...
tauri_ipc_get_captured({ filter: 'read_file' })
// 4. Verify content loaded
tauri_webview_find_element({ selector: '.editor-content' })
tauri_webview_execute_js({
script: '(() => { return document.querySelector(".editor-content").textContent.length > 0; })()'
})
场景:在编辑器中输入
// 1. Focus editor
tauri_webview_interact({ action: 'click', selector: '.editor' })
// 2. Type content
tauri_webview_keyboard({
action: 'type',
selector: '.editor [contenteditable]',
text: '# Test Document\n\nThis is a test.'
})
// 3. Verify dirty state
tauri_webview_find_element({ selector: '[data-dirty="true"]' })
// 4. Save with Ctrl+S
tauri_webview_keyboard({ action: 'press', key: 's', modifiers: ['Control'] })
// 5. Verify saved
tauri_webview_wait_for({ type: 'selector', value: '[data-dirty="false"]' })
场景:响应式测试
// Test mobile viewport
tauri_manage_window({ action: 'resize', width: 375, height: 667 })
tauri_webview_screenshot({ filePath: 'dev-docs/archive/test-screenshots/mobile.png' })
tauri_webview_find_element({ selector: '.mobile-menu-button' })
// Test tablet viewport
tauri_manage_window({ action: 'resize', width: 768, height: 1024 })
tauri_webview_screenshot({ filePath: 'dev-docs/archive/test-screenshots/tablet.png' })
// Test desktop viewport
tauri_manage_window({ action: 'resize', width: 1920, height: 1080 })
tauri_webview_screenshot({ filePath: 'dev-docs/archive/test-screenshots/desktop.png' })
故障排除
| 问题 | 解决方案 |
|---|---|
| 连接被拒绝 | 确保应用已通过 pnpm tauri:dev 运行 |
| 未找到元素 | 检查选择器,并截取屏幕截图以确认 DOM |
| 未捕获 IPC | 在操作开始前启动监控 |
| 等待超时 | 延长超时时间,并检查元素是否会出现 |
| JS 返回 undefined | 使用 IIFE 语法:(() => { return value; })() |
| 未找到插件 | 运行 tauri_get_setup_instructions |
参考文件
| 主题 | 文件 |
|---|---|
| 会话管理 | references/session-management.md |
| Webview 测试 | references/webview-testing.md |
| IPC 测试 | references/ipc-testing.md |
| 调试 | references/debugging.md |
相关技能
tauri-app-dev— Tauri 2.0 的通用模式(命令、状态、插件、安全)tauri-v2-integration— VMark 专用 IPC 模式(invoke/emit 桥接、菜单快捷键)rust-tauri-backend— VMark Rust 后端实现
评论
支持 Markdown