【WinActorの使い方】Xpathの使い方を習得して、ブラウザ操作を安定稼働させよう

WinActorでブラウザ操作を自動化する際、Xpathは必須知識です。
Xpath ＜XML Path Language＞とは、HTMLドキュメントの中から、ボタンやインプットボックスなどの要素を見つけるための住所のようなものです。

過去コラム、「【WinActorを活用しよう！】残業ゼロも夢じゃない？　「ブラウザ操作」をマスターして交通費精算業務を自動化！」ではWinActorを使った基本的なブラウザ操作について説明しました。本コラムでは、WinActorでWebブラウザを操作する応用編として、より高度なXpathの指定方法について解説します。

WinActorでXpathを自分で書くメリット

前回のコラムでは、WinActorでWebブラウザを操作する際、Xpathの取得を　「デベロッパーツール^※を開く」⇒「ページ内の要素を選択」⇒「Xpathのコピー」　で行いました。
※開発者用の検証ツール（デバッグツール）のこと。WebサイトのHTMLやCSSを仮編集したり、ページのパフォーマンスやエラーを調べたり、スマートフォン表示をシミュレートしたりすることができる。各ウェブブラウザの機能に含まれている。開発者ツールとも。

【WinActorの使い方】残業ゼロも夢じゃない？　「ブラウザ操作」をマスターして交通費精算業務を自動化！

この方法でもWinActorのシナリオは動くのですが、1点、課題があります。

上記方法でWinActorによる自動化を行っても「コントロールが動的に変化した場合、同じXpathで操作が効かなくなる」ことがあるという点です。

つまり、Webページの改修や環境の変化によって、急にWinActorのシナリオにエラーが起きる、といったケースが発生するということです。

具体的な例を挙げて説明していきましょう。

例えば、下記の弊社ホームページにて「NHK World Japanにロボフィスの記事が掲載されました」の「お知らせ」をクリックさせるシナリオをWinActorで作成したい場合、「Xpathのコピー」で取得できるXpathは以下です。

//*[@id=”main_content”]/div/div/div[10]/div/div[2]/dl[1]/a

『dl[1]』に当たる箇所は、『お知らせの中の「1」つ目』という意味。

上記のXpathを指定すると「お知らせ」（1行目）に飛びます。

仮に「お知らせ」が更新されて、一番上の行に新たな情報が加わった場合、本来クリックしたい情報「NHK World Japanにロボフィスの記事が掲載されました」は2行目にずれ込むため、上記のXpathではほしい情報に飛ぶことができなくなります。

同様に、ページが改修されたり、ログインするアカウントが異なったりする場合も、「Xpathのコピー」の手法ではエラーとなる可能性があります。

そういった環境の変化に耐えうる、安定性の高いシナリオをWinActorで作成するために、「Xpathのコピー」ではなく「Xpathを自分で書く」ことが有効になります。

Xpathの理解に必要なHTML

Webアプリケーションのボタンや入力ボックスは、HTMLと呼ばれる言語で構成されています。

HTML＜”HyperText Markup Language＞とは、Webページの記述言語のことです。Xpathを記述する際にはディベロッパーツールを起動させ、Webページの骨組みや構造をある程度理解することが求められます。そのため、Webブラウザを操作するためにXpathを記述するのなら、HTMLの基本的な考え方を理解しておく必要があります。

① 基本構造

HTMLは要素を階層（ツリー構造）で表記することで構成されます。フォルダ・ファイル構成と同様と考えるとイメージしやすいでしょう。
※文書やデータの意味や構造を記述するためのマークアップ言語の一つ。データ記述用の言語であり、Webを装飾するための言語であるHTMLとは似ているが用途が異なる。

② HTMLの名称に関して

デベロッパーツールでHTMLのソースコードを確認すると、以下のような要素の集合で構成されているのが分かります。それぞれの部分の名前について覚えていきましょう。

Xpathを手書きする際は、これから学習する内容を使用して、対象となる要素を特定します。

③ 代表的なタグに関して

それぞれの要素はタグによって役割が異なります。
例えば、別のURLに飛ぶためのリンクの多くは<a>タグで始まる要素で構成されています。

以下が、特に自動化で使用する代表的なタグです。

構造系	コントロール系	テーブル系
＜p＞：段落を表す	＜a＞：リンクを設定する	＜table＞：表を作る
＜div＞：特定の範囲をグループ化する（改行あり）	＜button＞：ボタンを作成する	＜th＞：表の見出し（ヘッダ）
＜span＞：特定の範囲をグループ化する（改行なし）	＜input＞：入力欄を作成する	＜tr＞：表の行
＜li＞：リストの項目を表す	＜select＞：セレクトボックスを作成する	＜td＞：表の列
＜iframe＞：インラインフレームを作成する	＜img＞：画像を表示する	＜h●＞：見出し

Xpathの記法

