PowerShellからMicrosoft Edgeを動かす - 入力フィールド

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

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

最初に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でアクセスしてもよい。