PowerShell Core入門 - 基本コマンドの使い方(228) PowerShellからMicrosoft Edgeを動かす - 入力フィールド

前回までで、PowerShellからMicrosoft Edgeを操作するための準備は整った。今回からはいよいよ、実際の操作方法について取り上げていく。Webブラウザの動作を自動化する方法としてすぐに使える内容なので、適宜、活用していってもらえればと思う。

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

【こちらもオススメ】
【連載】意外と知らないMicrosoft Edgeの便利な使い方

最初にIDやXPathを調べる

WebページのテキストコンテンツはHTMLが使われていることが多い。そしてWebDriver経由で操作できるのはこのHTMLだ。HTMLを操作するには操作対象(要素)を取得する必要がある。入力フィールドに文字列を入力したいなら、そのinput要素を取得する必要があるのだ。

取得するための方法はWebブラウザの開発者ツールを使って調べることができる。

ここではサンプルとして「Signin Template · Bootstrap v5.0」のページを使用する。ページを開くと次のようなパスワードの入力サンプルページが表示される。

Signin Template · Bootstrap v5.0

ここでMicrosoft Edgeの右端にある「…」メニューから「その他のツール」→「開発者ツール」を選ぶか、「Ctrl」＋「Shift」＋「I」を押す。これで次のように開発者ツールが有効になる。

開発者ツールの「⇖」を選択してから、「Email address」と書いてある入力フィールドを選択する。

開発者ツールを有効化し、インスペクタで電子メールアドレスフィールドを選択

開発者ツールの要素ビューに選択した入力フィールドに対応するinput要素が表示されている。これが本体ということになる。この要素を見てみると「id="floatingInput"」という属性を確認することができる。id属性はHTMLでユニークとされている。つまり、この値がわかれば、「この要素にはfloatingInputというidでアクセスできる」ということがわかるわけだ。

さらにXPathというパスを取得する方法も使ってみよう。この状態で開発者ツールの要素ビューで右クリックを行いメニューから「コピー」→「XPathのコピー」を選択する。

要素ビューで右クリックしメニューから「コピー」→「XPathのコピー」を選択

これでシステムクリップボードに次の文字列がコピーされる。これがこの入力フィールドを指し示すXPathという表記になる。

//*[@id="floatingInput"]

開発者ツールではXPathとして2種類の記述が用意されている。先ほど取得した抽象度の高いXPathとトップからフルパスで記述された完全なXPathだ。完全なXPathは「コピー」→「完全なXPathをコピー」から取得できる。たとえば先ほどの入力フィールドの完全なXPathは次のようになる。

/html/body/main/form/div[1]/input

どの表記を使うかは状況による。idが指定されているならそれを使い、idがない場合にはXPathを使い、それもないなら完全なXPathを使うといった感じになる。

パスワードの入力フィールドも同じように調べると、次のようになる。

インスペクタでパスワードフィールドを選択

//*[@id="floatingPassword"]

XPathでアクセスしてもよいし、「id="floatingPassword"」なので「floatingPassword」というidでアクセスしてもよい。

WebDriver経由でMicrosoft Edgeを操作

操作対象となる要素へのアクセスパスがわかったら、早速操作してみよう。まず、作成したPowerShellスクリプトを使ってWebDriver経由でMicrosoft Edgeを起動する。

PS C:\Users\daichi> webdriver_edge_start.ps1
Microsoft Edge WebDriverを起動します。
Microsoft Edge WebDriverの起動処理完了。
PS C:\Users\daichi>

WebDriver経由で起動してきたMicrosoft Edge

Set-SeUrlコマンドレットで先ほどのサンプルページ「Signin Template · Bootstrap v5.0」を開く。

PS C:\Users\daichi> Set-SeUrl -Url https://getbootstrap.jp/docs/5.0/examples/sign-in/
PS C:\Users\daichi>

Set-SeUrlコマンドレットでサンプルページをオープン

