220425 WinActorブラウザシナリオ作成徹底解説 NTTATさん

© 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説 2022/04/25
泉信人

1 © 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説
2022年6月16日をもってMicrosoft社よるInternet Explorerのサポートが終了サポートが継続している他の一般的なブラウザへの移行、及び、コンテンツの改修

2 © 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説
IEからChromeに作り直した際の引っ掛かったところ、てこずったところなどの体験談とその解決方法。 Chromeブラウザでシナリオを作る上での「コツ」「重要ポイント」についてお伝えします。 ※ 次期 Ver.7.4についてもちょっとだけお話します。

3 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問① モーダルウィンドウ（ページが遷移せずに小さいウィンドウが出る）の操作について教えて欲しい。
→ たとえば証明書選択ウィンドウのOKまたはキャンセルをクリックしたい

4 © 2022 NTT Advanced Technology Corporation ダイアログの操作についてブラウザ、ダイアログにより挙動に差分があるため、それぞれ検証が必要となりますが、
① 23_ブラウザ関連/ダイアログクリック同梱ライブラリを試す ② UI Automationで操作を試す … → 動画で説明

5 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問② フレーム構造ページのフレーム選択について教えて欲しい。 →
対象ページがフレーム分けされているので、親フレーム選択→子フレーム選択後にクリック等アクションが必要となっている。 →フレームを正しく選択しないとXPathがうまく取れない。

6 © 2022 NTT Advanced Technology Corporation HTMLのフレームとは？ HTMLのページ中に他のHTMLのページを表示するために利用される frameset,
frame, iframeといった要素で表現されます。 (framesetについてはHTML5では廃止) <html> <frameset rows="15%,*,15%"> <frame src="header.html" name="header"/> <frameset cols="20%,*"> <frame src="menu.html" name="menu"/> <frame src="main.html" name="main"/> </frameset> <frame src="footer.html" name="footer"/> </frameset> </html> ① 0: index.html ② ③ ④ ① ② ④ ③ ブラウザのアドレスバーには 0番であるHTMLのURLが表示されています

7 © 2022 NTT Advanced Technology Corporation フレーム選択とは WinActorのブラウザ操作では同時に一つのフレームに対してのみ操作を行えます。フレームの無い場合等、0番のHTMLのみを対象としている場合には意識する必要はありませんが、複数のフ
レームから更新されるサイトが対象となっており、操作対象のフレームを変更したい場合は、同梱ライブラリ23_ブラウザ関連/フレーム選択を実行する必要があります。 ① ② ④ ③ ▪ 0→② (1) child: //frame[@name=“menu”] ▪ ②→0→③ (1) parent (2) child: //frame[@name=“main”] ▪ ③→0→② (1) parent (2) child: //frame[@name=“menu”]

9 © 2022 NTT Advanced Technology Corporation WinActorによるXPathの指定方法について 2021/5/26よりAT公開中の資料 WinActorによるXPathによる要素選択の一手法
https://winactor.biz/event/docs/WinActor_XPathElementSelectionMethod_1.pdf (winactor xpathで検索すると上のURLがでてきます)

10 © 2022 NTT Advanced Technology Corporation WinActorにおけるXPathの指定方法について ⚫ WinActorは、Webページを操作するために、操作対象のWebページ内の部品をXPathで指定する必要がありますが、
シナリオ作成時に、このXPath による指定がうまく行かないとお困りの声をいただきます。 ⇒ XPathによる部品選択のやり方について解説します。 XML Path Language (XPath) は、標準化団体W3Cで開発された、 XMLやXMLに準拠したHTML中の特定の部分 (Webページ内の部品) を指定することのできる簡単な言語です。 WinActorのライブラリの23_ブラウザ関連配下のWebページ内のボタンやリンクをクリックするライブラリ等の多くでは、操作対象の要素を選択するためにこのXPathを用いています。以下の流れにて、WinActorのシナリオに設定するXPathの指定方法について説明します。 ① ブラウザによるXPathの取得方法 ② ブラウザから取得したXPathを用いた場合の問題点 ③ この問題点に強いXPathの指定方法 ④ IE操作で用いている対象コントロール指定をXPathで置き換える方法（参考）

