Xpather

XPath式の検索、生成、テスト。スマートバリアント、要素ピッカー、テレメトリなし。

利用可能: Chrome ウェブストア Firefox アドオン Edge アドオン
プロジェクトサイト →

Xpatherはページ上の任意の要素に対して複数のXPathバリアントを生成し、リアルタイムで式をテストできます — 作業中も開いたままのサイドパネルで。

ユースケース

  • Webスクレイパーを書く際に信頼性の高いセレクターが必要
  • ページ構造とDOM階層のデバッグ
  • XPathロケーターによるテスト自動化の構築（Selenium、Playwright、Puppeteer）
  • 実際のページでXPath構文を学習
  • 任意の要素への最短ユニークパスを素早く検索・コピー

仕組み

  1. ツールバーアイコンからXpatherを開くか、Ctrl+Shift+X（Macの場合Cmd+Shift+X）を押します。
  2. 「要素を選択」をクリックするか、Altキーを押しながらページ上をホバー — カーソル下の要素がリアルタイムでハイライトされます。
  3. Alt+クリックで選択。Xpatherがその要素に対して最大7つのXPathバリアントを即座に生成。
  4. 必要なものをワンクリックでコピー、またはテスト用に手動編集。

XPath戦略

  • ID — 要素のid属性を使用した直接的でユニークなセレクター
  • data-* — data属性をターゲット（data-testid、data-qaなど）
  • 属性 — 任意の識別属性からセレクターを構築
  • テキスト — 可視テキスト内容で要素をマッチ
  • クラス — CSS クラス名を使用して要素を特定
  • 最短パス — ルートからの最も簡潔なユニークXPath
  • 絶対パス — htmlからターゲット要素への完全パス

各バリアントはユニークマッチを生成する場合に「ベスト」バッジを表示。

機能

  • 要素ピッカー: Alt+ホバーでハイライト、Alt+クリックで選択、Escでキャンセル
  • ライブ評価: XPathを入力または貼り付け、ページ上でハイライトされたマッチを確認
  • マッチカウンター: 式にマッチするノード数を表示
  • DOMプレビュー: マッチしたノードのタグ、属性、テキストを確認
  • ワンクリックでクリップボードにコピー
  • サイドパネルモード: ハンズフリーワークフローのためにXpatherをブラウザサイドパネルに固定
  • キーボードショートカット: Ctrl+Shift+Xでピッカーをトグル
  • ダーク・ライトテーマ
  • 英語・ロシア語ローカライゼーション

プライバシー

  • ネットワークリクエストゼロ — 完全オフライン動作
  • テレメトリ、アナリティクス、トラッキングなし
  • アカウント不要、サインイン不要
  • すべてのデータはブラウザ内に保持
  • オープンソース: https://github.com/investblog/xpather

権限

  • activeTab — ピッカー起動時に現在のタブのDOMにアクセス
  • scripting — 要素ピッカースクリプトをページに注入
  • webNavigation — ピッカー状態をリセットするためにページナビゲーションを検出
  • sidePanel — ブラウザサイドパネルにXPath結果を表示