Chrome DevelopersツールまたはFirefoxのFirebugでXPath式を確認するにはどうすればよいですか？

179

XPathを確認するにはどうすればよいですか？

Chrome Developersツールを使用して要素を検査し、XPathを形成しています。ChromeプラグインのXPathチェッカーを使用して確認しましたが、常に結果が得られるとは限りません。XPathを検証するより良い方法は何ですか。

Firebugを使用してバグを検査し、FirePathを使用して確認することも試みました。ただし、FirepathはXPathも検証します。

私の最後のオプションは、Selenium WebDriverを使用してXPathを確認することです。

google-chrome  firefox  selenium  xpath  selenium-webdriver 
— ユーザー3448242
ソース

回答:

367

クロム

これは、3つの異なる方法で実現できます（詳細については、こちらのブログ記事を参照してください）。

  • Elements下のようなパネルで検索
  • ローレンスの回答に示されているように、実行$x()し$$()てConsoleパネルで
  • サードパーティの拡張機能（ほとんどの場合、実際には必要ではないため、やり過ぎになる可能性があります）

ElementsパネルでXPathを検索する方法は次のとおりです。

  1. 押しF12てChromeデベロッパーツールを開きます
  2. [要素]パネルでCtrl+ キーを押しますF
  3. 検索ボックスにXPathまたはCSSセレクターを入力します。要素が見つかると、黄色で強調表示されます。

ここに画像の説明を入力してください

Firefox（バージョン75以降）

FF 75以降、評価用のxpath式なしで生のxpathクエリを使用することが可能です。詳細については、ドキュメントを参照してください。

Firefox（以前のバージョン75）

  1. Firefoxメニュー（またはメニューバーを表示する場合、またはMac OS Xの場合は[ツール]メニュー）の[Web開発]サブメニューから[Webコンソール]を選択するか
    、Ctrl+ Shift+ K（OS XではCommand+ Option+ K）キーボードショートカットを押します。

  2. 下部のコマンドラインで、次を使用します。

    • $()：一致する最初の要素を返します。存在する場合、ページ内document.querySelector()の$関数と同等か、関数を呼び出します。

    • $$()：一致するDOMノードの配列を返します。これはfor document.querySelectorAll()に似ていますが、の代わりに配列を返しますNodeList。

    • $x()：XPath式を評価し、一致するノードの配列を返します。

Firefox（以前のバージョン49）

  1. Firebugをインストールする
  2. Firepathをインストールする
  3. 押すF12とFirebugが開きます
  4. FirePathパネルに切り替え
  5. ドロップダウンで、XPathまたはCSSを選択します
  6. 入力して検索

ここに画像の説明を入力してください

— イ・ゼン
ソース
2
XPathとブラウザーに関する警告が1つあります。これは多くの混乱を招くためです。stackoverflow.com
— questions / 18241029
@JensErat：本当に良い点です。このコメントを読んでいる他の人にとっては、その質問ですでに述べたように、Seleniumはブラウザーを駆動し、同じ基礎となるJavaScript評価テクノロジーを開発ツールで使用するため、影響を受けません。
— Yi Zeng 14年
1
@ user1177636：これらのGIFを生成するためにどのソフトウェアを使用しましたか？
— JacekM 2014年
XQueryのローカルパーサーも必要な場合は、BaseXを見つけました。basex.org
— tuxErrante
4
回答にはFirefoxのアップデートが必要です。残念ながらFirebugは廃止され、開発者ツールに統合されました。現在、コンソールでxpath式をテストできます。例$("//div")
— derloopkat
53

CTRL+IWindows（またはCMD+IMac）ではChromeで、そしてFirefoxではFirefoxでDevToolsを開き、タブをF12選択しConsoleます。次に、と入力してXPathを確認します$x("your_xpath_here")。
これは一致した値の配列を返します。空の場合、ページに一致するものがないことがわかります。

Firefox v66（2019年4月）：

Firefox v66コンソールxpath

Chrome v69（2019年4月）：

Chrome v69コンソールxpath

— ボスニャック
ソース
1
この方法は理想的ではありませんが、コンソールで記述したxpath式はSeleniumのJavascriptExecutorで実行できるため、知っておくとよいでしょう。おそらく、Firefoxのネイティブイベントが無効になっている場合に、これを回避策として使用できますか？
— djangofan 2014年
1
@djangofan、どういう意味ですか？そのロジックにより、これらの両方の答えは正しいですが、ロジックでは不要です。
— Arran
1
コンソールでこれをしようとしたとき@bosnjak $x("//input[@name='q']")IましたVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
— YasserKhalil
@YasserKhalilどのブラウザを使用していますか、どのバージョンですか？どのサイトでこれを行っていますか？
— bosnjak
16

ChromeまたはOperaを使用する

プラグインなし、単一のXPath構文文字なし

  1. 必要な要素を右クリックして、「検査」
  2. ハイライトされた要素タグを右クリックし、[コピー]> [Xpathのコピー]を選択します。

;）

ここに画像の説明を入力してください

— 工学 サマーT
ソース
2
Chromeの場合、これは私が今まで見た中で最高のソリューションです。共有いただきありがとうございます。Firefoxを使用したくないときに、Chromeでの確認を容易にします。
— 自動化
私はこれを大きな利益のために使用しました。しかし、大きな問題の1つは、コンテキストメニューが無効になったり上書きされたりすることです。次に、他のアプローチに依存する必要があります。
— ouflak 2017
1
これは実際には質問の答えにはなりません。既存のxpathを検証するのではなく、xpathを生成します。Chromeが生成するものは、はるかに優れたソリューションが存在する場合、醜く、非常に壊れやすいことがよくあります。
— メジャーメジャー
6

以下は、FirePathと比較して多くの高度な機能を備えたChromeのChroPath拡張機能です。以下の手順に従ってください。

  1. devtoolsパネルを開きます。
  2. Webページの任意の場所を右クリックします。
  3. 検査をクリックします。
  4. 「要素」タブの右側で、「ChroPath」タブをクリックします。

ここでXPath / CSSを取得し、編集して評価することもできます。

アドオンをダウンロード

— SanjayKumar I ChroPath Creator
ソース
1
ChroPath拡張機能は2020年でも機能します。ありがとうございます。大きな助け。
— バブル
1

xpathをチェックするもう1つのオプションは、selenium IDEを使用することです。

  1. Firefox Selenium IDEをインストールする
  2. FireFoxでアプリケーションを開き、IDEを開きます
  3. IDEで、新しい行にxpathをターゲットに貼り付け、[検索]をクリックします。対応する要素がアプリケーションで強調表示されます

セレンIDE

— AJC
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.