【Excel VBA×Selenium】CSSセレクターで要素を取得・クリックする方法｜id・class・属性指定

みなさんこんにちは。

Excel VBAとSeleniumを使ってWebページを操作するとき、要素を取得する方法としてXPathを使用している方も多いかと思います。

SeleniumではXPathだけでなく、CSSセレクターを使ってid・class・属性などから対象要素を指定することもできます。

今回は、FindElementByCssを使ってCSSセレクターから要素を取得し、クリックする方法をご紹介したいと思います。

この記事はこんな人におすすめ

VBA×SeleniumでCSSセレクターを使いたい人
id・class・属性から要素を取得したい人
XPath以外の要素指定方法を知りたい人

CSSセレクターとは

CSSセレクターは、本来Webページのデザインを適用する要素を指定するための記述方法です。Seleniumでも同じ指定方法を使ってWeb要素を検索できます。

SeleniumBasicには、CSSセレクターで最初の一致要素を取得するFindElementByCssが用意されています。

idを指定して要素を取得する

HTMLにid="loginButton"が設定されている場合は、idの前に#を付けて指定します。

Dim target As Selenium.WebElement

'========================================
' idがloginButtonの要素を取得する
' #の後ろにidを指定する
'========================================
Set target = driver.FindElementByCss( _
    "#loginButton" _
)

'取得した要素をクリックする
target.Click

classを指定して要素を取得する

classを指定する場合は、class名の前に.を付けます。

'========================================
' classがprimary-buttonの要素を取得する
'========================================
Set target = driver.FindElementByCss( _
    ".primary-button" _
)

target.Click

同じclassを持つ要素が複数存在する場合は、最初に一致した要素が取得されるため、別の条件を追加して絞り込むと安心です。

属性を指定して要素を取得する

data-actionやnameなどの属性から指定する場合は、角括弧を使用します。

'========================================
' data-action属性がloginの要素を取得する
'========================================
Set target = driver.FindElementByCss( _
    "[data-action='login']" _
)

target.Click

ChromeのデベロッパーツールでCSSセレクターに使用するid・class・属性を確認した画面

複数条件を組み合わせる

タグ名・class・属性を組み合わせると、対象要素をさらに絞り込めます。

'========================================
' buttonタグかつ
' classがprimary-button、
' data-actionがloginの要素を取得する
'========================================
Set target = driver.FindElementByCss( _
    "button.primary-button[data-action='login']" _
)

'対象のボタンをクリックする
target.Click

このように条件を組み合わせることで、同じclassを持つボタンが複数あるページでも対象を指定しやすくなります。