sniff

English · 简体中文 · 日本語 · Español · Français

実行中のアプリを指定するだけです。実際のブラウザーで実際のユーザーフローをたどり、何が本当に壊れているのかを証拠とともに報告します。

できること · インストール · 使い方 · 得られるもの · エディターでの動作 · 知っておくとよいこと

claude plugin marketplace add Aboudjem/10x
claude plugin install sniff@10x

できること

多くのリンターはアプリを一度も実行せずにソースを読み取り、エンドツーエンドのフレームワークではテストを自分で作成して保守する必要があります。sniff は実行中のアプリを実際のブラウザーで開き、ユーザーと同じようにクリックや入力を行い、実際に起きたことを判定します。

• 12 種類のバグを検出します。 HTTP 500 が返るルートやリンク切れから、プレースホルダーデータ、動作しない送信ボタン、戻るボタンによるフォーム入力の消失、止まったままのスピナー、モバイル画面でのはみ出しまで検出します。
• すべてを証明します。 各検出結果には、その結果が得られたルートと順序どおりの手順に加えて、スクリーンショット、およびチェックで取得したコンソールやネットワークの抜粋が含まれます。手順がなければ、検出結果もありません。
• 性能を測定済みです。 12 種類すべてにわたる21個のバグを仕込んだテスト用アプリと、問題のない対照ページを使ったテストでは、sniff は21個すべてを検出し、対照ページでは何も報告しません。

インストール

上のブロックは、10x マーケットプレイスを利用する Claude Code 向けの方法です。それ以外のエージェントでは、Vercel skills CLI を使うと、同じ3つのスキルをインストールできます。

npx skills add Aboudjem/sniff

エディターを使わず、通常のコマンドラインツールとして使う場合：

npx sniff-qa --url http://localhost:3000

npm パッケージ名は sniff-qa、インストールされるバイナリ名は sniff です。無関係なパッケージなので、npx sniff は実行しないでください。

1. アプリを起動します。 プロジェクトで既に使っている開発サーバーを使ってください。

npm run dev

2. 別のターミナルから巡回します。 sniff は一般的なポートで開発サーバーを自動検出するため、--url は省略できますが、指定すれば推測する必要がなくなります。

npx sniff-qa --url http://localhost:3000

3. 検出結果を確認します。 重大度別にまとめて表示されます。以下は、このリポジトリに仕込まれたバグを含むフィクスチャに対して、npx sniff-qa --url http://localhost:4321 --ci --max-pages 12 を実行した際の実際の結果を抜粋したものです。

sniff v0.8.0  walking http://localhost:4321

  26 findings (+1 low-confidence hidden; use --all)

  CRITICAL (1)
    • [confirmed] Page returns HTTP 500
      /crash  (route/broken-page)
        - Navigate to /crash
        - Server responded with HTTP 500
      fix: The route throws server-side. Check the server logs/handler for this path and return a valid page or a proper error page.
      shot: sniff-reports/crawl/_crash-desktop.png

✓ Scan complete: 26 issue(s) found. Exit code 1 so CI fails on bugs; pass --fail-on none to always exit 0.

誰かに送れる単独で完結した HTML ページを作成するには、--report を追加してください。環境に問題があるように見える場合は、npx sniff-qa doctor を実行してください。

得られるもの

• ターミナルレポート： 重大度別にまとめられ、各検出結果に手順、修正方法、スクリーンショットのパスが記載されます。
• 共有可能なファイル： --report で単独で完結した HTML レポートを、--json で JSON を作成できます。
• 終了コード： 検出結果が --fail-on の重大度に達するとゼロ以外の終了コードが返されるため、実際のバグがある場合に CI が失敗します。
• 各検出結果の信頼度ラベル： uncertain は、--all を指定しない限りターミナルには表示されません。

0.8.0 の新機能：

• --caps scan,report を指定すると、MCP サーバーをソーススキャンと保存済み結果の読み取りに限定できます。ブラウザーの起動もダウンロードも行いません。
• --storage-state auth.json を指定すると、ログイン済みのアプリを巡回します。このファイルの Cookie とトークンの値は、書き出されるすべてのレポートのテキストから秘匿されますが、スクリーンショットのピクセルからは秘匿されません。
• sniff.config の assert ブロックで、重大度別に検出結果の上限（maxCritical、maxHigh、maxTotal）を設定できます。この上限はコマンドラインでの巡回、ソーススキャン、検出に適用されます。

エディターで使う

npx skills add を使うことで、Claude Code、Cursor、Codex、Copilot、Gemini CLI、その他 70 以上のエージェントで使えます。スキルは Markdown 形式なので、エディターが指定するどのモデルでも動作します。

claude mcp add sniff-qa npx -- -y sniff-qa --mcp
codex mcp add sniff-qa -- npx -y sniff-qa --mcp

知っておくとよいこと

重要

API キー、アカウント、登録は不要です。自分で設定しない限り、AI プロバイダーも必要ありません。巡回やスキャンによってソースコードが編集されることはありません。コードを書き換えるのは sniff fix だけで、実行した場合に限られます。

メモ

巡回ではボタンをクリックし、実際のフォームを送信するため、実データが作成されることがあります。本番環境ではなく、開発環境またはステージング環境のアプリを指定してください。最初の巡回では Chromium のビルドがダウンロードされ、キャッシュされるため、その実行にはインターネット接続が必要です。

• 起動中のアプリが必要です。 開発サーバーが起動していない場合は、ソースのみのスキャンに切り替わり、通常の巡回を開始する方法が表示されます。npx sniff-qa scan は、このスキャンを意図的に実行します。
• リンク切れのチェックでは外部リンクもたどります。 そのため、巡回中に各ページからリンクされているサードパーティーの URL にリクエストが送信されます。
• バグが見つかった場合、巡回は意図的に終了コード 1 で終了します。 これにより CI でビルドが失敗します。クラッシュではありません。--fail-on none で重大度の判定を無効にできますが、assert の予算を超えた場合は引き続き実行に失敗することがあります。

詳細はこちら

• docs/editors.md：サポートされているすべてのエージェント向けのインストール方法と MCP のスニペット
• docs/authenticated-walks.md：--storage-state を使ってログイン済みのアプリを巡回する方法
• docs/assert-budgets.md：sniff.config で重大度ごとの検出数に上限を設定する方法
• docs/comparison.md：sniff がリンター、リンクチェッカー、E2E フレームワークとどう異なるか
• docs/faq.md：このページで回答していない質問
• CHANGELOG.md · CONTRIBUTING.md · LICENSE

_{Adam Boudjemaa が開発 · Apache 2.0 · Playwright と axe-core を基盤にしています}