SeleniumBasicの操作（基礎編）第3回：Web要素のキャッチ

2023年8月15日2023年10月6日

　SeleniumBasicでホームページを開いた後、Web操作をする際にまず最初に行う事は、Web要素をキャッチすることです。ホームページ画面で何を操作するにおいても、Web要素のキャッチが必ず必要になります。
「Web要素キャッチ」⇒「メソッド実行」⇒「次のWeb要素キャッチ」⇒「メソッド実行」の繰り返しでWebスクレイピングのコードを作り上げていきます。　
Web操作フロー図の中の「Web要素のキャッチ」について解説していきます。

スクロールできます

ブラウザの起動

Web操作

ブラウザを閉じる

Web要素のキャッチ

ウィンドウの操作

フレームの移動

スクリーンショットの取得

HTML情報の取得

Cookie情報取得

（Web操作の代表的な操作例）

クリック

文字列入力

チェックボックス操作

ドラッグアンドドロップ

ドロップダウンリスト選択

ダイアログボックスの操作

テーブルデータの取得

ファイルダウンロード

Web要素のプロパティ取得

（Web要素キャッチ後のメソッド例）

マクロファイル　ダウンロード

　このページで掲載しているVBAのマクロファイルを以下リンクからダウンロードできます。必要に応じてファイルダウンロードして活用ください。

study_3.xlsm

ダウンロードファイルのマクロ実行注意事項（ここをクリック）

　ファイルダウンロード後、マクロ実行するまでの注意事項を記載しておきます。

STEP

SeleniumBasicのインストール、ChromeDriverの更新

　マクロファイルを実行するには、事前にSeleniumBasicをインストールしておく必要があります。同時にChromeDriverを現在のChromeブラウザのバージョンに合わせて更新しておきます。SeleniumBasicのインストールとChromeDriverの更新については以下記事を参照ください。

Googleホームページから検索実行

VBAコード

まずはVBAのコードを紹介します。

Private Sub FindElement_Css()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByCss("#APjFqb")
    elm.SendKeys "hoge"
    driver.Wait 2000
    Dim Keys As New Keys
    elm.SendKeys Keys.Enter
    Stop
    driver.Quit
End Sub

動作解説

　Googleホーム画面から検索ボックスに文字列を入力して、検索実行するまでをSeleniumBasicで実行できる様にします。以下の様なステップを踏みます。イメージはクリックすると拡大表示されます。

1. Googleホームページを開く

Dim driver As New ChromeDriver
driver.Get "https://www.google.co.jp"

　ChromeDriverのインスタンス生成し、GoogleChromeを立ち上げます。これでChromeブラウザを操作できる様になります。このdriverオブジェクトで指定したURLのホームページを開く事ができる様になります。今回は、Googleホームページを指定しました。

2. 検索ボックスのWeb要素キャッチ

Web要素のキャッチ　+　Web要素をelm変数に代入

Dim elm As WebElement
Set elm = driver.FindElementByCss("#APjFqb")

　ChromeDriverクラスのFindElementByCssメソッドを利用してWeb要素をキャッチします。また、elmオブジェクトに当該のWeb要素を代入します。メソッドの引数としてGoogleChromeのCssSelector値を入力します。CssSelector値の検索方法は後述します。
　実際はWeb要素をキャッチ（取得）だけで、カーソルを合わせている訳ではありません。

3. 検索ボックスに文字列を入力する

elm.SendKeys "hoge"

　変数elmに代入したWebElementクラスでキャッチした検索ボックスにSendKeysメソッドを使用して文字列を入力します。

4. 検索ボタンにEnter入力して検索実行

Dim Keys As New Keys
elm.SendKeys Keys.Enter

　EnterやShift等の特殊文字の入力を実行します。Dim KeysでKeysクラスのインスタンスを生成して、特殊文字を入力できる準備をしています。変数elmに代入したWebElementクラスのSendKeysメソッドで引数をEnterキーにて文字列入力します。Keysクラスで入力できる特殊文字列の一覧はこちらから確認できます。

Web要素値の検索方法（GoogleChrome）

VBAコードで紹介した、WebElementのキャッチの構文は以下コードでした。

Set elm = driver.FindElementByCss("#APjFqb")

ここで、引数の"#APjFqb"を取得する方法を紹介します。

STEP

Googleホームページを開く

最初にGoogleChromeで「https://google.co.jp/」を開きます。

STEP

デベロッパツールを開く

「設定」⇒「その他ツール」⇒「デベロッパツール」の順にクリック
ショートカットキーは、 Ctrl + Shift + I

デベロッパツールが画面右側に表示されます。HTMLのコードがこちらで確認できます。

STEP

インスペクターの起動（ショートカットキー：Ctrl + Shift + C）

