DOM パスファインダーを使えば、ページ上の任意の要素にカーソルを合わせるだけで、一意な CSS セレクター、短いセレクター、XPath、およびそのまま貼り付け可能な querySelector スニペットを確認できます。クリックで要素を固定し、親／子／兄弟ボタンで要素を移動できます。Selenium、Puppeteer、Playwright、Cypress ユーザーに不可欠なツールです。
自動テストスクリプト、ウェブスクレイパー、またはブックマークレットを作成する際にはセレクターを記述する必要がありますが、特定の要素に対して安定した一意のセレクターを見つけるのは面倒な作業です。通常は DevTools を開き、検査し、右クリックしてセレクターをコピーし、その結果が本当に一意で安定していることを願うしかありません。DOM パスファインダーなら、ワンクリックでこれが完了します。ツールを起動してページ上の任意の要素にカーソルを合わせると、移動に合わせて要素が紫色にハイライトされます。クリックして固定すると、パネルに 4 つのセレクター形式が表示されます。パスベースの一意な CSS セレクター、短いセレクター（タグ + クラスまたは ID）、絶対 XPath、そしてスクリプトにそのまま貼り付けられる document.querySelector('...') スニペットです。また、固定後はフォーカスを失うことなく、親／最初の子／前の兄弟／次の兄弟ボタンを使って DOM ツリー内を自由に移動できます。data-testid 属性が検出された場合は優先的に表示されるため、それらをアンカーとして使用する Playwright や Cypress のユーザーに最適です。さらに、タグ、ID、クラス、境界サイズ、表示／配置プロパティも表示され、詳細なコンテキストを素早く把握できます。
ページ上でマウスを動かすと要素が紫色にハイライトされます。クリックで固定できるため、DevTools のインスペクターを開く必要はありません。
一意な CSS パス、短いセレクター、絶対 XPath、およびラップ済みの querySelector スニペット。お使いのツールに最適なものを選択できます。
固定後は、親／最初の子／前／次ボタンを使用して、要素を再選択することなく DOM 内を移動できます。
各セレクターに専用のコピーボタンがあります。スクリプトに必要な形式を取得し、テストやスクレイパーに直接貼り付けられます。
タグ、ID、クラス、サイズ、表示形式、配置を表示します。再検査することなく概要を素早く把握できます。
要素に ID がある場合は #id を使用した一意な CSS を生成します。data-testid がある場合は、Playwright/Cypress 用に優先的に表示します。
テスト対象の要素を選択してセレクターをコピーし、テストコードに貼り付けます。一意なパスを推測する手間はもうありません。
スクレイピング対象のリストアイテムなどの構造的なセレクターを見つけます。安定性のニーズに応じて、短いセレクターかパスベースのセレクターを選択します。
要素を固定してそのパスをコピーし、なぜ CSS が適用されないのかを調査します。一意なセレクターにより、要素の完全なツリー位置がわかります。
事前にラップされた document.querySelector(...) スニペットを DevTools のコンソールに直接貼り付け、素早く対話的なデバッグを行います。
アクセシビリティ監査を行う際、XPath を使って axe-core などの XPath 参照を期待するツールに要素を渡します。
DevSuite Pro のドックにあるパスファインダーアイコンをクリックします。ツールはすぐに選択モードで起動します。
マウスを動かすと、要素が紫色にハイライトされます。必要に応じてスクロールし、目的の要素を見つけます。
目的の要素をクリックします。選択が停止し、パネルにセレクター形式、コンテキスト、コピーボタンが表示されます。
親／子／兄弟ボタンを使って選択範囲を微調整するか、「要素を選択」をクリックして再度ホバー選択を開始します。
必要な形式（CSS、XPath、または querySelector）の横にある「コピー」をクリックします。テスト、スクレイパー、またはコンソールに直接貼り付けます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
