Fork: 0
dtmoyaji / TelosDB
Transfer to URL with SHA Find file
Newer
Older
TelosDB / docs / specification / 12_ui_testing_options.md
@楽曲作りまくりおじさん 楽曲作りまくりおじさん 1 day ago 5 KB v0.3.2: 取得件数既定5件、フッターv?・バージョン一致テスト、E2E統合・配布前ルール、ジャーナル014
Raw Blame History

UI をテストに組み込む方法

UI 仕様は 06_ui_design_spec.md、アーキテクチャは 02_architecture_design.md を参照。結論: 可能です。 主に次の 2 通り。

1. Tauri 公式の E2E（WebDriver + tauri-driver）

アプリ全体（ウィンドウ + WebView）を起動し、WebDriver で操作・アサーションする方法です。

概要

  • tauri-driver: Tauri アプリを WebDriver 対応で起動するラッパー。
  • 対応: Windows（Edge Driver）、Linux（WebKitWebDriver）。macOS はデスクトップ非対応（WKWebView 用ドライバが無いため）。
  • テストランナー例: Selenium、WebdriverIO など。

用意するもの

環境 必要なもの
Windows Microsoft Edge Driver（Edge のバージョンと一致させる）。msedgedriver を PATH に通すか、tauri-driver --native-driver <path> で指定。
Linux WebKitWebDriver（例: Debian 系なら webkit2gtk-driver）。CI では xvfb で仮想ディスプレイが必要な場合あり。 
cargo install tauri-driver --locked

実行イメージ

  1. tauri-driver でアプリを WebDriver モードで起動。
  2. テストコード（Selenium / WebdriverIO 等）で接続し、要素の取得・クリック・入力・表示内容のアサーションを行う。

公式例: WebDriver Example、Tauri - WebDriver、CI の例。

このプロジェクトでの実装（実施済み）

  • WebdriverIO を devDependency に追加。ルートに wdio.conf.js を配置。
  • npm スクリプト: npm run test:e2e（ビルド + tauri-driver 起動 + E2E 実行）、npm run build:e2e（E2E 用 debug ビルドのみ）。
  • スペック: tests/e2e/specs/app.spec.js でタイトル・ヘッダー・検索 UI を検証。
  • 前提: cargo install tauri-driver --locked と、Windows では Edge Driver（msedgedriver）を PATH に通す。詳細は tests/e2e/README.md を参照。

2. フロントのみの UI テスト（Playwright 等）

Tauri のウィンドウは使わず、フロントの HTML/JS だけをブラウザで開いてテストする方法です。

概要

  • 開発サーバ（tauri dev の 8474 配信）またはビルド済み静的ファイルをローカルサーバで配信し、その URL に Playwright などで接続。
  • クリック・入力・表示チェックを Playwright で実行。
  • 利点: 環境依存が少ない。macOS でも実行しやすい。CI も組みやすい。
  • 注意: Tauri のネイティブ API（@tauri-apps/api）はブラウザからは使えないため、Tauri 連携部分はモックするか、E2E（1）で補う必要があります。

このプロジェクトでやる場合

  • playwright を devDependency に追加。
  • テスト用に簡易 HTTP サーバで src/frontend または配布用資材を配信。
  • 検索ボックス・ボタン・一覧表示など、DOM とイベントだけに依存する部分を Playwright でテスト。
  • バックエンド（MCP API）は既存の test_mcp_client.mjs のように別テストでカバーし、UI テストではモック or スタブにするか、実際に MCP を立てて合わせて動かす構成も可能。

3. 現状との関係

種別 現状 UI 組み込みのイメージ
API テスト tests/test_mcp_client.mjs で MCP (3001) を叩いている そのまま利用。UI テストは「画面操作の結果、同じ API が呼ばれ結果が表示される」を検証するのに使える。
ヘッドレス起動 TELOS_HEADLESS=1 でウィンドウ非表示 WebDriver でテストする場合はウィンドウは表示される（または CI では仮想ディスプレイ）。ヘッドレスは主に API 専用テスト用。
CI test:headless / test-and-heal:pro で MCP テスト ここに「UI テスト」ステップを追加可能。1 の場合は Windows/Linux のみ・Driver 準備が必要。2 の場合は Playwright を入れてフロントのみの UI テストを追加する形。

まとめ

  • UI をテストに組み込むことは可能です。
  • アプリ全体をそのままテストしたい → WebDriver + tauri-driver（Windows/Linux。Driver の準備が必要）。
  • フロントの見た目・操作だけを手軽にテストしたい → Playwright 等でフロントのみ（Tauri API はモック or 別途 E2E）。
  • 既存の MCP テストはそのまま活かしつつ、上記のいずれか（または両方）を追加する形で UI をテストに組み込めます。

必要なら、選んだ方式（1 か 2）に合わせて、具体的な package.json のスクリプトとテストファイルのひな形を追加できます。