# 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](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/)（Edge のバージョンと一致させる）。`msedgedriver` を PATH に通すか、`tauri-driver --native-driver <path>` で指定。 |
| **Linux** | `WebKitWebDriver`（例: Debian 系なら `webkit2gtk-driver`）。CI では `xvfb` で仮想ディスプレイが必要な場合あり。 |

```bash
cargo install tauri-driver --locked
```

### 実行イメージ

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

公式例: [WebDriver Example](https://github.com/tauri-apps/webdriver-example)、[Tauri - WebDriver](https://v2.tauri.app/develop/tests/webdriver/)、[CI の例](https://v2.tauri.app/develop/tests/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` のスクリプトとテストファイルのひな形を追加できます。