11 © 2022 NTT Advanced Technology Corporation ブラウザの開発ツールからのXPathの取得 ⚫ ブラウザ(Edge,
Chrome, Firefox)の開発ツール（F12）を利用し、ブラウザに表示しているHTML中の要素の XPathを取得することができます。 ① ブラウザ（左図はEdge）にて、F12を押すことにより、緑枠の開発ツールを利用できます。 ② 要素選択（Ctrl+Shift+C)を選び ③ HTML中の操作対象の要素（左図では WinActorのアイコン）を選択すると ④ 開発ツール内の該当要素が選択された状態になります。 ② ③ ④ ⑤ ④で選択された行を右クリックし、コンテキストメニューを開き、コピー＞ XPathのコピーにて、HTML中の操作対象の要素のXPathが取得できます。 /html/body/header/div[1]/div/div[1]/a/img

12 © 2022 NTT Advanced Technology Corporation 開発ツールから取得されるXPathの問題点 ⚫ 開発ツールでは、現在ブラウザが表示している要素を指定するXPathが取得されますが、シナリオ実行時に、お知らせのメッ
セージが増えていたり、検索結果のページが異なっていたりし、HTMLの構造がシナリオ作成時とシナリオ実行時で異なっていると、そのままでは正しく要素を指定することができないことがあります。昨日まで5ページしかなかったのに、今日は6ページあり、次ページのリンクをクリックできず、シナリオの実行に失敗した！ /html/body/div[2]/div[1]/div/div/ul/div/div/a[6] /html/body/div[2]/div[1]/div/div/ul/div/div/a[7] ▪昨日（シナリオ作成時）のXPath ▪今日（シナリオ実行時）のXPath

13 © 2022 NTT Advanced Technology Corporation Webページの構造変化に強いXPathとは ⚫ Webページの構造の変化に強いXPathを選択します。
/html/body/div[2]/div[1]/div/div/ul/div/div/a[6] //*[@id="js_fs_paginate"]/div/a[6] ▪「完全なXPathをコピー」から得られたXPath ▪「XPathをコピー」から得られたXPath //*[@属性=“値”]は、指定された値の属性が設定されている要素を選択します。これにより、<div id=“js_fs_paginate”> 要素が選択されます。 <span class=“label”>を指定するためにといった指定も可能。 id属性はページ内でその要素を特定するために利用されます。 class属性はページ内で同じ（デザインの）グループを表すために利用されます。状況に応じ使い分けます。 //*[@class=“label”] id属性にて、ページ内の要素を特定することができるため、操作したい対象の要素に近いid属性で特定できる要素を選択し、XPathで利用します。ブラウザの開発ツールの「XPathをコピー」では、この選択は自動的に行ってもらえるので、そのまま利用できます。 id属性で特定できる要素が無い場合は、「XPathをコピー」と「完全なXPathをコピー」で同じXPathが取得されます。左に比べこの部分の変化に弱い id属性で指定される要素より親側の変化に強くなったが、前のページの子供側の変化に対応できていない！ ※1 Edgeでは「XPathをコピー」、Chromeでは「Copy XPath」、Filefoxでは該当メニューなし ※2 Edgeでは「完全なXPathをコピー」、Chromeでは「Copy full XPath」、Firefoxでは「XPath」 ※1 ※2

