【WinActor】少しやっかい？フレーム選択の扱い方

今回のテーマはWinActorのシナリオ開発の面からみたHTML、その中でも「フレーム」について扱います。
設定は合っているはずなのにWebページの操作がうまくいかずお困りの方、実はこれが理由だったかもしれません！

ブラウザ操作

フレームの話に入る前に基礎知識について確認しておきます。

WinActorでのブラウザ操作

ブラウザ（Chrome、Edge、Firefox）の操作については画像マッチングやエミュレーションといったノードの他に、
ライブラリの中の23_ブラウザ関連に多くのノードが用意されていますので、こちらを使うことが多いです。
23_ブラウザ関連のほとんどのノードではブラウザ名とXPathを指定して操作するようになっており、
この「XPath」というものがたびたびユーザを悩ませる存在だったりします。
少し古い記事ですが基本操作は同じですので、既出の記事👇もぜひ参考にしてみてください。

WinActorでブラウザ操作を自動化（基本操作編）
実際に基本的なブラウザ操作として、サイトの起動・テキスト取得・クリックの自動化をしてみたいと思います。
 

XPathとHTML

ほとんどのWebページはHTML（HyperText Markup Language）とCSS（※後述に詳細あり）で作られています。
HTMLは「タグ」を使って文字に意味を持たせ、表示させたい文字や文章を太文字にしたり改行をしたりとWebページの見た目を構成します。
また、文字列などをタグで囲んだ情報の単位の事を「要素」と言います。
XPath （XML Path Language）とはWebページ内の特定の部分を指定する言語構文で、ツリー状で構成を表すいわゆる要素の”住所”です。

前置きが長くなってしまいましたが、WinActorではこのXPathを指定することで、操作をおこないたい箇所を特定しクリックしたり文字を入力することができるのです。

フレーム

今回のメインテーマ「フレーム」についてです。
フレームは「画面を複数個に分割し、それぞれの画面の中に別ページを表示させる機能」です。
HMTLの中では<frameset>というタグを使って分割の仕方を指定したり、<frame> でフレームに読み込む文書を指定します。
この<frameset>や<frame> というタグ、最近は次第に使われなくなっています。
しかしながら業務で使用するWebシステムなどでは昔に開発してそのまま使っていることも多いため、
WinActorの開発現場ではフレームが使われているページをたびたび見かけます。
そしてフレームが使われているページの操作は少しコツがいるので、単にXPathを指定する方法ではうまく操作できない、ということが起こります。
ここからはフレームが使われているかどうかの確認方法と、使われている場合の設定方法についてみていきましょう！

フレーム操作について

まずは操作したいWebページにフレームが使用されているか、確認しましょう。
見た目では分割されていないようにみえても使われていることもありますし、分割されているようにみえてもフレームではなく別の方法で分割されていることもありますよ！

フレームが使われているかどうかの確認

確認方法は難しくありません。
まず該当のWebページを開き、キーボードで「F12」を押してください。開発者ツールが開きます（下図の右側の部分）。

続いてXPathを取得するときと同様に、操作対象の箇所に対して要素の選択（図３の①②）をおこないます。
すると画面下に選択中の要素に含まれるタグが表示されます。
画面下のタグが並ぶ箇所に「frame」があればフレームが使われていますし、なければ使われていないページということになります（③）。

使われていない場合は、いつも通りXPathの指定だけでOK👌です。
もしエラーが出るとしたらXPathの設定が誤っている等、別に要因がありそうです。
次はフレームが使われている場合の操作をみていきましょう。

フレーム選択

WinActorではフレームの中に置かれている要素を操作したい場合、まずそのフレームを選択してから対象の要素のXPathを指定する、という手順を踏む必要があります。
使用するのは「フレーム選択」というノードです。（ライブラリ▸23_ブラウザ関連）
ノードのプロパティの設定のしかたは以下の通りです。

・ブラウザ名：「ブラウザ起動」で付けた名前
・選択モード：子フレームを選ぶ場合は「child」、親フレームを選ぶ場合は「parent」を選択。
・XPath：frameタグを含む要素のXPathを入力。親フレーム選択の場合は入力不要。

フレーム選択の順番

フレーム選択をするとき、気を付けるべきポイントが操作の順番です。
例えば、下記のようなフレームが組まれているWebページの場合を考えてみます。

孫１・２は”子２”の中で更に分割されているという構成になっています。
このようなページにおいて、”孫１”を操作したい場合はいきなり”孫１”のフレーム選択をするのではなく、
”子２”を選択➡”孫１”を選択、の順にフレーム選択をおこなう必要があります。
フレーム選択する前というのは”親”フレームを選択している状態なので、”親”からいきなり”孫”を選択できず、親から子、子から孫という手順を踏むことが必要なのです。

そしてもう一つ大切なポイントが、子フレーム同士をまたいで操作をするときは一度親フレームに戻る必要があるということです。
例えば、図５において”子１”の操作をしてから”子２”の操作を行いたい場合、ノードの並びとしては以下のようになります。

このあたり少し難しく感じる方もいらっしゃるかもしれませんが、
下記のような図をイメージすると、一度親に戻らないと別の子の操作ができないというルールも分かりやすいかもしれません。

孫、ひ孫まで使われているような複雑なWebページを扱い場合は、いま操作しているのがどこのフレームで、次の操作をおこなうためにはどのような移動が必要か、ということを考えながらシナリオを作成していく必要がありますね！

そして併せてお伝えしたいポイントがあります。図５において”孫１”で操作してから”子１”の操作したい場合は、”孫１”から”親”に戻る操作が必要になりますが、
”孫１”からみた”親”は「親の親」なのでフレーム選択を2回入れて”親”に戻す必要があります。1回だと”子１”に戻ったに過ぎないのです。

<frame>と<iframe>

<frame>とよく似たタグに<iframe>というものがあります。
「アイフレーム」「インラインフレーム」と呼ばれるタグで、Webページ内に別のWebページや画像などのコンテンツを読み込んで表示させることができます。
さきほど<frame>は使われなくなっているとお話しました。
細かい話は割愛しますがHTMLのバージョンにおいてHTML4.0から非推奨、HTML5.0で廃止されたためです。
一方、<iframe>は2023年現在の最新バージョンであるHTML Living Standardでも使われています。
タグ自体の役割は異なりますが、WinActorで<iframe>内の操作を行う場合も<frame>と同様、フレーム選択で<iframe>を選んでから要素の操作をおこなうことになります。

おわりに

今回の内容は、基本の考え方や操作方法になります。
Webサイトの中には独自のタグを使ったりタグを別の用途で使用したり様々な作り方をされています。
フレームにおいても例外ではなく、お話ししたような親子関係がきれいになっていないものも見受けられるため、フレーム選択の順番、やり方が必ず当てはまるということでもありません。
開発者ツールでフレームの親子関係をじっくり確認いただいてページの構造を把握されると設定もスムーズに進むと思いますので、ぜひ参考にしてみてください。

最後までお読みいただきありがとうございました。
また次回お楽しみに！

▼こちらもおすすめ

【WinActor新機能】新たなブラウザ拡張機能（事前設定と使い方編）
本稿では、ブラウザ拡張機能を使うための事前設定や注意事項についてお伝えするとともに簡単な使い方についてもお話したいと思います。
 

人気＆役に立つ！WinActorの記事まとめ
国内トップシェアRPAツールと言われているWinActorについて人気の高い記事、WinActorを導入前または導入済の方向けにお役に立てる記事をまとめました。