1. ホーム
  2. google-chrome

[解決済み】ChromeのデベロッパーズツールやFirefoxのFirebugでXPath式を検証する方法とは?

2022-04-08 10:41:30

質問

XPathを検証するにはどうしたらいいですか?

Chrome Developers ツールを使用して、要素を検査し、XPath を作成しています。ChromeプラグインのXPath Checkerを使って検証していますが、いつも結果が出るとは限りません。XPathを検証する良い方法は何でしょうか?

また、Firebugでバグを検査し、FirePathで検証することも試してみました。しかし、FirepathはXPathも検証してくれるのでしょうか。

最後の選択肢は、Selenium WebDriverを使用してXPathを確認することです。

どのように解決するのですか?

クローム

これは、3種類のアプローチで実現できます(私のブログ記事参照 こちら をご覧ください)。

  • で検索 Elements のようなパネルがあります。
  • 実行 $x()$$()Console パネルに表示されるように、ローレンスの 回答
  • サードパーティーの拡張機能(ほとんどの場合必要ない、やりすぎかもしれない)

でXPathを検索する方法は次のとおりです。 Elements パネルに表示されます。

  1. プレス F12 をクリックすると、Chromeデベロッパーツールが表示されます。
  2. 要素]パネルで Ctrl + F
  3. 検索ボックスにXPathまたはCSSセレクタを入力し、要素が見つかった場合、黄色でハイライト表示されます。

Firefox (バージョン75以降)

FF 75 以降、xpath 式を評価しない生の xpath クエリを使用することが可能です。 ドキュメント をご覧ください。

Firefox (バージョン75以前)

  1. のWeb Developerサブメニューからquot;Web Console"を選択するか、または、quot;Web Console"を選択します。 Firefox メニュー (メニューバーを表示している場合、または Mac OS X を使用している場合は [ツール] メニュー)

    を押すか Ctrl + シフト + K ( コマンド + オプション + K OS Xの場合)キーボードショートカット。
  2. 下部のコマンドラインでは、以下を使用します。

    • $() : マッチした最初の要素を返します。に相当する。 document.querySelector() を呼び出すか、あるいは $ 関数が存在する場合は、そのページで使用します。

    • $$() : 一致する DOM ノードの配列を返します。これは document.querySelectorAll() の代わりに配列を返します。 NodeList .

    • $x() : XPath 式を評価し、マッチするノードの配列を返します。


Firefox (バージョン49以前)

  1. インストール ファイアバグ
  2. インストール ファイアパス
  3. プレス F12 をクリックするとFirebugが起動します。
  4. に切り替えます。 FirePath パネル
  5. ドロップダウンで、XPathor CSS を選択します。
  6. を入力し、検索します。