14 © 2022 NTT Advanced Technology Corporation 構造変化に強いXPathとは（その２） ⚫ id属性以外の方法による要素の特定方法について、いくつか紹介します。
//*[@id=“js_fs_paginate”]/div/a[text()=“次へ”] //*[@id=“js_fs_paginate”]/div/a[contains(text(), “次へ”)] //*[@id=“js_fs_paginate”]/div/a[last()] ▪a要素内のテキストが「次へ」である場合 (<a href=“#”>次へ</a>） ▪a要素内のテキストが「次へ」を含む場合(一致はしない場合) (<a href=“#”>>次へ</a>） ▪最後に現れるa要素の場合 [text()=“文字列”] にて、要素の内部の文字列が一致する要素が選択されます。 [contains(text(), “文字列”)] にて、要素の内部の文字列が部分一致する要素が選択されます。 [contains(@class, “label”)] といった使い方もできます。 [last()] にて、最後の要素を取得することができます。（[0]で先頭の要素）ブラウザの開発ツールから取得されるXPathについて、id属性にて特定できない要素に対しては、テキスト、他の属性、及び、順番といった様々な条件(XPathでは上に記載したもの以外にも多くの条件を用いることができます)を組み合わせていくことで、変化に強いXPathを設定できます。 23_ブラウザ関連/テーブルスクレイピングライブラリの、ページ遷移要素XPathの選択ボタンではテキストによる条件を用いたXPathを自動的に作成していますので、参考にしてください。

15 © 2022 NTT Advanced Technology Corporation IE操作の対象コントロール指定をXPathで行うには？ ⚫ IE操作では対象コントロールの指定にて、XPathではなくtag,
frame index, tag index等を利用しています。 ⚫ IEのサポート終了に伴い、Edge等の別のブラウザによる操作へ置き換える方法はないか？ //a[130] ▪「対象コントロール指定」で得られる詳細設定 ≒ 変化には弱いが、現シナリオが安定しているならば試したい。ブラウザの種類により表示を変えるページもあり、必ずしも一致はしません。 //<tag>[<tag index>][@name=<name>][@type=<type>][@id=<id>][@value=<value>] <frame index>が0以外の場合、23_ブラウザ関連/フレーム選択ライブラリを用いたフレームの選択が必要です。現時点では、動作確認が必要なものとはなりますが、以下のXPathで概ね代用できますので、お試しください。

16 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問④ WebDriver更新のベストな方法を教えて欲しい。 →
WinActorの機能でWebDriver更新は可能だが、Chromeが更新されると一度シナリオが止まってしまうので、シナリオを止めずにChromeに追従して WebDriverを更新する方法はないか？

17 © 2022 NTT Advanced Technology Corporation WebDriverの更新についてオプション画面の更新タブ「起動時にバックグラウンドで更新を確認する」
WebDriverの更新方針を「自動更新」に設定する。 WinActor起動することで WebDriverが最新化されます。

18 © 2022 NTT Advanced Technology Corporation Edge WebDriverの更新について Edge
WebDriverについて、Ver.7.4よりオンラインアップデートを再開します。ただし、自動更新はできず、確認画面を一つ挟むようになります。

19 © 2022 NTT Advanced Technology Corporation WebDriverに依存せずにブラウザを操作したい • WinActorを起動し、オンラインアップデートが完了するのを確認してから、シ
ナリオ実行をするのは手間 • WebDriverにて起動したブラウザしか操作できないが、IEでできていたようにユーザが起動したブラウザに対しても操作したい WebDriverに依存せずにブラウザ操作したい！

20 © 2022 NTT Advanced Technology Corporation どちらを使用するか選択可能新ブラウザ拡張機能による起動済みブラウザの操作
WinActor Ver.7.4.0 より、新たなブラウザ拡張機能を導入します。 ➢ 従来はできなかった起動済みのブラウザに対する操作が可能になります。 ➢ 従来通りの WebDriver によるブラウザ操作を選択する事も可能です。その場合は従来通りの動作となります。 WinActor Ver.6, Ver.7.3.1以前 WebDriver ブラウザ拡張機能ブラウザ操作ブラウザ操作記録ブラウザ WinActor用に開発されたブラウザ拡張機能を用いて、ブラウザの操作記録を行います。各ブラウザ用に公開されている WebDriver を用いて、ブラウザを操作します。 Ver.7.4.0 新ブラウザ拡張機能は、ブラウザの操作記録に加えて、ブラウザの操作も可能になります。加えて、起動済みブラウザに対する操作等、これまでできなかったブラウザ操作が可能になります。 WinActor WebDriver 新ブラウザ拡張機能ブラウザ操作ブラウザ操作記録ブラウザ新ブラウザ操作

