このツールについて
良いロケーターは要素にちょうど 1 つだけ一致し、次の UI 変更の後も一致し続けます。このテスターを使えば、Selenium、Playwright、Cypress のテストに組み込む前に、実際のページソースに対してロケーターを確認できます。HTML（DevTools の「Copy outerHTML」（outerHTML をコピー）で取得）を貼り付け、XPath 式か CSS セレクターを入力すると、一致した要素の数、それぞれのマークアップ、レンダリングされたプレビュー上の位置が表示されます。プレビューはスクリプトを無効にしたサンドボックスのフレームです。チートシートには、よく使う XPath の軸と関数を、対応する CSS がある場合はそれと並べて掲載しています。
使い方
- HTML を貼り付けるか、「Load sample」（サンプルを読み込む）でログインフォームと注文テーブルを読み込みます。
- ロケーターを入力します。/ または ( で始まる式は XPath、それ以外は CSS として扱われます。切り替えスイッチで強制することもできます。
- 一致件数を確認します。クリックやアサーションの対象なら、一致は 1 件が理想です。
- チートシートのセレクターをクリックすると、サンプルに対して実行されます。
XPath・CSS セレクターテスター のよくある質問
XPath と CSS セレクターのどちらを使うべきですか？
速度と読みやすさの点で、CSS やフレームワークのロケーター（Playwright の getByRole や getByTestId など）を優先してください。normalize-space() によるテキストでのマッチング、祖先要素へのさかのぼり、following-sibling:: によるラベル基準のセル選択など、CSS で表現できないことが必要な場合に XPath を使います。
ブラウザのコンソールでは動く XPath がここで動かないのはなぜですか？
ブラウザは XPath 1.0 のみに対応しており、このツールも同じです。貼り付けた HTML がブラウザで実際にレンダリングされたものか確認してください。JavaScript で追加されたコンテンツや、iframe・Shadow DOM の中身はページソースに含まれません。ライブの DOM を取得するには DevTools から outerHTML をコピーしてください。
contains(@class, "btn") が余計な要素にまで一致するのはなぜですか？
contains() は部分文字列に一致するため、"btn-primary" や "submit-btn" にも一致します。クラス名全体に一致させるには、XPath では contains(concat(' ', normalize-space(@class), ' '), ' btn ') を、CSS では単に .btn を使います。