AutoItでChromeを操作2~HTML要素へのアクセス~

AutoIt WebDriver Elementを操作する AutoIT

以前、AutoItでChromeを操作するのはChrome WebDriver経由でWebDriver UDFを使って制御する記事を書きました。
今回はページの要素へのアクセス、アクションにトライしてみます。

スポンサーリンク

1. 前回の記事でNavigateまで出来ているとします

前回の記事(下記リンク)で、WebDriverの準備から実行してWebDriver経由でChromeが立ち上がり_WD_Navigate()で指定したURLが表示されているものとします。

2. _WD_FindElement()で要素を探す

_WD_FindElement()では通常xpathを指定すると良いでしょう。
$_WD_LOCATOR_ByXPathはwd_core.au3に記載されています。文字列”xpath”でも大丈夫です。これに成功すると、$objにオブジェクトが入ります。これを_WD_ElementActionの第2引数に使います。

; htmlのトップから$spathで指定したxpathのオブジェクトを検索する
; div->dd(targetcssなCSSが含まれている)->span を検索
$spath = "div/dd[contains(@class,'targetcss')]/span"
$obj = _WD_FindElement($sess, $_WD_LOCATOR_ByXPath, $spath)
If @error Then 
  ;; エラー
EndIf

3. xpathはChromeのデベロッパーツールの要素、Copy XPathで

xpathが肝になります。Chrome上でCtrl+Shift+Iでデベロッパーツールを表示、もしくは、知りたい要素上で右クリック「検証」でデベロッパーツールでElementsタブの要素が指定されるので、そこで右クリックし、「Copy->Copy XPath」でコピーし、スクリプト上の変数にセットしましょう。
今回は変数$spathにコピーしたXPathをペーストしました。

Chromeデベロッパーツールを出すにはページ内のほしい要素で右クリック「検証」
xpathを知るにはChromeデベロッパーツールのElementsタブで、ほしいxpathのHTML上で右クリック「Copy->Copy XPath」を選択

但し、うまくいかないことが多いです。HTMLがシンプルならElementAction()で成功しますが、複雑なHTMLになると失敗するのでxpath自体を簡略化する必要が出てきます。
Xpathについてはググりましょう。例えば以下のようなサイトとか。

XPathのまとめ、要素の参照方法いろいろ
目次 1. XPathとは2. XPathを試してみる2.1. Google Chrome で XPath を書いてみる2.2. Google Chrome で XPath を取得する3. XPathの構文3.1. XPathとノード3.2

自分はよくcontains()を使います。楽天の商品レビューなんかはid指定よりclass指定で区別していることが多かったので。span[contains(@class, ‘class名’)]でやるとspanタグでclassに指定した文字列が含まれている場合、適なことが出来ます。classは複数指定されていることが多いので、span[@class=”]だと、完全一致になるからです。

4. SciTE のOutput(F8)でログを確認する

Outputのログには_WD_xxがたくさん出ていると思います。この中で先ほど指定したxpathを検索すると良いでしょう。
その下の_WD_Post: StatusCode=200; 行にメニューの要素idが返されているのがわかります。
要素idは67f69424-f7cf-48cb-9df7-691034136234ですね。これをElementActionに渡せばその要素をコントロールすることが出来ます。

__WD_Post: URL=HTTP://127.0.0.1:9515/session/1c1a47c3b31c655ef27778db2a18a283/element; $sData={"using":"xpath","value":"//*[@id=\"menu-item-8\"]/a/div/div[1]"}
__WD_Post: StatusCode=200; ResponseText={"value":{"element-6066-11e4-a52e-4f735466cecf":"67f69424-f7cf-48cb-9df7-691034136234"}}

5. _WD_ElementAction()で要素に対して何か行う

_WD_FineElement()で要素の取得に成功したら、それを_WD_ElementAction()で使いその要素に対して命令を行います。取得は第4引数なし、セットは第4引数に値をといった感じです。

5.1 要素のtextを取得するには’text’

第3引数に何のアクションをするのかを指定すればOKです。

$txt = _WD_FindElement($sess, $obj, 'text');
ConsoleWrite("text is " & $txt & @CRLF )

5.2 a要素をクリックはclick

clickを指定すれば、この要素をクリックしてページが移動します。

_WD_FineElement($sess, $obj, 'click');

6. サンプルコードで動作確認

本サイトのタイトルを変更してみます。タイトルなのでh1ですね。
_WD_FindElement()でメニュー「アプリ一覧」のオブジェクトを取得し、_WD_ElementAction()でクリックしてアプリ一覧ページに飛びます。

#include "wd_core.au3"

; まずクロームの設定を記述
_WD_Option('Driver', 'C:\wd\chromedriver78.exe') ;webdriverを指定
_WD_Option('DriverParams', ' --verbose --log-path=' & @ScriptDir & '\wdlog.log')
_WD_Option('Port', 9515)
$sdesire = '{"capabilities": {"alwaysMatch":{"goog:chromeOptions":{"w3c": true, "args":["--disable-gpu-early-init,"]}}}}'
 
;start 黒い画面(Chrome WebDriver)が立ち上がる
Local $pid = _WD_Startup()
If @error Then
  Msgbox(4096,"error", "webdriverの起動に失敗しました")
  Exit
EndIf
 
;セッションを追加 ChromeDriver経由でChrome新ウィンドウが立ち上がる
$sess = _WD_CreateSession($sdesire)
If @error Then
  MsgBox(4096, "error", "ブラウザ立ち上がりませんでした")
  Exit
EndIf
 
;このサイトを表示する
Sleep(1000)
_WD_Navigate($sess, "https://cfautog.tokyo")
If @error Then
  MsgBox(4096, "error", "指定したUrlを開けませんでした。 extended=" & @extended )
EndIf
Sleep(3000)

$obj = _WD_FindElement($sess, $_WD_LOCATOR_ByXPath, "//*[@id="menu-item-8"]/a/div/div[1]")
If @error Then 
  ConsoleWrite("obj取得失敗")
  Exit
EndIf

$txt = _WD_ElementAction($sess, $obj, "text")
ConsoleWrite("text is " & $txt $ @CRLF )

_WD_ElementAction($sess, $obj, "click")
Sleep(5000)

;chromeを閉じる
_WD_Window($sess, "close")
_WD_DeleteSession($sess)
 
;webdriverを終了
_WD_Shutdown()

コメント

タイトルとURLをコピーしました