【Selenium-VBA】JavaScriptを使ってスクレイピングをしてみる2

こんにちは、blueです。

前回はSelenium-VBAでJavaScriptを書くための基本とデベロッパーツールでのJavaScriptの見方について説明しました。

【SeleniumBasic】JavaScriptを使ってスクレイピングをしてみる1

こんにちは、blueです。Seleniumを扱う上で・目的のボタンが押せない　・思った結果にならないといったことはないでしょうか？この記事を読めば・Web…

今回は2回目ということで実際のコードについて説明していきます。

この記事を読んでいただければSelenium-VBAでJavaScriptを書くことができるようになるのでぜひ勉強していってください。

Seleniumでうまくいかない場合はぜひこちらの方法も試してみてください。

要素の取得
clickとsubmit
要素の値の取得
要素の値への入力
変数の宣言と代入
戻り値の取得
イベントの発火
応用：Formへの入力とSubmit
今回のまとめ

要素の取得

HTML文書の要素はdocumentオブジェクトから取得することができます。

実際にSelenium-VBAにおいて要素を取得する方法は以下になります。

Driver.ExecuteScript "document.getElementById('ID名');"

Driver.ExecuteScript "document.querySelector('CSSセレクタ');"

SeleniumのDriver.FindElementById(“ID名”)と書き方は似ており、理解はしやすいと思います。

ただし前回も述べた通り、ExecuteScript内のインテリセンスは効かないのと大文字、小文字は区別されるので1文字でも間違えると実行時エラーになります。注意ください。

なお以下メソッドも存在しますがgetElement(s)と複数形になっており、上記とは異なります。これらの使用頻度は低いので無視してくださって結構です。

参考：検索: getElement* と querySelector*

メソッド

getElementsByClassName

getElementsByName

getElementsByTagName

clickとsubmit

JavaScriptを使ってボタンをクリックするコードは以下になります。

Driver.ExecuteScript "document.getElementById('ID名').click();"
Driver.ExecuteScript "document.getElementById('formのID名').submit();"

clickメソッドは要素にclickイベントが存在する場合に使われます。

一方submitメソッドはフォームの送信の際に使います。

具体的には<form>~~~</form>で区切られたフォーム要素を送信する際に使います。

参考：フォームの送信: submit のイベントとメソッド

要素の値の取得

JavaScriptを使って要素の値を取得するコードは以下になります。

ExecuteScriptメソッドの最初についている「return」については戻り値の取得の項で説明します。

Driver.ExecuteScript "return document.getElementById('formのID名').innerHTML();"
Driver.ExecuteScript "return document.getElementById('formのID名').textContent();"
Driver.ExecuteScript "return document.getElementById('formのID名').value();"

それぞれ内容は微妙に異なるのですが、デベロッパーツールのプロパティに記載されている内容を取得すると理解してもらえば結構です。

innerHTML, textContent, valueの違いを知りたい方はこちらを参考にしてください。

参考：【JavaScript】innerHTML/textContent/valueの違い

要素の値への入力

JavaScriptを使って要素のプロパティに入力するコードは以下になります。

ここではvalueプロパティに「blue」と入力するコードについて記載します。

Driver.ExecuteScript "document.getElementById('ID名').value = ’blue';"
Driver.ExecuteScript "document.getElementById('ID名').value = arguments[0];", "blue"

前者はvalueプロパティに対して直接代入します。直打ちしたい場合はこちらでOKです。代入する文字列は’　’で囲ってください。

ただこの方法だと変数は代入できないので、その場合に後者の方法を使います。

後者はExecuteScriptメソッドの第一引数にargumentsオブジェクト、第二引数に対象配列をおいて記載します。

argumentsオブジェクトは関数内でのみ利用できる配列オブジェクトで、関数に渡されてきた値を格納できます。

ここではarguments[0]にVBAの変数を代入することでJavaScript内で処理ができるようになります。

参考：argumentsオブジェクトとは

変数の宣言と代入

JavaScriptで変数を宣言する方法は以下になります。

Driver.ExecuteScript "var name;"
Driver.ExecuteScript "var name=~~~;"

JavaScriptで変数を宣言する際はvarキーワードを使います。VBAのDimのようなものです。

またJavaScriptでは宣言と同時に代入することも可能であり、後者のように＝の形で記載します。

戻り値の取得

JavaScriptを使って戻り値を取得するコードは以下になります。

Driver.ExecuteScript "return ~~~;"

JavaScriptではreturnキーワードとともに変数や関数を設定することで呼び出し元に値を戻すことができます。

VBAでのFunction “関数名” “関数名”=と同じです。

イベントの発火

JavaScriptを使ってイベントを発火させるコードは以下になります。

clickイベント以外はこの方法で発火させます。

Driver.ExecuteScript "document.getElementById('ID名').dispatchEvent(new Event('input'));"

inputイベントはJavaScriptからの入力では発火しません。その為dispatchEventメソッドを使って意図的に発火させます。

応用：Formへの入力とSubmit

JavaScriptを使ってFormに直接入力してSubmitするコードは以下になります。

サイトはもしもアフィリエイトを使っています。

Sub Form処理()
    Dim Driver As New Selenium.WebDriver
    Driver.Start "Chrome"
    
    Driver.Get "https://af.moshimo.com/af/shop/login"

    Driver.ExecuteScript "var fm = document.getElementById('login-form');" & _
    "fm.account.value='アカウント名';" & _
    "fm.password.value='パスワード';" & _
    "fm.method='post';" & _
    "fm.action='https://af.moshimo.com/af/shop/login/execute';" & _
    "fm.submit()"
    
End Sub

このコードはこれまでのものを取りいれたものとなっています。

このコードを使えばログインはJavaScriptで行うことができます。

参考：[JavaScript] Submitアクションを起こす – コピペで使える JavaScript逆引きリファレンス