PowerShellからMicrosoft Edgeを動かす - ラジオボタン

Webページでは何かを選択する際にラジオボタンのUIが使われることも多い。今回はPowerShellからこのラジオボタンを操作する方法について取り上げる。

→連載「PowerShell Core入門 - 基本コマンドの使い方」の過去回はこちらを参照。

ラジオボタンを操作する

今回サンプルとして使うサイトも前回と同じ「Checkout example · Bootstrap v5.0」だ。

• Checkout example · Bootstrap v5.0

• Checkout example · Bootstrap v5.0の下の方にあるラジオボタンを使う

前回と同じようにMicrosoft Edgeの開発者ツールを開いて(メニュー「その他のツール」→「開発者ツール」または「Ctrl」＋「Shift」＋「I」)、ラジオボタンのXPathを調べておく。

• Microsoft Edgeの開発者ツールでラジオボタンのXPathを調べる

ラジオボタンのクリック操作まとめ

ラジオボタンのクリック操作については前回取り上げているので、その内容を次にまとめておく。

◆Microsoft Edge WebDriverの起動とサンプルページのオープン

PS C:\Users\daichi> webdriver_edge_start.ps1
Microsoft Edge WebDriverを起動します。
Microsoft Edge WebDriverの起動処理完了。
PS C:\Users\daichi> Set-SeUrl -Url https://getbootstrap.jp/docs/5.0/examples/checkout/
PS C:\Users\daichi>

◆1つ目のラジオボタンをクリック

PS C:\Users\daichi> $Element = Get-SeElement -By XPath -Value '//*[@id="credit"]'
PS C:\Users\daichi> Invoke-SeClick -Element $Element -Action Click
PS C:\Users\daichi>

• 1つ目のラジオボタンをクリックした結果

◆2つ目のラジオボタンをクリック

PS C:\Users\daichi> $Element = Get-SeElement -By XPath -Value '//*[@id="debit"]'
PS C:\Users\daichi> Invoke-SeClick -Element $Element -Action Click
PS C:\Users\daichi>

• 2つ目のラジオボタンをクリックした結果

◆3つ目のラジオボタンをクリック

PS C:\Users\daichi> $Element = Get-SeElement -By XPath -Value '//*[@id="paypal"]'
PS C:\Users\daichi> Invoke-SeClick -Element $Element -Action Click
PS C:\Users\daichi>

• 3つ目のラジオボタンをクリックした結果

◆Microsoft EdgeとWebDriverの終了

PS C:\Users\daichi> webdriver_edge_stop.ps1
動作しているMicrosoft Edge WebDriverを終了します。

 NPM(K)    PM(M)      WS(M)     CPU(s)      Id  SI ProcessName
 ------    -----      -----     ------      --  -- -----------
     23     8.14      23.81       0.03   18164   5 msedgedriver
動作しているMicrosoft Edge WebDriverの終了処理完了。

PS C:\Users\daichi>

Microsoft Edge WebDriverの起動と終了に使ったPowerShellスクリプトは稿末に掲載しておくので、そちらをご参照いただければと思う。

ラジオボタンはグループで使うもの

ラジオボタンは単一で使われることはなく、複数のラジオボタンでグループ化して使われる。サンプルページのラジオボタン部分を調べてみる。

• ラジオボタン周辺のHTML

それぞれのラジオボタンは次のような要素として記述されている。

◆1つ目のラジオボタンを表すinput要素

<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>

◆2つ目のラジオボタンを表すinput要素

<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>

◆3つ目のラジオボタンを表すinput要素

<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>

「name="paymentMethod"」という記述に注目だ。この属性がグルーピングの対象となっており、あるラジオボタンを選択すると、同じグループに所属している(同じname属性が指定されている)ラジオボタンの選択が解除される。グループの中で常に1つだけ選択されている、それがラジオボタンだ。

このようなボタンになっている場合、逆に現在どのボタンが選択されているのかをPowerShell側から知る必要が出てくることがある。今回はこの情報を得る方法を説明する。