PowerShell SeleniumではGet-SeElementコマンドレットで要素を取得する。メールの入力フィールドはidがfloatingInputなので、次のようにGet-SeElementコマンドレットを使うと要素を取得することができる。そしてInvoke-SeKeysコマンドレットに取得した要素を書き「-Key 文字列」のパラメータを指定すると、文字列を入力することができる。

PS C:\Users\daichi> $Element = Get-SeElement -By Id -Value floatingInput
PS C:\Users\daichi> Invoke-SeKeys -Element $Element -Keys 'メール1'
PS C:\Users\daichi>

入力フィールドの取得(idを使う)と文字列の入力

今度は同じことをidではなくXPathで行ってみよう。次のようにGet-SeElementコマンドレットにXPathを指定して要素を取得し、取得した要素に対してInvoke-SeKeysコマンドレットで文字列の入力を行う。

PS C:\Users\daichi> $Element = Get-SeElement -By XPath -Value '//*[@id="floatingInput"]'
PS C:\Users\daichi> Invoke-SeKeys -Element $Element -Keys 'メール2'
PS C:\Users\daichi>

入力フィールドの取得(XPathを使う)と文字列の入力

当然ながら、指定方法が違うだけで得られる要素は同じなので結果は同じだ。先ほど入力した文字列に追加して、今回の文字列が入力されていることがわかる。

もう一つのやり方として、完全なXPathを使ってみよう。今度は次のようになる。

PS C:\Users\daichi> $Element = Get-SeElement -By XPath -Value '/html/body/main/form/div[1]/input'
PS C:\Users\daichi> Invoke-SeKeys -Element $Element -Keys 'メール3'
PS C:\Users\daichi>

入力フィールドの取得(完全なXPathを使う)と文字列の入力

当然ながら結果は同じだ。このように、要素を取得する方法がいくつかあるということを覚えておこう。

同じ要領でパスワードを入力する。

PS C:\Users\daichi> $Element = Get-SeElement -By Id -Value floatingPassword
PS C:\Users\daichi> Invoke-SeKeys -Element $Element -Keys 'パスワード'
PS C:\Users\daichi>

パスワードフィールドの取得(idを使う)と文字列の入力

基本的にidが指定されている場合にはそれを使うのが手っ取り早いし、HTMLの書き換えにも追従できることが多い。完全なXPathはHTMLの書き換えがあると指し示すものがずれてしまう可能性があるので、実は変更に弱い。idが使われている場合にはidを使って要素にアクセスしよう。

処理が終わったらWebDriverとMicrosoft Edgeを終了する。

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

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

PS C:\Users\daichi>

こんな感じでPowerShellからMicrosoft Edgeを操作することことができる。

ページオープンはSet-SeUrl、要素の取得はGet-SeElement、文字列の入力はInvoke-SeKeys

今回のサンプルでは、まずSet-SeUrlコマンドレットでページを開き、Get-SeElementコマンドレットで要素を取得し(idとXPath)、そしてinput要素に対してInvoke-SeKeysコマンドレットで文字列の入力を行えることを示した。3つのコマンドレットを使っただけの操作だが、これだけでもinput要素の入力を自動化できることがわかったと思う。

このように、PowerShellスクリプトからいろいろな操作を自動化することができる。自動化のテクニックを使えるようになると、かなり大きなアドバンテージとなる。特に、セキュリティ関連の処理のように「こまめに作業しなければならないが、生産性とは直接関係のない作業」などは、PowerShellスクリプト化してタスクスケジューラに登録し、自動化すると非常に便利になるはずだ。

付録：webdriver_edge_start.ps1

#!/usr/bin/env pwsh

#========================================================================
# Microsoft Edge WebDriverを起動する
#========================================================================

#========================================================================
# 動作しているMicrosoft Edge WebDriverをすべて終了
#========================================================================
webdriver_edge_stop.ps1

#========================================================================
# Seleniumモジュールがない場合にはインストール
#========================================================================
if (-Not (Get-InstalledModule -Name Selenium 2> $Null)) {
    'Seleniumモジュールをインストールします。'
    Install-Module -Name Selenium -AllowPrerelease -Force
    Get-InstalledModule -Name Selenium
}

