Applitools
Applitools · コーディング
Applitools Eyes は、あらゆるブラウザと端末でUIのリグレッションを見つけるAIビジュアルテスト基盤だ。画面をピクセル単位ではなく Visual AI で比較する。
Applitools について
About
Applitools Eyes とは
Applitools Eyes は、Web とモバイルアプリ向けのビジュアルテスト基盤である。既存のテストをそのまま走らせると、Eyes が各画面の実際の見た目を捉え、保存したベースラインと比べ、ずれが出た時点で知らせる。差分を示し、原因となった CSS ルールや DOM 要素まで指し示す。
埋めるのは、機能テストが見落とす穴だ。決済ボタンは機能こそ動いていても、タブレットのブレークポイントで画面の外にはみ出していることがある。オールグリーンのテストスイートはそれに気づかない。Applitools はまさにこの問題のために2015年に生まれ、今はAIコーディングツールがUIを人が目で追えない速さで生み出すチーム向けの、視覚の審判として売り込まれている。他のビジュアルリグレッションツールと同じカテゴリに属するが、それらがピクセルを比べるのに対し、こちらはAIを使う。
合うかどうかは2点で決まる。有料の、企業寄りのツールであること。エントリーのプランは年払いで月667ドルで、対象は継続的にソフトウェアを出すチームであり、週末の個人プロジェクトではない。そして、すでに使っている Playwright、Cypress、Selenium、Appium といったフレームワークに接続する形で、それらを置き換えるものではない。
始め方
- Applitools のアカウントを作り、ダッシュボードで API キーを取得する。
- 使っているフレームワークに合わせ、eyes-playwright、eyes-selenium、eyes-cypress などの SDK を入れる。
- テストにビジュアルのチェックポイントを1つ足す。多くの構成では、既存の検証の前後で Eyes を呼ぶ1〜2行で済む。
- テストを走らせ、最初のベースラインを確認する。Eyes はその時点の描画を以後の比較基準として保存する。
- 次回以降、Eyes は各画面をベースラインと比べ、差分をダッシュボードに出す。変更を受け入れるか、失敗した要素までさかのぼって追える。
AIツール情報
Applitoolsの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- Web とモバイルアプリのQAエンジニア：すでに回しているUIテストに、ビジュアルの検証を足せる。テストを作り直す必要はない。無料枠は試用なので、有料プランが要る。
- フロントエンド開発者：Eyes は差分を特定の CSS ルールや DOM ノードに結びつけるので、スクリーンショットを探し回らず原因を直せる。チームに CI の流れがすでにあるほど効果が出る。
- AIコーディングアシスタントを導入したチーム：Cursor、Copilot、Claude Code が書いたコードの視覚チェックとして働く。これらのツール自身には画面の正しさを確かめる手段がない。
タスク
- レスポンシブレイアウトの崩れを捕まえる：Eyes は同じ画面を複数の幅で一気に描画するので、タブレットで collapse する部品はマージ前に印がつく。
- 部品の状態を早い段階で比べる：Storybook とつなげば、ボタンやモーダル、ナビゲーションバーを、1枚のページに組み上がる前に単体で確認できる。
- アクセシビリティを見張る：色のコントラスト、文字サイズ、重なりを、ビジュアル実行のたびに WCAG 基準で照合する。別途の監査は要らない。
- リニューアル後にベースラインのノイズを片付ける：変更のグルーピングで、1つの差分を受け入れれば一致するテストをまとめて更新できる。ここがビジュアル回帰が放り出されがちな場所だ。
- 公開前にサイトを点検する：自動スキャナーがページをビジュアル走査し、テストケースを起草するので、手書きした画面より広い範囲から検証が始まる。
シーン
- AIエージェントをループに組み込んで素早く出す：Eyes は視覚の差分をエージェントに返し、同じセッション内で崩れたレイアウトを自力で直せる。
- ハードウェアを抱えずに多数のブラウザでテストを回す：クラウドのグリッドが、各チェックを100通り以上のブラウザと端末の組み合わせで描画する。
- QAチームをビジュアルテストに引き込む：フレームワーク連携と自然言語でのテスト作成で、ロケーターを手で書かない人にも敷居が低い。
主な機能
Visual AI による比較
ここがビジュアルテストツールの中核だ。ピクセルを比べる代わりに、Eyes は数十億枚のUI描画で学習したコンピュータビジョンを使い、人が見て本当の変化と捉える差を判定する。フォントのアンチエイリアスやずれた時計のような無害なノイズは無視し、効いてくる変化だけを浮かび上がらせる。これが、チームがビジュアルテストをやめてしまう原因になる誤検知を削る。Applitools は精度99.999％をうたうが、これはベンダーの数字であり、基準ではなく宣伝として受け取るのが妥当だ。
クロスブラウザ・クロスデバイスのグリッド
Ultrafast Grid は、1回の実行でページの DOM 状態を捉え、100通り以上のブラウザ、ビューポート、モバイル端末の組み合わせに同時に描き直す。自前でブラウザドライバーの農場を抱えなくて済む。これが広範なクロスブラウザテストを現実的にする。ブラウザごとにスイート全体を回すのではなく、1枚のスナップショットを検証すればよい。
テストフレームワークとのネイティブ連携
Eyes は Playwright、Cypress、Selenium、WebdriverIO、Appium、Storybook に入り、GitHub Actions、GitLab CI、CircleCI といった CI/CD ツールにもつながる。チェックの追加は、多くの場合すでにあるテストに1〜2行書くだけだ。30以上の SDK も提供するので、よく使う言語とスタックのほとんどを自前のラッパーなしで覆える。
原因分析とベースライン管理
差分が出たら、クリックして原因の CSS ルール、DOM 要素、レイアウトのプロパティを確認できる。ベースラインのグルーピングは、数百のビューポートにまたがる同一のUI変更をまとめ、1クリックでまとめて受け入れる。長く続くプロジェクトではこれが効く。ベースラインの手作業の管理こそ、ビジュアルテストが死ぬ場所だからだ。
アクセシビリティと機能の検証
ビジュアル実行のたびに、色のコントラスト、文字サイズ、レイアウトの重なりを WCAG 基準で照合するので、アクセシビリティの回帰は視覚の不具合と一緒に出る。上位プランでは、AI による機能テストと自然言語での作成が加わる。テストステップをコードではなく普通の言葉で書ける。
Applitools API とエージェント向け MCP サーバー
Applitools は API と MCP サーバーを公開しているので、AIコーディングエージェントは視覚の差分データを引き出し、自分のループ内で壊れたUIを直せる。開発者は Applitools API を通じて、視覚チェックを自社の製品やパイプラインに組み込める。この入口があることが、ダッシュボードだけを出すツールとの分かれ目だ。
メリットとデメリット
メリット
- Visual AI はピクセルツールが誤判定する描画ノイズを無視するので、誤った失敗を仕分ける時間が減る。
- クラウドのグリッドが100通り以上のブラウザと端末の組み合わせを覆い、こちらが基盤を管理しなくてよい。
- チームがすでに使うフレームワークと CI ツールに統合されるので、導入は数行であり、作り直しではない。
- DOM レベルの原因分析とベースラインのグルーピングが、ビジュアルスイートの保守時間を削る。
- API と MCP サーバーにより、AIコーディングエージェントが人を挟まずに視覚の差分でUIを直せる。
デメリット
- 年払いで月667ドルから。個人開発者や小さなプロジェクトには手が出ない。
- すでに自動テストがある前提のツールだ。つなぐスイートがなければ、Eyes が検証できるものは少ない。
- 私有クラウド、SSO、機能テストといった有用な機能は、個別見積もりの Professional と Enterprise プランにある。
- コンポーネントとページでチェックポイントの上限が別々なので、UI の作業量が多いと、ページだけのテストの見た目より早くプランを使い切ることがある。
よくある質問
Applitools Eyes は、Web とモバイルアプリの視覚とレイアウトの不具合を見つける。既存のテストに加えると、描画後の各画面を、複数のブラウザと端末で保存済みのベースラインと比べ、機能テストでは拾えないUIの回帰に印をつける。
関連コンテンツ
Applitoolsに関連するツール、スキル、記事を探す。
Applitoolsの代替ツール
Base Code
Base44 (Wix) · コーディング · 生産性向上Base CodeはBase44の共有クラウド開発環境だ。既存のGitHubリポジトリに対する変更をチャットで伝え、プレビューで確認し、プルリクエストとして返せる。
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
GitGlow
GitGlow · コーディング · 生産性向上GitGlow は自分のコードと AI エージェントの変更を一つのレビューにまとめるデスクトップ Git クライアントだ。出荷前に、マシンから何が出ていくのかを確かめられる。