21 © 2022 NTT Advanced Technology Corporation WinActor Ver.7.4 最後の品質チェック中です。
• Edge WebDriverのオンラインアップデートを再開します。 • IEを操作するシナリオから他のブラウザを操作するシナリオへの移行を容易にします。その他、いっぱい改善しています。（リリース後に改めて皆様にご説明する機会をいただきたく）

220425 WinActorブラウザシナリオ作成徹底解説 NTTATさん

220425 WinActorブラウザシナリオ作成徹底解説 NTTATさん

comucal
PRO

More Decks by comucal

Other Decks in Technology

Featured

Transcript

© 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説 2022/04/25

1 © 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説

2 © 2022 NTT Advanced Technology Corporation WinActor ブラウザシナリオ作成徹底解説

3 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問① モーダルウィンドウ（ページが遷移せずに小さいウィンドウが出る）の操作について教えて欲しい。

4 © 2022 NTT Advanced Technology Corporation ダイアログの操作についてブラウザ、ダイアログにより挙動に差分があるため、それぞれ検証が必要となりますが、

5 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問② フレーム構造ページのフレーム選択について教えて欲しい。 →

6 © 2022 NTT Advanced Technology Corporation HTMLのフレームとは？ HTMLのページ中に他のHTMLのページを表示するために利用される frameset,

8 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問③ XPathをそのまま使うのではなく、緩めて設定する方法について教えて欲しい。

9 © 2022 NTT Advanced Technology Corporation WinActorによるXPathの指定方法について 2021/5/26よりAT公開中の資料 WinActorによるXPathによる要素選択の一手法

10 © 2022 NTT Advanced Technology Corporation WinActorにおけるXPathの指定方法について ⚫ WinActorは、Webページを操作するために、操作対象のWebページ内の部品をXPathで指定する必要がありますが、

11 © 2022 NTT Advanced Technology Corporation ブラウザの開発ツールからのXPathの取得 ⚫ ブラウザ(Edge,

12 © 2022 NTT Advanced Technology Corporation 開発ツールから取得されるXPathの問題点 ⚫ 開発ツールでは、現在ブラウザが表示している要素を指定するXPathが取得されますが、シナリオ実行時に、お知らせのメッ

13 © 2022 NTT Advanced Technology Corporation Webページの構造変化に強いXPathとは ⚫ Webページの構造の変化に強いXPathを選択します。

14 © 2022 NTT Advanced Technology Corporation 構造変化に強いXPathとは（その２） ⚫ id属性以外の方法による要素の特定方法について、いくつか紹介します。

15 © 2022 NTT Advanced Technology Corporation IE操作の対象コントロール指定をXPathで行うには？ ⚫ IE操作では対象コントロールの指定にて、XPathではなくtag,

16 © 2022 NTT Advanced Technology Corporation Λ（らむだ）さん質問④ WebDriver更新のベストな方法を教えて欲しい。 →

17 © 2022 NTT Advanced Technology Corporation WebDriverの更新についてオプション画面の更新タブ「起動時にバックグラウンドで更新を確認する」

18 © 2022 NTT Advanced Technology Corporation Edge WebDriverの更新について Edge

19 © 2022 NTT Advanced Technology Corporation WebDriverに依存せずにブラウザを操作したい • WinActorを起動し、オンラインアップデートが完了するのを確認してから、シ

20 © 2022 NTT Advanced Technology Corporation どちらを使用するか選択可能新ブラウザ拡張機能による起動済みブラウザの操作

21 © 2022 NTT Advanced Technology Corporation WinActor Ver.7.4 最後の品質チェック中です。

© 2022 NTT Advanced Technology Corporation