web-dev-qa-db-ja.com

Chrome DevelopersツールまたはFirefoxのFirebugでXPath式を確認する方法

XPathを確認する方法

Chrome Developersツールを使用して要素を調べ、XPathを形成しています。 ChromeプラグインXPath Checkerを使用して検証していますが、必ずしも結果が得られるとは限りません。私のXPathを検証するためのより良い方法は何ですか。

私はまた、Firebugを使ってバグを調べ、FirePathを使って検証してみました。しかし、FirepathはXPathも検証します。

私の最後の選択肢は、私のXPathを確認するためにSelenium WebDriverを使用することです。

google-chromefirefoxseleniumxpathselenium-webdriver
157
user3448242

クロム

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

  • 以下のようにElementsパネルで検索
  • Lawrenceの answer に示すように、Consoleパネルで$x()と$$()を実行します。
  • サードパーティ製の拡張機能（ほとんどの場合、本当に必要というわけではありませんが、やり過ぎになる可能性があります）

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

  1. 押す F12 Chromeデベロッパーツールを開く方法
  2. 「要素」パネルでを押します Ctrl+F
  3. 検索ボックスにXPathまたはCSS Selectorと入力します。要素が見つかった場合は、黄色で強調表示されます。

enter image description here

Firefox

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

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

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

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

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

Firefox（旧バージョン49）

  1. インストール Firebug
  2. インストール Firepath
  3. 押す F12 Firebugを開く
  4. FirePathパネルに切り替えます
  5. ドロップダウンで、XPathor CSSを選択します
  6. 入力して探す

enter image description here

326
Yi Zeng

ChromeとFirefoxでコンソールを開き（F12でDev Toolsを開き、次にConsoleタブを選択し）、$x("your_xpath_here")と入力してXPathを確認できます。これはマッチした値の配列を返します。空の場合は、ページに一致するものがないことがわかります。

Firefox v66（2019年4月）：

Firefox v66 console xpath

Chrome v69（2019年4月）：

Chrome v69 console xpath

43
bosnjak

chromeやOperaを使って

プラグインなしで、XPath構文文字を1つも書かずに

  1. 必要な要素を右クリックしてから「検査」
  2. 強調表示されている要素タグを右クリックして、[コピー]> [Xpathのコピー]を選択します。

;）

enter image description here

14
Eng. Samer T

これはChrome用のChroPath拡張機能です。FirePathと比較して多くの高度な機能があります。 2）Webページ上の任意の場所を右クリックします。 3）検査をクリックします。 4）Elementsタブの右側にあるChroPathタブをクリックしてください。ここでXPath/CSSを取得し、それを編集して評価することもできます。

アドオンをダウンロードする

3
SanjayKumar I ChroPath Creator

Xpathをチェックするもう1つの方法は、Selenium IDEを使用することです

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

Selenium IDE

1
AJC

私はChrome用の Natu WebSync拡張機能を使ってXPathとCssセレクタを検証します 。

できる：

  • 部品にセレクタを分割して別々に検証する
  • 各セレクターパートにいくつの要素が見つかったかを色で示します。 0 - 赤、1 - 緑、複数 - 黄色
  • セレクタ部分をポイントしたときにページ上の要素を強調表示する
  • セレクタ部分をクリックしたときに[要素]タブのセレクタ要素に移動する

複雑なセレクタを書いて検証する必要がある人にとっては非常に便利です。

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac

enter image description here

0
wsbaser