Webページから要素を見つけて選択することは、Seleniumを使用したWebスクレイピングの鍵です。 Webページから要素を見つけて選択するには、SeleniumのXPathセレクターを使用できます。
この記事では、SeleniumPythonライブラリを使用してSeleniumでXPathセレクターを使用してWebページから要素を見つけて選択する方法を紹介します。それでは、始めましょう。
前提条件：
この記事のコマンドと例を試すには、次のものが必要です。
- コンピューターにインストールされているLinuxディストリビューション（できればUbuntu）。
- コンピューターにインストールされているPython3。
- コンピューターにインストールされているPIP3。
- Python virtualenv コンピュータにインストールされているパッケージ。
- コンピュータにインストールされているMozillaFirefoxまたはGoogleChromeWebブラウザ。
- Firefox GeckoDriverまたはChromeWebDriverのインストール方法を知っている必要があります。
要件4、5、および6を満たすために、私の記事を読んでください Python3でのSeleniumの概要 。あなたは他のトピックに関する多くの記事を見つけることができます LinuxHint.com 。サポートが必要な場合は、必ずチェックしてください。
プロジェクトディレクトリの設定：
すべてを整理するには、新しいプロジェクトディレクトリを作成します セレン-xpath / 次のように：
$mkdir -pvセレン-xpath/運転手 
に移動します セレン-xpath / 次のようにプロジェクトディレクトリ：
$CDセレン-xpath/ 
次のように、プロジェクトディレクトリにPython仮想環境を作成します。
$virtualenv .venv 
次のように仮想環境をアクティブ化します。
$ソース.venv/午前/活性化 
次のように、PIP3を使用してSeleniumPythonライブラリをインストールします。
$ pip3インストールセレン 
必要なすべてのWebドライバーをダウンロードしてインストールします。 運転手/ プロジェクトのディレクトリ。私の記事でWebドライバーをダウンロードしてインストールするプロセスを説明しました Python3でのSeleniumの概要 。
Chromeデベロッパーツールを使用してXPathセレクターを入手します。
このセクションでは、Google Chrome Webブラウザーの組み込み開発ツールを使用して、Seleniumで選択するWebページ要素のXPathセレクターを見つける方法を説明します。
Google Chrome Webブラウザーを使用してXPathセレクターを取得するには、Google Chromeを開き、データを抽出するWebサイトにアクセスします。次に、ページの何もない領域でマウスの右ボタン（RMB）を押して、をクリックします。 検査する 開くには Chromeデベロッパーツール 。
を押すこともできます + シフト + 私 開くには Chromeデベロッパーツール 。
Chromeデベロッパーツール 開く必要があります。
目的のWebページ要素のHTML表現を見つけるには、をクリックします。 検査する （（
）下のスクリーンショットに示されているアイコン。
次に、目的のWebページ要素にカーソルを合わせ、マウスの左ボタン（LMB）を押して選択します。
選択したWeb要素のHTML表現は、 要素 のタブ Chromeデベロッパーツール、 下のスクリーンショットでわかるように。
目的の要素のXPathセレクターを取得するには、から要素を選択します。 要素 のタブ Chromeデベロッパーツール そしてそれを右クリック（RMB）します。次に、を選択します コピー >> XPathをコピーし、 以下のスクリーンショットに示されているように。
XPathセレクターをテキストエディターに貼り付けました。 XPathセレクターは、以下のスクリーンショットに示すようになります。
Firefox DeveloperToolを使用してXPathセレクターを入手します。
このセクションでは、Mozilla Firefox Webブラウザーの組み込み開発ツールを使用して、Seleniumで選択するWebページ要素のXPathセレクターを見つける方法を説明します。
Firefox Webブラウザーを使用してXPathセレクターを取得するには、Firefoxを開き、データを抽出するWebサイトにアクセスします。次に、ページの何もない領域でマウスの右ボタン（RMB）を押して、をクリックします。 要素の検査（Q） 開くには Firefox開発ツール 。
Firefox開発ツール 開く必要があります。
目的のWebページ要素のHTML表現を見つけるには、をクリックします。 検査する （（
）下のスクリーンショットに示されているアイコン。
次に、目的のWebページ要素にカーソルを合わせ、マウスの左ボタン（LMB）を押して選択します。
選択したWeb要素のHTML表現は、 インスペクター のタブ Firefox開発ツール、 下のスクリーンショットでわかるように。
目的の要素のXPathセレクターを取得するには、から要素を選択します。 インスペクター のタブ Firefox開発ツール そしてそれを右クリック（RMB）します。次に、を選択します コピー >> XPath 以下のスクリーンショットに示されているように。
目的の要素のXPathセレクターは次のようになります。
XPathセレクターを使用してWebページからデータを抽出する：
このセクションでは、Selenium PythonライブラリでXPathセレクターを使用して、Webページ要素を選択し、それらからデータを抽出する方法を説明します。
まず、新しいPythonスクリプトを作成します ex01.py 次のコード行を入力します。
からセレン輸入webdriverからセレン。webdriver。一般。キー 輸入キー
からセレン。webdriver。一般。に 輸入に
オプション=webdriver。ChromeOptions（（）。
オプション。ヘッドレス = NS
ブラウザ=webdriver。クロム（（実行可能パス='./drivers/chromedriver'、
オプション=オプション）。
ブラウザ。得る（（「https://www.unixtimestamp.com/」）。
タイムスタンプ=ブラウザ。find_element_by_xpath（（'/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] '）。
印刷（（'現在のタイムスタンプ：％s'％（（タイムスタンプ。文章。スプリット（（''）。[0]）。）。
ブラウザ。選ぶ（（）。
完了したら、 ex01.py Pythonスクリプト。
1〜3行目は、必要なすべてのSeleniumコンポーネントをインポートします。
5行目はChromeオプションオブジェクトを作成し、6行目はChromeウェブブラウザのヘッドレスモードを有効にします。
8行目はChromeを作成します ブラウザ を使用するオブジェクト chromedriver からのバイナリ 運転手/ プロジェクトのディレクトリ。
10行目は、ブラウザにWebサイトunixtimestamp.comをロードするように指示しています。
12行目は、XPathセレクターを使用して、ページからタイムスタンプデータを持つ要素を見つけ、それを タイムスタンプ 変数。
13行目は、要素からのタイムスタンプデータを解析し、コンソールに出力します。
マークされたのXPathセレクターをコピーしました h2 からの要素 unixtimestamp.com Chromeデベロッパーツールを使用します。
14行目でブラウザを閉じます。
Pythonスクリプトを実行する ex01.py 次のように：
$ python3ex01。py 
ご覧のとおり、タイムスタンプデータが画面に出力されます。
ここでは、私は使用しました browser.find_element_by_xpath（selector） 方法。このメソッドの唯一のパラメータは セレクタ、 これは要素のXPathセレクターです。
それ以外の browser.find_element_by_xpath（） メソッド、あなたも使用することができます browser.find_element（By、selector） 方法。このメソッドには2つのパラメーターが必要です。最初のパラメータ に になります By.XPATH XPathセレクターと2番目のパラメーターを使用するため セレクタ XPathセレクター自体になります。結果は同じになります。
方法を確認するには browser.find_element（） メソッドはXPathセレクターで機能し、新しいPythonスクリプトを作成します ex02.py 、からすべての行をコピーして貼り付けます ex01.py に ex02.py と変更 12行目 以下のスクリーンショットに示されているように。
ご覧のとおり、Pythonスクリプト ex02.py と同じ結果が得られます ex01.py 。
$ python3ex02。py 
NS browser.find_element_by_xpath（） と browser.find_element（） メソッドは、Webページから単一の要素を検索して選択するために使用されます。 XPathセレクターを使用して複数の要素を検索および選択する場合は、次を使用する必要があります。 browser.find_elements_by_xpath（） また browser.find_elements（） メソッド。
NS browser.find_elements_by_xpath（） メソッドは、と同じ引数を取ります browser.find_element_by_xpath（） 方法。
NS browser.find_elements（） メソッドは、と同じ引数を取ります browser.find_element（） 方法。
XPathセレクターを使用して名前のリストを抽出する例を見てみましょう。 random-name-generator.info SeleniumPythonライブラリを使用します。
順序付けられていないリスト（ 死ぬ タグ）には10があります で それぞれの中にランダムな名前を含むタグ。すべてを選択するためのXPath で 内部のタグ 死ぬ この場合のタグは // * [@ id = main] / div [3] / div [2] / ol // li
XPathセレクターを使用してWebページから複数の要素を選択する例を見てみましょう。
新しいPythonスクリプトを作成する ex03.py 次のコード行を入力します。
からセレン輸入webdriverからセレン。webdriver。一般。キー 輸入キー
からセレン。webdriver。一般。に 輸入に
オプション=webdriver。ChromeOptions（（）。
オプション。ヘッドレス = NS
ブラウザ=webdriver。クロム（（実行可能パス='./drivers/chromedriver'、
オプション=オプション）。
ブラウザ。得る（（'http://random-name-generator.info/'）。
名前=ブラウザ。find_elements_by_xpath（（'
// * [@ id = 'main'] / div [3] / div [2] / ol // li '）。
にとって名前の名前：
印刷（（名前。文章）。
ブラウザ。選ぶ（（）。
完了したら、 ex03.py Pythonスクリプト。
1〜8行目は ex01.py Pythonスクリプト。それで、ここでそれらを再び説明するつもりはありません。
10行目は、ブラウザにWebサイトrandom-name-generator.infoをロードするように指示しています。
12行目は、を使用して名前リストを選択します。 browser.find_elements_by_xpath（） 方法。このメソッドはXPathセレクターを使用します // * [@ id = main] / div [3] / div [2] / ol // li 名前リストを検索します。次に、名前リストがに保存されます 名前 変数。
13行目と14行目では、 にとって ループは、を反復処理するために使用されます 名前 コンソールに名前をリストして印刷します。
16行目でブラウザを閉じます。
Pythonスクリプトを実行する ex03.py 次のように：
$ python3ex03。py 
ご覧のとおり、名前はWebページから抽出され、コンソールに出力されます。
を使用する代わりに browser.find_elements_by_xpath（） メソッド、あなたも使用することができます browser.find_elements（） 以前の方法。このメソッドの最初の引数は By.XPATH、 2番目の引数はXPathセレクターです。
実験するには browser.find_elements（） メソッド、新しいPythonスクリプトを作成します ex04.py 、からすべてのコードをコピーします ex03.py に ex04.py 、および下のスクリーンショットでマークされているように行12を変更します。
以前と同じ結果が得られるはずです。
$ python3ex04。py 
XPathセレクターの基本：
FirefoxまたはGoogleChrome Webブラウザーの開発者ツールは、XPathセレクターを自動的に生成します。ただし、これらのXPathセレクターではプロジェクトに不十分な場合があります。その場合、特定のXPathセレクターがXPathセレクターを構築するために何をするかを知っている必要があります。このセクションでは、XPathセレクターの基本を紹介します。次に、独自のXPathセレクターを作成できるはずです。
新しいディレクトリを作成します www / 次のようにプロジェクトディレクトリにあります。
$mkdir -vwww 
新しいファイルを作成する web01.html の中に www / ディレクトリを作成し、そのファイルに次の行を入力します。
< html lang='オン'>>
< 頭 >>
< メタ 文字コード=「UTF-8」>>
< メタ 名前=「ビューポート」 コンテンツ='width = device-width、initial-scale = 1.0'>>
< 題名 >>基本的なHTMLドキュメント</ 題名 >>
</ 頭 >>
< 体 >>
< h1 >>こんにちは世界</ h1 >>
</ 体 >>
</ html >>
完了したら、 web01.html ファイル。
次のコマンドを使用して、ポート8080で単純なHTTPサーバーを実行します。
$ python3 -mhttp。サーバ-ディレクトリwww /8080 
HTTPサーバーが起動するはずです。
あなたはにアクセスできるはずです web01.html URLを使用したファイル http：// localhost：8080 / web01.html 、下のスクリーンショットでわかるように。
FirefoxまたはChrome開発ツールが開いているときに、を押します。 + NS 検索ボックスを開きます。ここにXPathセレクターを入力すると、XPathセレクターが何を選択するかを非常に簡単に確認できます。このセクション全体でこのツールを使用します。
XPathセレクターは スラッシュ（/） ほとんどの時間。 Linuxのディレクトリツリーのようなものです。 NS / Webページ上のすべての要素のルートです。
最初の要素は html 。したがって、XPathセレクター / html 全体を選択します html 鬼ごっこ。
内部 html タグ、私たちは持っています 体 鬼ごっこ。 NS 体 タグはXPathセレクターで選択できます / html / body
NS h1 ヘッダーは内部にあります 体 鬼ごっこ。 NS h1 ヘッダーはXPathセレクターで選択できます / html / body / h1
このタイプのXPathセレクターは、絶対パスセレクターと呼ばれます。絶対パスセレクターでは、ページのルート（/）からWebページをトラバースする必要があります。絶対パスセレクターの欠点は、Webページ構造にわずかな変更を加えただけでも、XPathセレクターが無効になる可能性があることです。この問題の解決策は、相対的または部分的なXPathセレクターです。
相対パスまたは部分パスがどのように機能するかを確認するには、新しいファイルを作成します web02.html の中に www / ディレクトリを作成し、次のコード行を入力します。
< html lang='オン'>>
< 頭 >>
< メタ 文字コード=「UTF-8」>>
< メタ 名前=「ビューポート」 コンテンツ='width = device-width、initial-scale = 1.0'>>
< 題名 >>基本的なHTMLドキュメント</ 題名 >>
</ 頭 >>
< 体 >>
< h1 >>こんにちは世界</ h1 >>
< div >>
< NS >>これはメッセージです</ NS >>
</ div >>
< div >>
< スパン >>こんにちは世界</ スパン >>
</ div >>
</ 体 >>
</ html >>
完了したら、 web02.html ファイルを作成し、Webブラウザにロードします。
ご覧のとおり、XPathセレクター // div / p を選択します NS 内のタグ div 鬼ごっこ。これは、相対XPathセレクターの例です。
相対XPathセレクターは // 。次に、選択する要素の構造を指定します。この場合、 div / p 。
そう、 // div / p を選択することを意味します NS 内部の要素 div 要素は、その前に何が来るかは関係ありません。
次のようなさまざまな属性で要素を選択することもできます id 、 クラス 、 タイプ、 XPathセレクターを使用するなど。その方法を見てみましょう。
新しいファイルを作成する web03.html の中に www / ディレクトリを作成し、次のコード行を入力します。
< html lang='オン'>>
< 頭 >>
< メタ 文字コード=「UTF-8」>>
< メタ 名前=「ビューポート」 コンテンツ='width = device-width、initial-scale = 1.0'>>
< 題名 >基本的なHTMLドキュメント</ 題名 >>
</ 頭 >>
< 体 >>
< h1 > Hello World</ h1 >>
< div クラス='container1'>>
< NS >これはメッセージです</ NS >>
< スパン >これは別のメッセージです</ スパン >>
</ div >>
< div クラス='container1'>>
< h2 >見出し2</ h2 >>
< NS >>人によっては
苦痛、悩み、そして選ばれたものに当てはまらないものを選ぶのが賢明です
簡単なフライトやその他の素晴らしいサービスではありませんか？彼はどこで生まれたのですか、それともどこで生まれましたか？</ NS >>
</ div >>
< スパン id='footer-msg'>これはフッターです</ スパン >>
</フッター>
</ 体 >>
</ html >>
完了したら、 web03.html ファイルを作成し、Webブラウザにロードします。
すべてを選択するとします div を持っている要素 クラス 名前 コンテナ1 。これを行うには、XPathセレクターを使用できます // div [@ class = ’container1']
ご覧のとおり、XPathセレクターに一致する2つの要素があります // div [@ class = ’container1']
最初を選択するには div を持つ要素 クラス 名前 コンテナ1 、 追加 [1] 以下のスクリーンショットに示すように、XPath選択の最後に。
同じように、2番目を選択できます div を持つ要素 クラス 名前 コンテナ1 XPathセレクターの使用 // div [@ class = ’container1'] [2]
次の方法で要素を選択できます id 同様に。
たとえば、 id の フッターメッセージ 、XPathセレクターを使用できます // * [@ id = ’footer-msg’]
ここでは、 * 前 [@ id = ’footer-msg’] タグに関係なく、任意の要素を選択するために使用されます。
これがXPathセレクターの基本です。これで、Seleniumプロジェクト用に独自のXPathセレクターを作成できるようになります。
結論：
この記事では、SeleniumPythonライブラリでXPathセレクターを使用してWebページから要素を検索および選択する方法を示しました。また、最も一般的なXPathセレクターについても説明しました。この記事を読んだ後は、SeleniumPythonライブラリでXPathセレクターを使用してWebページから要素を選択することにかなり自信を持っているはずです。