mcpField
T
tauri-mcp-testing

tauri-mcp-testing

github.com/xiaolai测试与质量87869 次安装今天更新
代码仓库

关于 tauri-mcp-testing

用于通过 MCP 桥接对 Tauri 应用进行端到端测试的技能,涵盖会话管理、界面交互、IPC 检查和调试。

主要功能

  1. 01管理应用测试会话
  2. 02截图并检查界面元素
  3. 03操作 Webview 并输入文本
  4. 04测试和监控 IPC 调用
  5. 05读取日志并检查窗口

适用场景

  1. 01验证开发中的 Tauri 界面行为
  2. 02测试文件和编辑器交互
  3. 03检查操作触发的 IPC 调用
  4. 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.md
ipc-testing.md
session-management.md
webview-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
执行 JStauri_webview_execute_js
获取 CSS 样式tauri_webview_get_styles
测试 IPC 命令tauri_ipc_execute_command
监控 IPC 调用tauri_ipc_monitor
读取控制台日志tauri_read_logs
管理窗口tauri_manage_window

前提条件

  1. 已在 Tauri 应用中安装 MCP Bridge 插件
  2. 应用正在开发模式下运行(pnpm tauri:dev)
  3. 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