unity-ui

Name: unity-ui
Author: bigdra50

39stars4forks

How to install unity-ui?

bigdra50/unity-cli/unity-ui

$npx -y skills add bigdra50/unity-cli --skill unity-ui

Installs into the current project.

Summary

UI 開発・検査・自動テストワークフロー。uitree で構造把握→pytest E2E テスト生成→PlayMode テストに移植。 Use for: "UI確認", "UI Toolkit", "uGUI", "E2Eテスト", "UI操作", "uitree", "スクリーンショット

Files · 1

View on GitHub

SKILL.md

1	# unity-ui
2
3	> PREREQUISITE: `../unity-shared/SKILL.md`（Relay Server 経由で Unity Editor が起動/アクティブであること）
4	>
5	> skill 経由のコマンドは必ず `-i <instance>` を付ける (unity-shared #インスタンス指定)。
6	>
7	> uitree コマンドは Play Mode 中のみ動作する。必ず `u -i <instance> play` してから実行すること。
8
9	## UI テストの種別
10
11	\| 種別 \| 検証内容 \| 手法 \| スクショ \|
12	\|------\|---------\|------\|---------\|
13	\| Functional \| 操作→状態が正しいか \| click → text で値検証 \| 不要 \|
14	\| Visual Regression \| 外観が変わっていないか \| screenshot → 画像比較 \| 必要 \|
15	\| Structural Snapshot \| ツリー構造が変わっていないか \| dump --json → diff \| 不要 \|
16	\| Smoke \| 最低限動くか \| click → console にエラーなし \| 任意 \|
17	\| Monkey \| ランダム操作でクラッシュしないか \| monkey → errors 確認 \| 不要 \|
18
19	## UI システム判定
20
21	\| 手がかり \| UI Toolkit \| uGUI \|
22	\|---------\|-----------\|------\|
23	\| ファイル \| `.uxml`, `.uss` \| `.prefab` に Canvas \|
24	\| コンポーネント \| UIDocument \| Canvas, RectTransform \|
25
26	## コマンドリファレンス
27
28	要素の指定方法は2通り: ref ID (`ref_3`) または `-p <panel> -n <name>`。
29
30	### 構造把握
31
32	```bash
33	u -i <instance> uitree dump # 全パネル一覧 (contextType: Player がゲーム側)
34	u -i <instance> uitree dump -p "PanelSettings" # パネルのツリー (各要素の ref/name/type/classes が見える)
35	u -i <instance> uitree dump -p "PanelSettings" --json # JSON 出力 (snapshot用)
36	u -i <instance> uitree query -p "PanelSettings" -t Button # type で検索 (VisualElement ベースのボタンはヒットしない → -c で検索)
37	u -i <instance> uitree query -p "PanelSettings" -n "BtnStart" # name で検索
38	u -i <instance> uitree query -p "PanelSettings" -c "action-btn" # USS class で検索
39	u -i <instance> uitree query -p "PanelSettings" -t Button -c "primary" # AND 条件
40	u -i <instance> uitree inspect -p "PanelSettings" -n "BtnStart" # 要素詳細
41	u -i <instance> uitree inspect ref_5_48 # ref ID で指定
42	u -i <instance> uitree inspect ref_5_48 --style # resolvedStyle 含む
43	u -i <instance> uitree inspect ref_5_48 --children # 子要素情報含む
44	```
45
46	### テキスト取得
47
48	```bash
49	u -i <instance> uitree text -p "PanelSettings" -n "ToastMessage" # name で指定
50	u -i <instance> uitree text ref_5_12 # ref ID で指定
51	```
52
53	### 操作
54
55	```bash
56	u -i <instance> uitree click -p "PanelSettings" -n "BtnContinue" # name で指定
57	u -i <instance> uitree click ref_5_48 # ref ID で指定
58	u -i <instance> uitree click ref_5_48 --count 2 # ダブルクリック
59	u -i <instance> uitree click ref_5_48 --button 1 # 右クリック
60	u -i <instance> uitree scroll -p "PanelSettings" -n "ScrollArea" --y 100
61	```
62
63	### モンキーテスト
64
65	```bash
66	u -i <instance> uitree monkey -p "PanelSettings" -c "action-btn" --count 50 --seed 42
67	u -i <instance> uitree monkey -p "PanelSettings" --duration 30 --seed 42
68	u -i <instance> uitree monkey -p "PanelSettings" -c "action-btn" --stop-on-error --json
69	```
70
71	query でフィルタした要素をランダムに click し、コンソールエラーを監視する。
72	`-c` (USS class) か `-t` (type) のフィルタが必須（フィルタなしでは要素が見つからない）。
73	事前に `u -i <instance> uitree query -p <panel> -c <class>` で有効な class 名を確認してから monkey に渡す。
74	`--seed` で操作順を再現可能。
75
76	### スナップショット
77
78	```bash
79	u -i <instance> uitree snapshot save -p "PanelSettings" --name baseline # 現在のツリーを保存
80	u -i <instance> uitree snapshot diff -p "PanelSettings" --name baseline # baseline との差分
81	u -i <instance> uitree snapshot list # 保存済み一覧
82	u -i <instance> uitree snapshot delete --name baseline # 削除
83	```
84
85	diff 出力: 要素の追加(`+`)/削除(`-`)/classes 変化(`~`) を検出。
86
87	### スクリーンショット
88
89	```bash
90	u -i <instance> screenshot # GameView (-s game がデフォルト)
91	u -i <instance> screenshot -p "ui-check.png" # 保存先指定
92	u -i <instance> screenshot --burst -n 5 # 連続 (アニメーション確認)
93	```
94
95	UI Toolkit / uGUI (Screen Space) は `-s game` でのみ映る。`-s camera` では映らない。
96
97	GameView のキャプチャにはエディタのフォーカスが必要。タイムアウトする場合は再試行で解決することが多い。
98
99	### uGUI の場合
100
101	uitree は UI Toolkit 専用。uGUI は scene/component コマンドで操作する。
102
103	```bash
104	u -i <instance> scene hierarchy --depth 3
105	u -i <instance> component list -t "Canvas"
106	u -i <instance> component inspect -t "MyButton" -T "UnityEngine.UI.Button"
107	```
108
109	## 開発→テストフロー
110
111	```text
112	Phase 1: 作成 & 手動確認
113	コード変更 → /unity-verify → play → dump → 操作 → screenshot → stop
114
115	Phase 2: pytest E2E テスト生成
116	dump で構造把握 → pytest テストファイルを生成 → 実行して確認
117
118	Phase 3: PlayMode テスト移植
119	安定したシナリオを C# に書き直す → CI で回帰テスト
120	```
121
122	### Phase 1: 作成 & 手動確認
123
124	```bash
125	u -i <instance> play
126	u -i <instance> uitree dump -p "PanelSettings" # 構造把握
127	u -i <instance> uitree click -p "PanelSettings" -n "BtnStart" # 操作
128	u -i <instance> uitree text -p "PanelSettings" -n "StatusLabel" # 状態確認
129	u -i <instance> screenshot # 結果キャプチャ
130	u -i <instance> stop
131	```
132
133	### Phase 2: pytest E2E テスト生成
134
135	Phase 1 で確認した操作シ

People who liked this also viewed

6 picks

Type

unity-ui

39stars4forks

View on GitHub

How to install unity-ui?

bigdra50/unity-cli/unity-ui

$npx -y skills add bigdra50/unity-cli --skill unity-ui

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# unity-ui
2
3	> PREREQUISITE: `../unity-shared/SKILL.md`（Relay Server 経由で Unity Editor が起動/アクティブであること）
4	>
5	> skill 経由のコマンドは必ず `-i <instance>` を付ける (unity-shared #インスタンス指定)。
6	>
7	> uitree コマンドは Play Mode 中のみ動作する。必ず `u -i <instance> play` してから実行すること。
8
9	## UI テストの種別
10
11	\| 種別 \| 検証内容 \| 手法 \| スクショ \|
12	\|------\|---------\|------\|---------\|
13	\| Functional \| 操作→状態が正しいか \| click → text で値検証 \| 不要 \|
14	\| Visual Regression \| 外観が変わっていないか \| screenshot → 画像比較 \| 必要 \|
15	\| Structural Snapshot \| ツリー構造が変わっていないか \| dump --json → diff \| 不要 \|
16	\| Smoke \| 最低限動くか \| click → console にエラーなし \| 任意 \|
17	\| Monkey \| ランダム操作でクラッシュしないか \| monkey → errors 確認 \| 不要 \|
18
19	## UI システム判定
20
21	\| 手がかり \| UI Toolkit \| uGUI \|
22	\|---------\|-----------\|------\|
23	\| ファイル \| `.uxml`, `.uss` \| `.prefab` に Canvas \|
24	\| コンポーネント \| UIDocument \| Canvas, RectTransform \|
25
26	## コマンドリファレンス
27
28	要素の指定方法は2通り: ref ID (`ref_3`) または `-p <panel> -n <name>`。
29
30	### 構造把握
31
32	```bash
33	u -i <instance> uitree dump # 全パネル一覧 (contextType: Player がゲーム側)
34	u -i <instance> uitree dump -p "PanelSettings" # パネルのツリー (各要素の ref/name/type/classes が見える)
35	u -i <instance> uitree dump -p "PanelSettings" --json # JSON 出力 (snapshot用)
36	u -i <instance> uitree query -p "PanelSettings" -t Button # type で検索 (VisualElement ベースのボタンはヒットしない → -c で検索)
37	u -i <instance> uitree query -p "PanelSettings" -n "BtnStart" # name で検索
38	u -i <instance> uitree query -p "PanelSettings" -c "action-btn" # USS class で検索
39	u -i <instance> uitree query -p "PanelSettings" -t Button -c "primary" # AND 条件
40	u -i <instance> uitree inspect -p "PanelSettings" -n "BtnStart" # 要素詳細
41	u -i <instance> uitree inspect ref_5_48 # ref ID で指定
42	u -i <instance> uitree inspect ref_5_48 --style # resolvedStyle 含む
43	u -i <instance> uitree inspect ref_5_48 --children # 子要素情報含む
44	```
45
46	### テキスト取得
47
48	```bash
49	u -i <instance> uitree text -p "PanelSettings" -n "ToastMessage" # name で指定
50	u -i <instance> uitree text ref_5_12 # ref ID で指定
51	```
52
53	### 操作
54
55	```bash
56	u -i <instance> uitree click -p "PanelSettings" -n "BtnContinue" # name で指定
57	u -i <instance> uitree click ref_5_48 # ref ID で指定
58	u -i <instance> uitree click ref_5_48 --count 2 # ダブルクリック
59	u -i <instance> uitree click ref_5_48 --button 1 # 右クリック
60	u -i <instance> uitree scroll -p "PanelSettings" -n "ScrollArea" --y 100
61	```
62
63	### モンキーテスト
64
65	```bash
66	u -i <instance> uitree monkey -p "PanelSettings" -c "action-btn" --count 50 --seed 42
67	u -i <instance> uitree monkey -p "PanelSettings" --duration 30 --seed 42
68	u -i <instance> uitree monkey -p "PanelSettings" -c "action-btn" --stop-on-error --json
69	```
70
71	query でフィルタした要素をランダムに click し、コンソールエラーを監視する。
72	`-c` (USS class) か `-t` (type) のフィルタが必須（フィルタなしでは要素が見つからない）。
73	事前に `u -i <instance> uitree query -p <panel> -c <class>` で有効な class 名を確認してから monkey に渡す。
74	`--seed` で操作順を再現可能。
75
76	### スナップショット
77
78	```bash
79	u -i <instance> uitree snapshot save -p "PanelSettings" --name baseline # 現在のツリーを保存
80	u -i <instance> uitree snapshot diff -p "PanelSettings" --name baseline # baseline との差分
81	u -i <instance> uitree snapshot list # 保存済み一覧
82	u -i <instance> uitree snapshot delete --name baseline # 削除
83	```
84
85	diff 出力: 要素の追加(`+`)/削除(`-`)/classes 変化(`~`) を検出。
86
87	### スクリーンショット
88
89	```bash
90	u -i <instance> screenshot # GameView (-s game がデフォルト)
91	u -i <instance> screenshot -p "ui-check.png" # 保存先指定
92	u -i <instance> screenshot --burst -n 5 # 連続 (アニメーション確認)
93	```
94
95	UI Toolkit / uGUI (Screen Space) は `-s game` でのみ映る。`-s camera` では映らない。
96
97	GameView のキャプチャにはエディタのフォーカスが必要。タイムアウトする場合は再試行で解決することが多い。
98
99	### uGUI の場合
100
101	uitree は UI Toolkit 専用。uGUI は scene/component コマンドで操作する。
102
103	```bash
104	u -i <instance> scene hierarchy --depth 3
105	u -i <instance> component list -t "Canvas"
106	u -i <instance> component inspect -t "MyButton" -T "UnityEngine.UI.Button"
107	```
108
109	## 開発→テストフロー
110
111	```text
112	Phase 1: 作成 & 手動確認
113	コード変更 → /unity-verify → play → dump → 操作 → screenshot → stop
114
115	Phase 2: pytest E2E テスト生成
116	dump で構造把握 → pytest テストファイルを生成 → 実行して確認
117
118	Phase 3: PlayMode テスト移植
119	安定したシナリオを C# に書き直す → CI で回帰テスト
120	```
121
122	### Phase 1: 作成 & 手動確認
123
124	```bash
125	u -i <instance> play
126	u -i <instance> uitree dump -p "PanelSettings" # 構造把握
127	u -i <instance> uitree click -p "PanelSettings" -n "BtnStart" # 操作
128	u -i <instance> uitree text -p "PanelSettings" -n "StatusLabel" # 状態確認
129	u -i <instance> screenshot # 結果キャプチャ
130	u -i <instance> stop
131	```
132
133	### Phase 2: pytest E2E テスト生成
134
135	Phase 1 で確認した操作シ

People who liked this also viewed

6 picks

Type