どうもイトサル（@itosaru）です。
seleniumを使うために画面のこれを選択したいけどやりかたが分からない
seleniumを使うにあたってまず最初にWEBページ上のどの要素に対して操作するか？
という要素を取得する必要があります。
簡単に要素について説明すると、ざっくり文章なのかボタンなのか、はたまたテキストボックスなのかというHTMLを構成する部品のことです。
タグ情報を取得する方法は8つです。
この記事ではその4つの方法についてGoogle広告のページで開発者ツールを使って説明します。
開発者ツールについての説明はこちら
取得方法についての概要
最初に8つの取得方法について簡単に説明します。
HTMLを勉強している方には前3つはなじみがあるものかと思います。
| 取得方法 | 説明 |
|---|---|
| TAG_NAME | HTMLタグを指定して取得する |
| NAME | NAME名を指定して取得する |
| CLASS_NAME | CLASS名を指定して取得する |
| ID | ID名を指定して取得する |
| LINK_TEXT | リンク(a)タグの文字列から完全一致で取得する |
| PARTIAL_LINK_TEXT | リンク(a)タグの文字列から部分取得して取得する |
| CSS_SELECTOR | CSSセレクターを指定して取得する |
| XPATH | HTML上の階層構造を指定して取得する |
この後から詳しく説明していきますね。
TAG_NAME
TAG_NAME（タグネーム）はHTMLのタグを指定して要素を取得します。
HTMLのタグって何ぞや？という方にざっくりと説明します。
そもそもHTMLとはWEBページを表示するためのファイルのことです。
HTMLはタグという目印を付けて作成していきます。
そのタグがHTMLタグです。
タグにはテキスト用だったり、画像を入れる用だったりといろんな種類があります。
上の画像の赤枠で囲った
<head></head>
のような不等号で囲われたセットがタグです。
しかしTAG_NAMEを使う機会はあまりないと思います。
なぜならHTMLはheadタグやbodyタグ以外は基本的に同じタグを複数回使うからです。
その最たるものとしてはdivタグですね、使い勝手が良すぎます。
使えるシーンとしては例えばpタグにつけられたclassやidを一括で取得したい！
など特定のタグに付与されたプロパティ情報を取得する場合ですかね。
NAME
NAME（ネーム）はタグに付与された名前を指定して要素を取得します。
name情報はaタグやinputタグに付与されることが多いです。
google広告のページではフッター部分の言語選択プルダウンに設定されていました。
CLASS_NAME
CLASS_NAME（クラスネーム）はタグに付与されたclass名を指定して要素を取得します。
class名とは特定のカテゴリとして付与されたタグのオプション情報のことです。
詳しくはこちらの記事をご覧ください。
classはHTML上に複数付与されることが許されているので、取得される要素数は複数ある可能性があります。
可能性があるとあいまいな表現にしたのはページの作りに左右されるからです。
classを指定するケースは例えばリストタグ(li)には同じclassが付与されることがほとんどです。
そのリストの中のリンクタグをループ処理でクリックする、といった場合に使えます。
Google広告の左上メニューのリストタグにはすべて
class=”glue-header__item glue-header__list-1″
というclass名が付与されていますね。
ID
ID（アイディー）はタグに付与されたid名を指定して要素を取得します。
idとはページ上に一つだけのもの付与されたタグのオプション情報のことです。
詳しくはこちらの記事をご覧ください。
idは同じHTML上に1つしか存在しないため、取得できる要素数は確実に1つだけです。
Google広告ではmainタグに
id=”jump-content”
というidが付与されていました。
idはログイン画面のテキストボックスやログインボタンにidが付与されていることが多いです。
そのためテキストボックスに文字を入力したり、ログインボタンを押す処理につなげることができます。
LINK_TEXT, PARTIAL_LINK_TEXT
LINK_TEXT（リンクテキスト）, PARTIAL_LINK_TEXT（パーシャルリンクテキスト）はどちらもリンク（a）タグの文字列を指定して要素を取得します。
それぞれの違いは
- LINK_TEXT：完全一致
- PARTIAL_LINK_TEXT：部分一致
ですね。
前者のLINK_TEXTは例えばページ上のボタン等に同じclassが入っている場合に特定の1つのボタンだけを取得したい場合に使えます。
Google広告ページではページ左上のリンクメニューを取得する場合にいいかもしれませんね。
後者のPARTIAL_LINK_TEXTは例えば「～はこちら」というように同じ文字列がリンクテキストにあり、それらを一括で取得したい場合に使うことができます。
Google広告ページにはフッター部分に「Google ～」と付いたリンクが複数ありました。
このようなリンクを取得する必要がある際に使えますね。
CSS_SELECTOR
CSS_SELECTOR（CSSセレクター）はCSSのセレクターを指定して要素を取得します。
CSSセレクターって何ということをざっくりと説明すると、classやidが付与されたタグに対してCSSを適用するために指定するものです。
もう少し詳しいことが知りたい方はこちら
seleniumの要素の指定もこのCSSセレクターを指定して要素を取得することができます。
使いどころとしてはあまり思いつかないのですが、例えば特定のデバイスサイズの時だけに表示されるcssがあってそれを取得したいという場合や表の奇数行もしくは複数行を取得する場合でしょうか。
CSSセレクターは開発者ツールの対象の要素を選択することで確認することができます。
XPATH
XPath（エックスパス）を指定して要素を取得します。
あまりなじみがない用語ですが簡単に説明するとDOMの階層情報から要素を特定するものです。
さらにDOMって何？という声が聞こえますが、ページ上の要素の住所の一覧みたいなものですかね。
XPathはclassやidと違って直接目で見てわかるものではありません。
しかしご安心を！
開発者ツールでコピーしてXPathを取得することができるので、それを使いましょう。
【XPathの取得方法】
例として[キーワードプランナーに移動]ボタンのXPATHを取得してみます。
1.開発者ツール上で取得したい要素を選択した状態で右クリックし、メニューを表示させます。
2.メニューの[Copy]にマウスをホバーします。
3.[Copy full XPath]をクリックするばXpathの取得完了です。
ひとつ上の[Copy XPath]はseleniumでは使えないので気を付けてくださいね。
seleniumの要素取得メソッド
最後にseleniumの要素取得メソッドについて説明します。
要素取得には
- find_element(by=By.要素指定方法 , value=”要素の値”)
- find_elements(by=By.要素指定方法 , value=”要素の値”)
の2種類があります。
この2つの違いは取得する要素を1つにするか、それとも複数にするのかで使い分けます。
IDやXPathから要素を取得する場合は前者のfind_element、
タグやclassから要素を複数取得する場合は後者のfind_elementsを使います。
またタグやclassをfind_elementで取得した場合は、一番最初に出てきた要素だけ取得します。
まとめ
今回はseleniumを使うにあたって必要な4つの要素の取得方法について説明しました。
改めてその8つの方法について振り返りましょう。
| 取得方法 | 説明 |
|---|---|
| TAG_NAME | HTMLタグを指定して取得する |
| NAME | NAME名を指定して取得する |
| CLASS_NAME | CLASS名を指定して取得する |
| ID | ID名を指定して取得する |
| LINK_TEXT | リンク(a)タグの文字列から完全一致で取得する |
| PARTIAL_LINK_TEXT | リンク(a)タグの文字列から部分取得して取得する |
| CSS_SELECTOR | CSSセレクターを指定して取得する |
| XPATH | HTML上の階層構造を指定して取得する |
これらの8つに加えてseleniumのfind_element、そしてfind_elementsのどちらを使うかは要件に応じて実際に開発者ツールを見ながら選択するといいでしょう。
また今回説明した8つの要素の取得方法についてPythonで書くためのサンプルを作りました。
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from webdriver_manager.chrome import ChromeDriverManager
with webdriver.Chrome(service=Service(ChromeDriverManager().install())) as driver:
#タグから要素を取得する
driver.find_elements(by=By.TAG_NAME, value="div")
#name名から要素を取得する
driver.find_element(by=By.NAME, value="lang-selector")
#class名から要素を取得する
driver.find_elements(by=By.CLASS_NAME, value="glue-header__item glue-header__list-1")
#id名から要素を取得する
driver.find_element(by=By.ID, value="jump-content")
#リンクテキストの完全一致で要素を取得する
driver.find_element(by=By.LINK_TEXT, value="お問い合わせ")
#リンクテキストの部分一致で要素を取得する
driver.find_elements(by=By.PARTIAL_LINK_TEXT, value="Google")
#CSSセレクターで要素を取得する
driver.find_elements(by=By.CSS_SELECTOR, value=".glue-grid .glue-grid__col--span-4")
#xpathから要素を取得する
driver.find_element(by=By.XPATH, value="/html/body/main/div[2]/section[1]/div/div/div[2]/div/a[1]")実際にseleniumで自動操作したいページを開いて書き方があっているか比較するときに使ってください。
selenium学習におすすめな本
seleniumについてちゃんと勉強したい！
という方は「スクレイピング・ハッキング・ラボ Pythonで自動化する未来型生活」がおススメ！
Pythonの基本的な使い方をはじめ、seleniumでの自動操作、そしてスクレイピングについて学ぶことができます。
スクレイピングとはWEBページの情報を取得してデータとして出力すること。
例えばニュースサイトのニュースページ情報を取得する、といったことができるようになります。
seleniumが真価を発揮するのはスクレイピングなので、合わせて勉強しちゃいましょう！
コメント