shikumika’s diary

日々の事務作業で手間なことを簡単にできる仕組み(自動化、方法など)、困ったことの解決方法を調べた備忘録

【Power Automate】Webページにログインを自動化(kintoneの事例)

Power Automate Desktopで、WebページにIDとパスワードを入力し、ログインを自動化する方法です。

PC業務でWebページにある情報を編集、更新作業の自動化を想定し、今回はWebブラウザの起動、ログインまでのフローです。

なお、API等が利用できない環境という前提で、WEB画面を直接操作する事例です。

内容:

アウトプットイメージ

自動化する操作は、次のとおりです。

  1. Microsoft Edgeを起動し、Webサービス(kintone)のURLを表示
  2. ログイン名の入力
  3. パスワードの入力
  4. 「ログイン」ボタンをクリック

 

Power Automate Desktopの設定イメージは次のとおりです。

Edgeの起動からログインまで4ステップ

PowerAutomateDesktopの設定イメージ

なお、確認したツールは次のとおりです。

Power Automate Desktop(バージョン 2.41.170.24032)

Microsoft Edge (バージョン 121.0.2277.128)

設定手順

1.編集画面を起動する

Power Automate  Desktopのトップ画面にある「新しいフロー」をクリックし、フローを作成し、編集画面を起動する。 

新規にフローを作成した段階で、アクションは何もない

編集画面(新規開始時)

フローの新規作成などの基本は以下に概略説明があります。

www.microsoft.com

2.ブラウザ拡張機能(Microsoft Edge)の有効化

Power Automate  Desktopで、初めてWeb操作を実施する場合は、ブラウザ拡張機能(Microsoft Edge)を有効化しておく。

[ツール]-[ブラウザー拡張機能]ー[Microsoft Edge]からインストール、有効化する。

[ツール]-[ブラウザー拡張機能]ー[Microsoft Edge]のクリック

ブラウザ拡張機能(Microsoft Edge)の設定

3.「新しいMicrosoft Edgeを起動」の追加

画面左側にある「ブラウザ自動化」メニューの中から「新しいMicrosoft Edgeを起動」アクションを追加する(ドラッグアンドドロップで画面中央へ)。

設定画面は次のとおりで、初期URLにログインページのURLを入力する。

ログインページのURLを設定する

「新しいMicrosoft Edgeを起動」の設定イメージ

4.Microsoft Edgeでログインページで表示しておく

この後の手順で、ログイン名とパスワードの入力欄をMicrosoft Edgeの画面で指定するため、ログインページを表示しておく。

5.ログイン名を入力する設定

ログインページのログイン名にテキストを入力する設定を次のとおり実施する。

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

画面左側にある「Webページ内のテキストフィールドに入力する」アクションを追加する(ドラッグアンドドロップで画面中央へ)。

UI要素や入力するテキストを設定できる画面が表示される

「Webページ内のテキストフィールドに入力する」の設定画面
「UI要素の追加」をクリック

テキストを入力する場所を指定するため、次のとおり「UI要素」右側のプルダウンをクリック後、「UI要素の追加」をクリックする。

UI要素の右側のプルダウンをクリックし、UI要素の追加をクリックする

「UI要素の追加」をクリック
ログイン名のUI要素を選択する

前手順で「UI要素の追加」をクリックすると、「UI要素ピッカー」が起動している。

この状態で、手順4でMicrosoft Edgeに表示していた「ログインページ」で、ログイン名の枠にマウスカーソルを合わせる。

次のように「Input text」と表示されるので、「Ctrlを押しながら左クリック」をする。

UI要素ピッカーが起動した状態で、EdgeでUI要素を選択している

UI要素ピッカーで、EdgeからUI要素を取得イメージ
ログイン名のテキストを設定する

前手順で「Webページ内のテキストフィールドに入力する」の設定画面に戻り、UI要素も設定できている。

次のとおり、入力する”ログイン名のテキスト”を設定し、保存する。

UI要素が取得できているので、テキスト欄にログイン名を設定している

UI要素の取得後のイメージ

6.パスワード欄を入力する設定

ログイン名と同様に、次のとおり、パスワード欄を設定する。

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

ログイン名と同様、「UI要素の追加」をクリックして、UI要素を設定する。

既に、ログイン名のUI要素が追加されているため、設定画面は次のように表示される。

「UI要素の追加」を同様にクリックしている

他のUI要素が既に登録されている場合の設定画面
設定画面で、パスワードを伏せる設定

作成したフローを他と共有する場合などは、パスワードの暗号化も可能。

テキスト欄にあるプルダウンをクリックし、次のとおり「直接暗号化されたテキストの入力」の状態にすると、パスワードを伏せることができる(設定後は、パスワードは確認できない)。

パスワードを伏せることができる

「直接暗号化されたテキストの入力」の設定例

7.「ログイン」ボタンをクリックする設定

ログインページの「ログイン」ボタンをクリックする設定を次のとおり実施する。

「Webページのボタンを押します」アクションの追加

画面左側にある「Webフォーム入力」メニューの中から「Webページのボタンを押します」アクションを追加する。

前述手順と同様にUI要素を追加する。この事例では、ログインボタンは「Input submit」となっている。

Input submitと表示されている

「ログイン」ボタンのUI要素の選択例

UI要素を取得後の設定画面のイメージは次のとおり。

UI要素を取得している画面イメージ

「Webページのボタンを押します」の設定例

保存をクリックすると、冒頭の設定イメージのとおり、次のようになり、設定完了。

Edgeの起動からログインまで4ステップ

PowerAutomateDesktopの設定イメージ

以上、Power Automate Desktopで、WebページにIDとパスワードを入力し、ログインを自動化する方法でした。

なお、kintoneの場合は環境(ライセンスやユーザー権限等)によってはAPIを利用することができます。

参考情報

以下は、ログイン状況の有無で処理を分岐したい場合の事例です。

shikumika.org