tauri-mcp-testing

Tauri MCP E2E テスト

重要： Tauri アプリケーションの E2E テストでは、必ず 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

前提条件

1. Tauri アプリに MCP Bridge Plugin がインストールされている
2. アプリが開発モードで 実行中（pnpm tauri:dev）
3. VMark の自動化用に ポート 9323 にアクセスできる。VMark はデバッグ専用の Tauri MCP ブリッジを 127.0.0.1:9323 に固定しています。ポート 9223 は VMark 独自の 認証で保護された MCP サーバーであり、E2E 自動化には使用できません。

接続に失敗した場合は、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 バックエンド実装