最終更新日:2022/11/07

こさい
こさい

こんにちは。完全自動化研究所の小佐井です。

このレクチャーではカスタムセレクタービルダーを使いこなしてセレクターを操作するテクニックについて解説します。

検証バージョン
OS:Windows10
Power Automate for desktopバージョン:2.22

UI要素を認識するためのセレクターの中に変数を組み込みます。

では、実際にフローを作ってみましょう!

準備しよう

こさい
こさい

まずは準備から始めてください。サンプルWebサイトを操作してください。

以下の操作を手作業で行ってください。

サンプルWebサイトを操作するフローを作成している場合は、そのフローを利用しても構いません。

STEP1 サンプルWebサイトを表示する

Microsoft Edgeを起動して、サンプルWebサイトを開いてください。

サンプルWebサイトのURL:http://marukentokyo.jp/sample_website/

【図1】サンプルWebサイトの表示

STEP2 ログイン操作を行う

[ユーザーID]に「login@marukentokyo.jp」と入力してください(図2❶)。[パスワード]に「password」と入力してください(図2❷)。[ログイン]をクリックしてください(図2❸)。

【図2】サンプルWebサイトのログイン操作

【Memo】ログインに失敗した場合

3分の1の確率でログインに失敗する仕様になっています。エラーが表示された場合は、ログインに成功するまでログイン操作を行ってください。

【図3】サンプルWebサイトのログイン操作(エラー時)

STEP3 [読みました]をクリックする

ログインに成功すると[お知らせ]画面に遷移するので、下にスクロールして(図4❶)、[読みました]をクリックしてください(図4❷)。

【図4】[読みました]をクリック

STEP4 [商品マスタ]をクリックする

[メニュー]画面に遷移するので、[商品マスタ登録]をクリックしてください(図5❶)。

【図5】[商品マスタ登録]をクリック

商品マスタ登録画面が表示されます(図6)。

【図6】商品マスタ登録画面

フローを作成しよう

こさい
こさい

ここからは実際にフローを作成してください。

準備が完了したのでフローを作成しましょう。

これから作成するフローを実行すると、図7のように商品マスタ登録画面に値が入力されます。

【図7】フローの実行結果

STEP1 フロー[高度なUI認識テクニック]を作成する

新しいフロー[高度なUI認識テクニック]を作成してください(図8)。

【図8】フロー[高度なUI認識テクニック]のフローデザイナー

STEP2 [変数の設定]アクションを追加する

[変数]アクショングループを開いて(図9❶)、[変数の設定]アクションを追加してください(図9❷)。

【図9】[変数の設定]アクションの追加

[変数の設定]ダイアログが開くので、[変数]を[ary1]に変更し(図10❶)、[値]に「%[‘A001’, ‘Item01’, ‘MK01’, ‘10000’, ‘test’]%」と入力してください(図10❷)。

設定が完了したら[保存]をクリックしてください(図10❸)。

【図10】[変数の設定]アクションの設定

このアクションを実行することにより、リスト型の変数[ary1]が生成されます(図11)。

【図11】リスト[ary1]の値

STEP3 [新しいMicrosoft Edgeを起動]アクションを追加する

[ブラウザー自動化]アクショングループを開いて(図12❶)、[新しいMicrosoft Edgeを起動]アクションを[変数の設定]アクションの後に追加してください(図12❷)。

【図12】[新しいMicrosoft Edgeを起動]アクションの追加

[新しいMicrosoft Edgeを起動]ダイアログが開くので、[起動モード]のドロップダウンリストから[実行中のインスタンスに接続する]を選択してください(図13❶)。

[Microsoft Edgeタブに接続する]のドロップダウンリストから[タイトルを使用]を選択してください(図13❷)。

[タブのタイトル]には自動的に図13❸のようにタイトルが入力されます。

設定が完了したら[保存]をクリックしてください(図13❹)。

【図13】[新しいMicrosoft Edgeを起動]アクションの設定

STEP4 [変数の設定]アクションを追加する

[変数]アクショングループを開いて(図14❶)、[変数の設定]アクションを[新しいMicrosoft Edgeを起動]アクションの後に追加してください(図14❷)。

【図14】[変数の設定]アクションの追加

[変数の設定]ダイアログが開くので、[変数]を[LoopIndex]に変更し(図15❶)、[値]に「0」と入力してください(図15❷)。

設定が完了したら[保存]をクリックしてください(図15❸)。

【図15】[変数の設定]アクションの設定

STEP5 [For each]アクションを追加する

[ループ]アクショングループを開いて(図16❶)、[For each]アクションを[変数の設定]アクションの後に追加してください(図16❷)。

【図16】[For each]アクションの追加

[For each]ダイアログが開くので、[反復処理を行う値]に「%ary1%」と入力し(図17❶)、[保存]をクリックしてください(図17❷)。

「%ary1%」の入力は{X}(変数の選択)を使うと入力間違いを防ぐことができます。

【図17】[For each]アクションの設定

ここまでのフローを確認してください(図18)。

【図18】ここまでのフロー

STEP6 [Webページ内のテキストフィールドに入力する]アクションを追加する

[ブラウザー自動化⇒Webフォーム入力]アクショングループを開いて(図19❶❷)、[Webページ内のテキストフィールドに入力する]アクションを[For each]アクションと[End]アクションの間に追加してください(図19❸)。