赤枠内の矢印マーク（インスペクター）をクリック。
ショートカットキーは、 Ctrl + Shift + C

STEP

対象要素のキャッチ

　インスペクターを起動した後、情報を得たい要素にマウスでカーソルを合わせクリックすると、右側のElementsタブ内のHTMLタグがクリックした箇所に移動します。

STEP

CssSelectorをコピー

対象のHTMLタグが記載されているブロックの設定アイコンをクリックして、
「Copy」⇒「Copy selector」をクリックすると、CssSelectorがクリップボードにコピーされます。

ここでコピーされたCssSelectorが"APjFqb"になります。

FindElementの使用方法

FindElement(s)メソッドの種類

FindElementとFindElementsの違い

　Web要素をキャッチする手段として、最初に"FindElementByCss"を紹介しました。FindElementメソッドには調べたい要素別にメソッドが分かれています。また、キャッチした最初の要素1個をキャッチするFindElementとキャッチできる要素が複数ある場合、キャッチできる要素を全てキャッチするFindElementsがあります。違いが最後にsが付いているか否かだけの違いで非常に見難いですが、単数形のElementか複数形のElementsでメソッドの役割が変わります。簡単に各々の特性を書いておきます。

FindElement: 要素キャッチは1個。メソッド実行が単純
FindElements: 要素キャッチは複数。メソッド実行するために配列指定する必要がある。

FindElement(s)メソッドの種類

　FindElement(s)メソッドで利用できるメソッドと簡単な解説を以下に掲載します。

種類	解説
FindElement(s)ByClass	CSSクラスの値でWeb要素検索、取得
FindElement(s)ByCss	CSSセレクタの値でWeb要素検索、取得
FindElement(s)ById	Idの値でWeb要素検索、取得
FindElement(s)ByLinkText	リンクテキストでWeb要素検索、取得（完全一致）
FindElement(s)ByName	Nameの値でWeb要素検索、取得
FindElement(s)ByPartialLinkText	リンクテキストでWeb要素検索、取得（部分一致）
FindElement(s)ByTag	Tag名でWeb要素検索、取得
FindElement(s)ByXPath	XPathWeb要素検索、取得

利用しやすいFindElementメソッド

　上記のFindElementメソッドを全て使いこなす必要はありません。最初は、FindElementByCss, FindElementByXPath, FindElementByLinkText, FindElementByPartialLinkTextの4つを利用できる様にすれば問題ありません。これらのメソッドは単純コピペで利用できたり、直感的に利用しやすいメソッドになります。

単純コピペで利用できるメソッド（FindElementByXPath）

　FindElementByCss, FindElementByXPathはGoogleデベロッパツールで単純に要素をコピーできます。

FindElementByCss: 「Copy selector」でCssSelector値を取得
FindElementByXPath: 「Copy XPath」でXPath値を取得

　FindElementByCssはこのページの最初の構文で紹介していますので、そちらを参照ください。ここではXPath値について解説します。

　CssSelector値と同様に、Googleホームページの検索ボックスについてXPath値をGoogleデベロッパツールでコピーすると以下値を取得できます。

//*[@id="APjFqb"]

　VBAでは引数内でダブルクォーテーションが利用できないため、取得値をシングルクォーテーションに変更します。

変更前

//*[@id="APjFqb"]

変更後

//*[@id='APjFqb']

変更後のXPath値をFindElementByXPathの引数に入力します。以下VBA構文例です。

Private Sub FindElement_XPath()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByXPath("//*[@id='APjFqb']")
    elm.SendKeys "hoge"
    driver.Wait 2000
    Dim Keys As New Keys
    elm.SendKeys Keys.Enter
    Stop
    driver.Quit
End Sub

　6行目のSendKeysメソッドはまだ解説していませんが、とりあえずこれで文字列入力ができる、と思っておいてください。

直感的に利用しやすいメソッド（FindElementByLinkText）

　直感的に利用できるメソッドとして、ホームページ上のリンクテキストで検索するFindElementByLinkText, FindElementByPartialLinkTextがあります。2つのメソッドはどちらもリンクテキストを検索しますが、完全一致検索と部分一致検索の違いがあります。

FindElementByLinkText: リンクテキストを「完全一致」で検索
FindElementByPartialLinkText: リンクテキストを「部分一致」で検索

以下VBA構文例です。

Private Sub FindElement_LinkText()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByPartialLinkText("Google")
    driver.Wait 2000
    elm.Click
    driver.Wait 2000
    Set elm = driver.FindElementByLinkText("日本におけるGoogle")
    elm.Click
    driver.Wait 2000
    Stop
    driver.Quit
End Sub

7, 10行目のClickメソッドはまだ解説していませんが、とりあえずこれでWeb要素をクリックできる、と思っておいてください。

FindElement Examples（おまけ）

