WinActorシナリオ作成の基礎：ChromeでWEBページのXpathを取得し、WEBページにログインする
目次
ChromeとEdgeで、構造解析を用いた自動化が可能に
WinActorでは、従来WEBページの構造解析による操作はIEにしか対応しておらず、Google Chrome等のブラウザでは画像マッチングでの操作となっていました。
しかし、2018年にバージョン5.1にアップデートされた際、「ブラウザ操作」のライブラリが強化され、Google Chrome及びMicrosoft Edgeの操作を、要素を用いた構造解析にて自動化できるようになりました。画像マッチングは環境に左右される繊細な認識方法で、思い通りの動作をしない事もしばしばあったのですが、構造解析を用いた操作ですと、正確性は向上します。
ブラウザ操作に関しては、WinActorの付属マニュアルとして” WinActor_ブラウザ操作シナリオ作成マニュアル”という専用の説明書が付属していますが、個別のライブラリの説明となっているため、イメージが湧きづらい方もいらっしゃるのではないでしょうか。
本記事では実際に一連の設定を通じてWEBシステムの操作を自動化する手順についてご紹介いたします。
使用するライブラリ
今回利用する、新規追加された「23_ブラウザ関連」のフォルダ内にあるライブラリは下記の4つです。
・「ブラウザ起動」
・「ページ表示」
・「値の設定」
・「クリック」
この4つで大抵の操作は可能になります。
それ以外のライブラリでは、「11_ウィンドウ関連 ウィンドウの最大化」を用います。
順を追ってご説明します。
ブラウザ起動
ブラウザ操作の自動化を行うためには、最初に「ブラウザ起動」のライブラリを使ってブラウザを立ち上げる必要があります。
「ブラウザ起動」のライブラリをダブルクリックしてプロパティを見てみると、設定項目として、「ブラウザ名」「ブラウザ種類」「待機時間」の3つが用意されています。
画像：1.ブラウザ起動プロパティ空
筆者が最初にブラウザ関連のライブラリを使用してシナリオ作成をした際は、プロパティにある「ブラウザ名」と「ブラウザ種類」の2つはどう違うのか？と少々混乱しました。
「ブラウザ名」は、シナリオ作成者が自由に名付ける、このシナリオで今後利用するブラウザに作成者が任意でつける名称(値または変数)です。
「ブラウザ種類」は、ChromeかEdgeの2つから選ぶ仕様になっており、実際のブラウザのソフトウェア名です。
「ブラウザ名」を規定する理由は、Chromeであれば※複数立ち上げて制御することができるので、「値→Chrome1」と「値→Chrome2」を交互に操作することも想定した作りになっているのでしょう。他のライブラリで、ウィンドウ識別名を指定するのに近いかと思います。以降のシナリオでも、どの「ブラウザ名」に対するアクションか、というのを毎回設定します。
※Edgeは「複数起動する事は出来ない」とマニュアルに明記されています。
毎回、ブラウザ操作関連のライブラリのプロパティを設定するたびに「ブラウザ名」を入力する必要があるので、値より変数にしておいたほうが打ち間違いなく実行でき良いかと思いますが、今回は分かりやすいよう画像のように、「値→Chrome」としています。
画像：2.ブラウザ起動プロパティ入
待機時間に関しては、以降の操作で目的の要素を検索するまでに待機する時間を規定する項目です。WEBページは回線速度あるいはサーバ側のパフォーマンス等によって表示されるまでに時間がかかる場合があるので、それを調整するためにあると考えられます。
空欄だと10秒なので、表示が遅いようであればもっと長い時間を設定したり、高速な環境であれば短めに設定して、個別の待機ライブラリで待ち時間を調整したり、いずれにせよシナリオのチューニングに使う項目です。今回は空欄とします。
「ブラウザ起動」のライブラリ設定が完了したので、試しにシナリオを実行してみます。
「ブラウザ起動」を利用して起動すると、
Chromeは自動テストソフトウェアによって制御されています
という注釈がChrome上に表示されます。
画像：3.自動テストソフトウェアによって制御されています
RPAの製品はシステム開発用の自動テストツールをベースに製品化されているものが多いのですが、ブラウザから見るとテストツールと同じ、という事でしょう。
ブラウザが開いたら、ウィンドウの幅が一定でないことによりWinActorが誤動作しないように、のライブラリを用いて、Chromeを最大化します。これは「23_ブラウザ関連」内のライブラリではないので、説明は割愛します。下記画像を参照ください。
画像：4.ウィンドウ最大化
ページ表示
続いて操作したいWEBページを表示する「ページ表示」のライブラリを使います。
画像5.ページ表示プロパティ空
「ページ表示」のライブラリの設定項目は下記の2つです。
・「ブラウザ名」
・「URL」
「ブラウザ名」で先程設定したChromeと入力します。URLは表示したいページを値または変数で指定します。ファイル操作のライブラリ等でもURLは開けますが、自動実行を行いたい場合は、最初にご説明したとおり「ブラウザ起動」で規定したブラウザを指定し続ける必要があるので、「23 ブラウザ関連」内の「ページ表示」のライブラリを使います。
画像：6.ページ表示プロパティ入
今回は当社WEB ERP「MA-EYES」のデモサイトを用いてご説明します。
こちらのページで、ログインまでに必要な操作は4つです。
・規約にチェックを入れる（クリックする）
・IDを入力する
・パスワードを入力する
・ログインボタンをクリックする
画像：7.デモサイト
操作は4つですが、「クリック」が2つと「値の設定」が2つですので、2種類の操作ということになります。
それぞれ、実例を用いてご説明していきます。
クリック（Xpath取得）
ライブラリから 「23_ブラウザ関連→クリック」を設置します。
ライブラリ「クリック」のプロパティはこの様になっています。
・ブラウザ名
・Xpath
画像：8.クリックプロパティ空
ここで初めて、この文章のタイトルにもなっているXpathが登場します。
XpathとはXML Path Languageの略ですが、簡単に言うとWEBページ内での住所のようなもので、どの位置をクリックするか指定するための情報です。
XpathはWinActorではなくChromeの機能を使って取得します。
まず、Chrome上で右クリックを押し、表示されるポップアップの一番下にある「検証」を押します。
画像：9.検証1
すると、chrome画面の右側にデベロッパーツール（デベロッパー=開発者）が表示されています。
こちらの”Elements”つまり”要素”に表示されている部分から、Xpathを取り出します。
画像：10.デベロッパーツール
初期設定では、ページ右側に要素の表示が出ていますが、そうするとブラウザの本画面が狭くなり、表示が調整されてXpathが変わってしまうサイトがあるので、デベロッパーツールのウィンドウを下部に持っていき、外面の左右幅をシナリオ実行時と同じにしておきます。
検証ウィンドウの表示場所は、下記から変更することが出来ます。
画像：11.デベロッパーツールの表示場所を変える
デベロッパーツール右上の「⁝」をクリックし、表示場所を選びます。
画像：12.デベロッパーツールが下に移動
デベロッパーツールが下部に表示されました。大きすぎて画面が見えない場合は、WEB画面とデベロッパーツールの境界線をクリックしてWEB画面を広げましょう。
準備ができたら、Xpathを取得していきます。
クリックしたい場所にカーソルを合わせ、再び「検証」を押すと、その場所に応じた要素がデベロッパーツールに表示されています。正しく選択されているかどうかは、ブラウザ画面で対応する場所に表示が出ていることで確かめられます。
画像：13.検証2
続いて、検証ウィンドウ側で、要素が選択された状態で右クリックします。
Copy→Copy Xpath
画像：14.Copy Xpath
そうすると、クリップボードにXpathがコピーされますので、
プロパティの項目「Xpath」に貼り付けます。
画像：15.クリックプロパティ入
これで、規約にチェックを入れる（クリックする）という動作となります。
試しにこの部分だけを実行すると、チェックを入れる、外す、という繰り返しが行われます。
値の設定
続いて、「値の設定」を利用してIDとパスワードを入れていきます。
Xpathの設定は「クリック」の際と同様ですが、プロパティを見ると値を設定する項目がありますので、設定したい値あるいは変数を入力します。
この場合はログインIDとなります。値または変数を指定します。
画像：16.値の設定プロパティ入
同様に、「値の設定」でパスワード、「クリック」でログインボタンのクリックを設定していくことで、WEBサイトへのログインまで設定することが出来ます。
一連の流れを作成すると、下記のシナリオとなります。
画像：17.完成シナリオ
シナリオ再生動画も御覧ください。
シナリオ再生動画
今回は、WEBシステムにログインするまでを簡単に紹介しました。
その他、「23 ブラウザ関連」でよく使われそうなライブラリとしては「リスト選択」「表の値取得」等がありますが、基本的にブラウザを指定し、Xpathを取得する流れは変わりません。
既存の画像マッチングを用いて作成したシナリオを、「23_ブラウザ関連」のライブラリに置き換えることで正確性を向上させる事ができますので、お試しください
筆者プロフィール
- ビーブレイクシステムズ
- 営業職。カレーが好きです。得意技は福岡日帰り出張。
最新記事一覧
ERP2023年12月19日ERP×RPA事例：システム連携に伴うExcel加工の自動化
コーポレートIT2023年10月2日システム開発業で、請負契約を管理するためのシステムに必要な機能について
コーポレートIT2023年9月15日システム開発業で、SESを管理するためのシステムに必要な機能について
プロジェクト管理2023年8月16日プロジェクト原価計算のみを行うシステムの選定・導入ポイント
業務の自動化を実現する「WinActor」
製品サイトではWinActorのシナリオを実行した動画などを数多くご紹介しています。ぜひご覧ください。
