先に結論
この3つは同じカテゴリに見えても、主戦場がかなり違います。
- Domscribe: source location と DOM / props / state をつなぐ
- Glance: 実ブラウザを agent に渡して操作・screenshot・assertion を回す
- Expect: 変更差分を読んで test plan を作り、real browser で検証する
なので選び方はこうです。
- 「このボタン、どのファイルの何行を直せばいいのか」を agent に返したい → Domscribe
- agent に実ブラウザを持たせて UI を見せたい → Glance
- 変更のたびに回帰確認を自動で回したい → Expect
重要なのは、これを coding agent 本体比較と混ぜないこと です。主語はあくまで AI coding agent のフロントエンド検証補助 です。
なぜ今この比較が重要か
2026年の AI コーディングは「どの agent がコードを書くか」だけでは差がつきにくくなってきました。次に効いてくるのは、agent が書いた後に UI をどう確認させるか です。
実務で痛いのは、だいたい次の3つです。
- agent が UI 要素を取り違えて違う場所を直す
- コードは合っていても、見た目や導線が壊れている
- 変更差分に対する回帰確認が漏れる
Domscribe / Glance / Expect は、この3つにそれぞれ別方向から刺さっています。
- Domscribe 公式は build-time stable IDs、DOM→source manifest、live DOM・props・state 取得 を前面に出しています
- Glance は 30 MCP tools、inline screenshots、assertions、scenario runner を前面に出しています
- Expect は git diff を読み test plan を生成し、real browser で走らせる ことを前面に出しています
つまり今の比較軸は「どの agent が一番賢いか」ではなく、agent に何を観測させるか です。
比較表
| 比較軸 | Domscribe | Glance | Expect |
|---|---|---|---|
| 主戦場 | UI要素の特定、source↔DOM 橋渡し | 実ブラウザ操作、screenshot、assertion | diff-aware な回帰確認、自動テスト運用 |
| 何を返すか | source location、live DOM、props、state | screenshot、a11y snapshot、console / network、assertions | test plan、実行結果、replay、pass/fail |
| 導入形態 | build-time instrumentation + MCP | MCP server + Playwright browser | CLI / agent 経由で diff 読み取り + browser 実行 |
| 向く課題 | 「どの要素を直すか」が曖昧 | 「実際の画面でどう見えるか」が分からない | 「何を検証すべきか」「回帰確認が漏れる」が重い |
| agent との距離 | agent に source と runtime context を渡す補助層 | agent にブラウザそのものを渡す補助層 | agent に検証計画とブラウザ実行を渡す補助層 |
| 対応の広さ | MCP 互換 agent 全般を想定 | Claude Code 向けが中心 | Claude / Codex / Copilot / Gemini など複数 agent 対応を明示 |
| 強み | UI要素特定の精度が高い | 画面確認とE2Eの直感性が高い | 変更差分起点のテスト自動化に強い |
| 弱み | 実ブラウザの広い回遊確認は主戦場ではない | source mapping そのものは強くない | 要素特定やピンポイント修正支援は主戦場ではない |
3つの違いをひとことで言うと
Domscribe は「どこを直すか」を返す
Domscribe の本質は、agent が見ている UI と、実際に編集すべき source location をズレなくつなぐこと です。
公式説明では、Domscribe は build-time で stable ID を埋め込み、manifest を作り、agent が source location を指定すると live DOM / props / state を返せる構成を打ち出しています。さらに UI 側から要素をクリックして、変更意図を source location に落とし込むフローも用意されています。
つまり Domscribe は「ブラウザを丸ごと agent に触らせる」より、agent が間違ったファイルを触らないようにする補助レイヤー と見るのが正確です。
向いているのはこんなケースです。
- React / Vue / Next.js / Nuxt で、UI要素と source の対応づけがズレやすい
- agent が CSS や component を取り違えやすい
- 人間が「このボタンのこと」と指差した内容を、そのまま agent に渡したい
Glance は「今どう見えているか」を返す
Glance の本質は、Claude Code に実ブラウザを渡して、画面を見ながら操作・確認・assertion まで回させること です。
公式 README では、browser_navigate、browser_click、browser_screenshot、test_assert、test_scenario_run などの 30 MCP tools が整理されていて、inline screenshot、a11y snapshot、console / network 監視、visual regression まで含めて説明されています。
要するに Glance は、agent にブラウザを持たせることで『たぶんこう表示されているはず』をやめるツール です。
向いているのはこういう場面です。
- ログイン、フォーム送信、主要導線のようなマルチステップ UI を確認したい
- screenshot を見ながら agent に自己修正させたい
- console error や network failure も一緒に拾いたい
Domscribe が source mapping 寄りなのに対して、Glance は 実ブラウザ確認寄り です。
Expect は「今回の変更で何を試すべきか」を返す
Expect の本質は、変更差分を読んで test plan を作り、そのまま real browser で実行すること です。
公式 README では、unstaged changes や branch diff をスキャンし、AI agent が step-by-step の test plan を生成して、実ブラウザで走らせる流れが明記されています。さらに複数 agent provider 対応、browser replay、real cookies の活用も訴求されています。
ここで重要なのは、Expect が単なる browser automation ではなく、変更差分から『何を検証すべきか』まで引き受ける 点です。
向いているのは次のケースです。
- 毎回どこを手で確認するか考えるのが重い
- UI変更のたびに回帰確認が漏れる
- PR / branch 単位で、変更に即した検証を流したい
Glance が「ブラウザをどう触るか」に強いなら、Expect は 今回の変更に対して何を触るべきか に強いです。
どの課題ならどれを先に入れるべきか
1. UI要素の特定ミスが痛いなら Domscribe
こんな状態なら Domscribe が先です。
- agent が似た component や class を触りがち
- 人間の指示は正しいのに、編集対象がズレる
- フロントエンドの規模が大きく、source 探索コストが高い
このケースでは、Glance や Expect を入れても「何を触るべきか」のズレは残ります。まず必要なのは source mapping の精度 です。
2. 画面確認と操作確認が痛いなら Glance
次の状態なら Glance が先です。
- UI崩れや導線破綻を agent に自分で見つけさせたい
- screenshot と assertion で明確に pass / fail を取りたい
- login / signup / checkout のような一連の流れを見たい
この場合、Domscribe だけでは「どこを直すか」は分かっても、「ちゃんと画面で動いたか」は十分に見えません。必要なのは 実ブラウザの観測 です。
3. 回帰確認の運用が重いなら Expect
次の状態なら Expect が先です。
- 毎回の変更で確認項目を考えるのが重い
- diff に対してどこを触るべきかの抜け漏れがある
- QAや開発者が branch ごとの確認を素早く回したい
このケースでは、ブラウザを直接いじる手段より、変更差分起点で検証を自動化する運用レイヤー の方が効きます。
実務では競合より分業で考えた方がいい
この3つは、1本で全部を解決する道具ではありません。むしろ分業で見ると整理しやすいです。
- Domscribe: どの要素・どの source を触るか
- Glance: 実際の画面がどう見え、どう動くか
- Expect: 今回の変更で何を検証すべきか
なので併用の順番はこう考えると自然です。
- Domscribe で UI要素の特定精度を上げる
- Glance で画面確認と主要導線確認を回す
- Expect で branch / diff ごとの回帰確認を継続運用に載せる
逆に失敗しやすいのは、1つで全部やろうとすることです。
- Domscribe だけでは広いE2E確認は埋まりません
- Glance だけでは source mapping は強くなりません
- Expect だけでは細かい要素特定やインタラクティブ修正は主戦場外です
Claude Code / Codex / Copilot 周辺導線としてどう効くか
この比較が強いのは、既存の AI coding agent 本体比較の次の一手として自然につながることです。
たとえば次の読者は、そのまま回遊しやすいです。
- 「まず本体を知りたい」人 → Claude Code auto-fix vs GitHub Copilot coding agent vs Codex
- 「ブラウザ操作エージェント全般も比較したい」人 → browser AI agent 比較｜Notte vs GPT-5.4 vs Claude Sonnet 4.6
- 「品質担保レイヤー全体も見たい」人 → Claude Code Review vs Codex Security vs TestSprite
つまりこの記事は、単体で終わる比較ではなく、AI coding 本体比較 → 補助ツール比較 → 品質担保比較 の回遊ハブとして機能します。
1つだけ先に入れるならどう決めるか
最短の判断基準は、「直近1か月で一番多かった失敗」をそのまま見ることです。
Domscribe を先に入れるべきチーム
- 触るファイルや要素の取り違えが多い
- component 構造が複雑で agent が迷いやすい
- UI修正の指示を source へ落とし込みたい
Glance を先に入れるべきチーム
- 画面崩れや導線破綻が痛い
- screenshot ベースで agent に自己確認させたい
- ログインやフォームなどの主要フロー確認が多い
Expect を先に入れるべきチーム
- 変更差分ごとの回帰確認が漏れる
- 毎回の確認観点を考えるのが重い
- branch 単位で pass / fail を早く返したい
まとめ
結論はシンプルです。
- Domscribe は source↔DOM の橋渡し
- Glance は agent に実ブラウザを与える
- Expect は diff から検証計画を作って走らせる
だから比較軸は「どれが最強か」ではありません。
AI coding agent に、何を見せたいか です。
- 編集対象の正確さが欲しい → Domscribe
- 画面確認とE2E確認が欲しい → Glance
- 変更差分起点の回帰運用を作りたい → Expect
この順で考えると、導入判断を間違えにくくなります。