「例のホームページ」をWinActorで動かしてみた話

![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/767bf45b-30b6-1250-40f7-a1a9edd575a8.png)
# WinActorでのブラウザ操作について
WinActorでブラウザ操作をする場合、ブラウザ関連のライブラリを使用して自動化を行います。
しかし、サイトやアプリによっては、 **何故だかクリックや入力ができない……** と悩んでしまうシーンもあります。
それはもしかすると **［フレーム選択］** のライブラリがされていないことが原因かもしれません！

今回は［フレーム選択］のライブラリについて、とあるホームページを元に説明していきます！
# 登壇のきっかけ
きっかけは、2022年4月25日(月) 13:30～15:00 に開催された、WinActor Talk「[**Chromeブラウザでのシナリオ作成を徹底解説** ](https://rpacommunity.connpass.com/event/244762/ "https://rpacommunity.connpass.com/event/244762/")」での、NTT-ATの泉さんの説明でした。

Λ(らむだ)さんが、Internet Explorer から Chrome にブラウザを乗り換える際に、フレーム構造のホームぺージに苦戦したので設定方法を教えてほしい、という内容のものでした。

<iframe width="560" height="315" src="https://www.youtube.com/embed/Xu3zJAhU248?start=302" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

NTT-ATの泉様からの回答は「自動記録を利用する」というものでした。
この機能を使用すると、操作したい入力欄やボタンなどの要素から、適切なライブラリを自動で配置してくれます。
確かにこの機能を使えば、フレーム構造かどうかを見定める必要がなさそうです。

早速私も挑戦してみよう！と自動記録をしてみたところ、ブラウザのセキュリティー設定が高すぎるのか **自動記録自体が出来ない** ことが判明。
いろんなサイトに書いてある解決方法も試してみましたが、原因特定に時間がかかりそうだったので断念しました。

なので残る手段は、 **手動で設定するしかありません！**
![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/54ca80b6-5382-0709-d62a-f174ace5634b.png)
**リンク：**[**WinActor ブラウザシナリオ作成 徹底解説** ](https://speakerdeck.com/comucal/220425-winactorburauzasinariozuo-cheng-che-di-jie-shuo-nttatsan "https://speakerdeck.com/comucal/220425-winactorburauzasinariozuo-cheng-che-di-jie-shuo-nttatsan")
# フレームの見分け方
最初にやることとしては、 **フレーム構造かどうか** を見分けることです。
それは何故か……実は見た目ではフレーム構造かどうかわからないサイトやアプリが存在するのです。

そんな時は、WinActorインストール時に同梱されている「ブラウザ関連」のマニュアルを見てみます！
すると、ちゃんと調べ方が書いてありました！
![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/3b6fb43e-8068-3582-cd32-3d788c7b3886.png)
※ 上図のframe要素の確認方法は、WinActorのブラウザ関連のマニュアルに書いてある手順となります。
　 いろんな調査方法がありますのでご自分に合った方法で調べてみてください。
※ フレーム構造は「frame要素」か「iframe要素」があれば該当します。
# これだけ覚えればＯＫ！
とりあえず、以下の操作手順で確認していただければ、手動で設定できるはずです！
![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/35a2422c-7fe2-7067-bb5e-0aeac7872424.png)
ブラウザを利用したアプリやサイトによっては、右クリックしてもコンテキストメニューが表示されなかったり、[F12]キーを押下しても開発者ツールの画面が表示されないことがあります。
上記操作を禁止している場合もあるようですので、その場合はエミュレーションや画像マッチングを利用して操作することを検討してみてください。

# ここからは実践編！
以上のことを踏まえて、フレームで構成されているWebページをWinActorで操作してみましょう。
……と言っても、どのホームページで練習すればいいか分からない、ということもありますよね。

そこで私のおすすめの「例のホームーページ」をご紹介いたします！
![スライド7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/dae66d49-414c-78cd-9840-e8764a7664d6.png)
エンジニアにはおなじみ、いかなるブラウザでも爆速表示される「阿部寛のホームページ」です！
**リンク：**[**阿部寛のホームページ** ](http://abehiroshi.la.coocan.jp/ "http://abehiroshi.la.coocan.jp/")
![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/15ae8ac1-9a62-0a1a-509d-c77f3a375b29.png)

## 選定理由
このホームページを選定した理由は、以下の３点です。
しばらく変更する予定がないと、ご本人がおっしゃっていたので練習用に使わせていただくこととしました。
※ 当然のことですが、練習する際は迷惑がかからないようなロボットを作成してください💦
![スライド9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/414d3d21-27fe-1e64-389b-e9cf017b3527.png)

## 設定内容
設定内容は以下の通りです。
画像を拡大して、各ライブラリの配置とプロパティの設定内容をご確認ください。
![スライド11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/27441780-b1a8-c7dd-444d-ac855e49111b.png)
![スライド12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/5021d3c4-54e3-0e0a-f36d-9ea89b5c0bd9.png)
![スライド13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/b91db1b7-32be-d641-054e-2b45adbf1fd7.png)
▼ ポイントは親frameに戻る処理を間に挟むこと。子frameのframe[1]からframe[2]にダイレクトに移動はできません！
![スライド14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/3956ab53-81b4-c612-69b4-6d807bcf6a24.png)
![スライド15.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/f02b3ee6-f793-2c5e-5e47-0c8c62698f36.png)
全ての設定完了したら、あとはWinActorを実行してみてください。
各フレームに配置されたリンクの要素をクリックできれば、あなたもフレームマスターです👍

# まとめ
自動記録はとっても便利なWinActorの機能の１つです。
ですが、開発環境やブラウザのセキュリティ設定によっては自動記録の機能が使えない場合もあるので、**不測の事態も想定して手動で設定する方法も覚えておく** といいかもしれません。
![スライド17.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646663/6a8c5d23-46bb-08c4-1153-12f098706ce5.png)
フレーム選択をマスターして、さらなるWinActor開発ライフを楽しんでください✨