以上を踏まえて、Xpathの記法に関して学んできます。

例として、以下の弊社コーポレートサイトのトップページにある『DX・RPA初心者』の表記をクリックさせる方法を考えてみましょう。

該当のコントロールの要素（HTMLソース上の1区分）はデベロッパーツールで以下の通りです。

<span class=”swl-fz u-fz-l”>DX・RPA初心者</span>

先ほどの「HTMLの名称に関して」を参照すると以下の事が言えると思います。

以上を踏まえて、Xpathの記法を確認していきましょう。

①ルート要素から全ての要素を指定
※「完全なXpathのコピー」で得られる方法

【Xpath】
/html/body/div[1]/div[5]/main/div/div/div[5]/ul/li[2]/button/span

【説明】
「完全なXpathのコピー」では、HTMLの先頭から、1つずつ要素を選択して対象の要素までの道順を全て記載します。

例えば上記のXpathは何を記しているかと言うと、「html」フォルダ内の、「body」フォルダ内の、「div」フォルダ内の、…「button」フォルダ内の、「span」ファイルを指定している、といったイメージです。ファイルパスの考え方と同様と考えれば分かりやすいでしょう。

ただしWinActorをはじめとするRPAでこれを使うメリットはありません。「コピー」をする場合は②の方法を選んでください。

②最短の[属性idを持つ要素]からの相対位置での指定
※「Xpathのコピー」で得られる方法

【Xpath】
//*[@id=”main_content”]/div/div/div[5]/ul/li[2]/button/span

【説明】
これが最も基本的なXpathの取得方法となります。
①の方法と比較すると、以下の塗り部分が差し変わっています。

1) /html/body/div[1]/div[5]/main/div/div/div[5]/ul/li[2]/button/span
2) //*[@id=”main_content”]/div/div/div[5]/ul/li[2]/button/span

//*[@id=”main_content”]の意味は、「属性idの値が”main_content”の要素」であるということです。

[属性id]は原則として、ページ内で一意（重複しない）な値が与えられます。そのため、[属性id]で要素を指定すると、必ず一つの要素に絞り込むことができます。また、頭に”//”を置く事で、そこまでの階層の記述を省略することができます。

その仕組みを利用して、「Xpathのコピー」では、取得する要素に最も近い階層の[属性idを持つ要素]　を基準として、そこからの相対的な位置を記述することで、対象を指定します。
※上の階層に[属性idを持つ要素]が存在しない場合は、①)と同様、ルート要素からの指定となります。

③ タグと属性（と属性値）で指定

【Xpath】
//a[@class=”swl-fz u-fz-l “]

【内容】
属性[class]の属性値が[swl-fz u-fz-l]のタグ[a]

【説明】
Xpathではタグ（今回の場合は”a”）の後に[ ]を置く事で、指定するタグの条件をより細かく設定することが出来ます。

また、[ ]内で、属性およびその値を指定する場合は、[@属性=”属性値”]という書き方になります。

④ タグとテキストで指定

【Xpath】
//a[text()=”DX・RPA初心者”]

【内容】
テキスト（画面上に表示される文字列）が[DX・RPA初心者]のタグ[a]

【説明】
③と似ていますが、今回は属性ではなく、テキストを用いて指定しています。テキストで指定する場合は[text()=”テキスト”]という書き方になります。

⑤ 含む一致で指定　★ステップアップ

【Xpath】
//a[contains(@class,”fz”)]

【内容】
属性[class]の属性値が[fz]を含むのタグ[a]

【説明】
もう一歩上級者向けの指定方法です。

③④では属性値およびテキストが指定の値と完全に一致していることを条件としていましたが、[contains]という関数を指定することで、指定の値が“含まれている”という指定方法にできます。

その場合、[contains(@属性,”属性値”)]あるいは[contains(text(),”テキスト”)]という書き方になります。

まとめ

このようにWinActorでWebブラウザ操作を自動化する際、Xpathを手書きすることで属性やテキストなど、システム改修による変更の可能性が低い情報を使用して、クリック操作をコントロールすることができます。

なお、今回のコラムでは比較的簡単、かつ使用頻度の高い記法に絞りましたが、これ以外にも子・孫要素を基準に親要素を指定したり、Xpath内で四則演算をしたりする等方法があります。Xpathは実はとても奥が深いのです。

その分、使いこなせると自動化の幅がグンと広がると思いますので、皆様もぜひ学びを深めて、WinActorを使ったさらなる業務効率化を目指してみてください。

もしWinActorの学習中、わからない点やつまずいた場合は、外部の研修を受けるのもいいでしょう。
ロボフィスでは、WinActorをはじめとするRPAツールやデジタルツールを社内で内製化していただくため、社内研修の実施やサポート、教材作成なども行っています。ヒアリングは無料で行っていますので、WinActorでお困りの際はぜひお気軽にご相談ください。