【図19】[Webページ内のテキストフィールドに入力する]アクションの追加

[Webページ内のテキストフィールドに入力する]ダイアログが開くので、[Webブラウザーインスタンス]に[%Browser%]が設定されていることを確認してください(図20❶)。

[UI要素]のドロップダウンリストをクリックし(図20❷)、表示されたメニューの[UI要素の追加]をクリックしてください(図20❸)。

【図20】[Webページ内のテキストフィールドに入力する]アクションの設定

フローデザイナーが最小化され、UI要素ピッカーが表示されます(図21❶)。

サンプルWebサイトの[商品コード]の入力ボックスを[Ctrl]キーを押しながらクリックしてください(図21❷)。

【図21】UI要素ピッカーとサンプルWebサイト

UI要素ピッカーが最小化され、フローデザイナーが表示されます。

[Webページ内のテキストフィールドに入力する]ダイアログの[UI要素]に[商品コード]の入力ボックスのセレクターが入力されていることを確認してください(図22❶)。

[テキスト]に「%CurrentItem%」と入力してください(図22❷)。

「%CurrentItem%」の入力は{X}(変数の選択)を使うと入力間違いを防ぐことができます。

設定が完了したら[保存]をクリックしてください(図22❸)。

【図22】[Webページ内のテキストフィールドに入力する]アクションの設定

STEP7 [変数を大きくする]アクションを追加する

[変数]アクショングループを開いて(図23❶)、[変数を大きくする]アクションを[Webページ内のテキストフィールドに入力する]アクションの後に追加してください(図23❷)。

【図23】[変数を大きくする]アクションの追加

[変数を大きくする]ダイアログが開くので、[変数名]に「%LoopIndex%」と入力し(図24❶)、[大きくする数値]に「1」と入力してください(図24❷)。

設定が完了したら[保存]をクリックしてください(図24❸)。

「% LoopIndex %」の入力は{X}(変数の選択)を使うと入力間違いを防ぐことができます。

【図24】[変数を大きくする]アクションの設定

フローが完成しました。フローを確認してください(図25)。

【図25】完成したフロー

セレクターを編集しよう

こさい
こさい

いよいよセレクターを編集しましょう。

 [Webページ内のテキストフィールドに入力する]アクションの[UI要素]にサンプルWebサイトの[商品コード]入力ボックスを指定しました。

このUI要素をループ処理の中で動的に変更しながら、[商品名]入力ボックス、[メーカーコード]入力ボックス…と、[備考]までのすべての入力ボックスを指定できるように変更します。

少し難しいですが、次の手順通りに設定してください。

STEP1 UI要素ペインを開く

フローデザイナーの[UI要素]をクリックしてください(図26❶)。UI要素ペインが開きます(図26❷)。

【図26】UI要素ペイン

STEP2 カスタムセレクタービルダーを開く

UI要素[Input text ‘itemcd’]の右側の3点アイコンをクリックしてください(図27❶)。メニューが表示されるので[編集]をクリックしてください(図27❷)。

【図27】編集をクリック

カスタムセレクタービルダーが表示されます(図28)。カスタムセレクタービルダーではセレクター(UI要素を特定する文字列のこと)を編集することができます。

【図28】カスタムセレクタービルダー

STEP3 セレクターを編集する

[要素]を一番下までスクロールする(図29❶)。12番目の要素をクリックし(図29❷)、[id]のチェックを外してください(図29❸)。

[セレクターをプレビューする]に「input」と表示されます。

【図29】セレクターの編集-1

10番目と11番目の要素にチェックを付けてください(図30❶❷)。[セレクターをプレビューする]に「tr:eq(0) > td:eq(1) > input」と表示されます。

【図30】セレクターの編集-2

[テキストエディター]を[有効]にしてください(図31❶)。テキストエディタ―に表示が切り替わります。

【図31】セレクターの編集-3

STEP4 テキストエディターを操作する

「tr:eq(0)」の「0」を消してください(図32❶)。[{X}変数の選択]をクリックしてください(図32❷)。

【図32】テキストエディターの操作-1

選択可能な変数の一覧が表示されるので、[LoopIndex]をダブルクリックしてください(図33❶)。

【図33】テキストエディターの操作-2

「tr:eq(%LoopIndex%) > td:eq(1) > input」と表示されていることを確認して、[保存]をクリックしてください(図34❶)。

【図34】テキストエディターの操作-3

これですべてのフロー作成作業は完了です。

実行しよう

こさい
こさい

フローを実行してください。

サンプルWebサイトが選択されます。

商品マスタ登録画面の[商品名]入力ボックス、[メーカーコード]入力ボックス…と、[備考]までのすべての入力ボックスにリスト[ary1]の値が入力されます。

図35の画面になったところでフローが終了します。

【図35】フローの実行結果

まとめ

本レクチャーでは、カスタムセレクタービルダーを使ってセレクター内に変数を組み込む方法を解説しました。

フローを実際に作ってみると、意味がより理解できたと思います。

動的にセレクターを変動させることで、1つのアクションで複数のUI要素をコントロールできました。

柔軟なオートメーションが実現できましたね。

利用する場面も多いので、活用してください。

関連する記事


さらにPower Automate for desktopに詳しくなるには

まとめてPower Automate for desktopの知識を身に付けたい方は、ぜひ書籍をお読みください。

人気記事ランキング(Power Automate for desktop)

1 2 3 4 5 6 7 8 9 10