#========================================================================
# Microsoft Edge WebDriverを起動
#========================================================================
'Microsoft Edge WebDriverを起動します。'
$Size = '1200,800'
if  (-Not (Start-SeDriver -Browser Edge -Size $Size 2> $Null 3> $Null))
{
    #================================================================
    # Microsoft EdgeとMicrosoft Edge WebDriverのバージョンが一致して
    # いないためにドライバが動作しなかった可能性がある。
    #================================================================

    #================================================================
    # 不要なドライバプロセスを終了
    #================================================================
    webdriver_edge_stop.ps1

    #================================================================
    # Microsoft Edgeのバージョン番号
    #================================================================
    $EdgeDir='C:\Program Files (x86)\Microsoft\Edge\Application\'
    $EdgeVersion=(  Get-ChildItem -Name $EdgeDir                    | 
                    Where-Object { $_ -NotMatch "[a-zA-Z]+" }       )

    #================================================================
    # Microsoft Edge WebDriverダウンロードURLとデプロイ先パス
    #================================================================
    $DriverURL="https://msedgedriver.azureedge.net/$EdgeVersion/edgedriver_win64.zip"

    $SeModVer=(Get-InstalledModule -Name Selenium).Version -replace "-.+$",""
    $DriverDir="$env:HOME\Documents\powershell\Modules\Selenium\$SeModVer\assemblies"
    $DriverDownloadDir="$DriverDir\_download"

    #================================================================
    # WebDriverダウンロード用の一時ディレクトリを作成
    #================================================================
    New-Item        $DriverDownloadDir -ItemType Directory -Force

    #================================================================
    # Microsoft Edgeと同じバージョンのMicrosoft Edge WebDriverを
    # ダウンロード
    #================================================================
    "Microsoft Edge WebDriver version $EdgeVersion をダウンロードします。"
    curl            -get                                            `
                    -o      $DriverDownloadDir\edgedriver_win64.zip `
                    $DriverURL

    #================================================================
    # Microsoft Edge WebDriverをデプロイ
    #================================================================
    "Microsoft Edge WebDriver version $EdgeVersion をインストールします。"
    Expand-Archive  -Path $DriverDownloadDir\edgedriver_win64.zip   `
                    -Destination $DriverDownloadDir                 `
                    -Force

    Copy-Item       -Path $DriverDownloadDir\msedgedriver.exe       `
                    -Destination $DriverDir\msedgedriver.exe        `
                    -Force

    #================================================================
    # WebDriverダウンロード用の一時ディレクトリを削除
    #================================================================
    Remove-Item     $DriverDownloadDir -Recurse -Force

    #================================================================
    # Microsoft Edge WebDriverを起動する
    #================================================================
    if      (-Not (Start-SeDriver -Browser Edge -Size $Size 2> $Null 3> $Null)) 
    {
            #========================================================
            # 原因不明の起動不能
            #========================================================

            #========================================================
            # 不要なドライバプロセスを終了
            #========================================================
            webdriver_edge_stop.ps1

            Exit
    }
}
'Microsoft Edge WebDriverの起動処理完了。'

webdriver_edge_stop.ps1

#!/usr/bin/env pwsh

#========================================================================
# Microsoft Edge WebDriverを終了する
#========================================================================

#========================================================================
# WebDriverプロセスを終了
#========================================================================
if  (Get-Process -Name msedgedriver 2> $Null) 
{
    '動作しているMicrosoft Edge WebDriverを終了します。'
    Get-Process -Name msedgedriver 2> $Null

    # Microsoft Edge WebDriverを終了
    Stop-SeDriver 2> $Null

    # まだ動作しているほかのMicrosoft Edge WebDriverを終了
    if      (Get-Process -Name msedgedriver 2> $Null) 
    {
            Get-Process -Name msedgedriver 2> $Null | Stop-Process
    }

    '動作しているMicrosoft Edge WebDriverの終了処理完了。'
}