FindeElementメソッドでその他属性ノードを利用したメソッドの利用方法を紹介します。基本は、FindElementByCss, FindElementByXPath, FindElementByLinkText, FindElementByPartialLinkText
の4つを理解していれば特に必要ありませんので、読み飛ばしてもらって構いません。

　Googleホームページを開いて、デベロッパツールから検索ボックスのElementをコピー（Copy element）すると以下コードを取得できます。

<textarea jsname="yZiJbe" class="gLFyf" jsaction="paste:puy29d;" id="APjFqb" 
maxlength="2048" name="q" rows="1" aria-activedescendant="" aria-autocomplete="both" 
aria-controls="Alh6id" aria-expanded="false" aria-haspopup="both" aria-owns="Alh6id" 
autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" role="combobox" 
spellcheck="false" title="検索" type="search" value="" aria-label="検索" 
data-ved="0ahUKEwidr7rq0N2AAxVR0jQHHS1MDJkQ39UDCAY"></textarea>

　上記elementを利用し、FindeElementメソッドのその他メソッドの利用例を紹介していきます。

FindElementByClass

Private Sub FindElement_Class()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByClass("gLFyf")
    driver.Wait 2000
    elm.SendKeys "hoge"
    driver.Wait 2000
    driver.Quit
End Sub

FindElement_Id

Private Sub FindElement_Id()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementById("APjFqb")
    driver.Wait 2000
    elm.SendKeys "hoge"
    driver.Wait 2000
    driver.Quit
End Sub

FindElement_Name

Private Sub FindElement_Name()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByName("q")
    driver.Wait 2000
    elm.SendKeys "hoge"
    driver.Wait 2000
    driver.Quit
End Sub

FindElement_Tag

Private Sub FindElement_Tag()
    Dim driver As New ChromeDriver
    driver.Get "https://www.google.co.jp"
    Dim elm As WebElement
    Set elm = driver.FindElementByTag("textarea")
    driver.Wait 2000
    elm.SendKeys "hoge"
    driver.Wait 2000
    driver.Quit
End Sub

教育講座フロント

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

まんさい

VBAを中心とした自動化、効率化の手法を紹介しています。現在は、SeleniumBasicのexamplesを紹介しています。その内、SeleniumBasic以外の手法も掲載したいと思っております。

SeleniumBasicの操作（基礎編）第3回：Web要素のキャッチ

マクロファイル　ダウンロード

Googleホームページから検索実行

VBAコード

動作解説

1. Googleホームページを開く

2. 検索ボックスのWeb要素キャッチ

3. 検索ボックスに文字列を入力する

4. 検索ボタンにEnter入力して検索実行

Web要素値の検索方法（GoogleChrome）

FindElementの使用方法

FindElement(s)メソッドの種類

FindElementとFindElementsの違い

FindElement(s)メソッドの種類

利用しやすいFindElementメソッド

単純コピペで利用できるメソッド（FindElementByXPath）

直感的に利用しやすいメソッド（FindElementByLinkText）

FindElement Examples（おまけ）

FindElementByClass

FindElement_Id

FindElement_Name

FindElement_Tag

この記事を書いた人

SeleniumBasic　ChromeDriver自動更新の方法解説

PowerShell　特殊フォルダの指定方法

VBA　特殊フォルダの指定方法

【入門～上級】ExcelVBA学習本・テキストおすすめ５選他

【入門～中級】PowerShell学習本おすすめ４選

SeleniumBasicの操作（基礎編）第3回：Web要素のキャッチ

マクロファイル ダウンロード

Googleホームページから検索実行

VBAコード

動作解説

1. Googleホームページを開く

2. 検索ボックスのWeb要素キャッチ

3. 検索ボックスに文字列を入力する

4. 検索ボタンにEnter入力して検索実行

Web要素値の検索方法（GoogleChrome）

FindElementの使用方法

FindElement(s)メソッドの種類

FindElementとFindElementsの違い

FindElement(s)メソッドの種類

利用しやすいFindElementメソッド

単純コピペで利用できるメソッド（FindElementByXPath）

直感的に利用しやすいメソッド（FindElementByLinkText）

FindElement Examples（おまけ）

FindElementByClass

FindElement_Id

FindElement_Name

FindElement_Tag

この記事を書いた人

関連記事

SeleniumBasic ChromeDriver自動更新の方法解説

PowerShell 特殊フォルダの指定方法

VBA 特殊フォルダの指定方法

【入門～上級】ExcelVBA学習本・テキストおすすめ５選他

【入門～中級】PowerShell学習本おすすめ４選

マクロファイル　ダウンロード

SeleniumBasic　ChromeDriver自動更新の方法解説

PowerShell　特殊フォルダの指定方法

VBA　特殊フォルダの指定方法