Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

50bc42471d197d0dbef7171f2ef85bb6?s=128

comucal
PRO

April 25, 2022
Tweet

More Decks by comucal

Other Decks in Technology

Transcript

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

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

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

    IEからChromeに作り直した際の引っ掛かったところ、てこずったと ころなどの体験談とその解決方法。 Chromeブラウザでシナリオを作る上での「コツ」「重要ポイント」 についてお伝えします。 ※ 次期 Ver.7.4についてもちょっとだけお話します。
  4. 3 © 2022 NTT Advanced Technology Corporation Λ(らむだ)さん質問① モーダルウィンドウ(ページが遷移せずに小さいウィンドウが出る)の操作につ いて教えて欲しい。

    → たとえば証明書選択ウィンドウのOKまたはキャンセルをクリックしたい
  5. 4 © 2022 NTT Advanced Technology Corporation ダイアログの操作について ブラウザ、ダイアログにより挙動に差分があるため、 それぞれ検証が必要となりますが、

    ① 23_ブラウザ関連/ダイアログクリック同梱ライブラリを試す ② UI Automationで操作を試す … → 動画で説明
  6. 5 © 2022 NTT Advanced Technology Corporation Λ(らむだ)さん質問② フレーム構造ページのフレーム選択について教えて欲しい。 →

    対象ページがフレーム分けされているので、親フレーム選択→子フレーム選 択後にクリック等アクションが必要となっている。 →フレームを正しく選択しないとXPathがうまく取れない。
  7. 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が表示されています
  8. 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. 8 © 2022 NTT Advanced Technology Corporation Λ(らむだ)さん質問③ XPathをそのまま使うのではなく、緩めて設定する方法について教えて欲しい。

  10. 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がでてきます)
  11. 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で置き換える方法(参考)
  12. 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
  13. 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
  14. 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
  15. 14 © 2022 NTT Advanced Technology Corporation 構造変化に強いXPathとは(その2) ⚫ 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=“#”>&gt;次へ</a>) ▪最後に現れるa要素の場合 [text()=“文字列”] にて、要素の内部の文字列が一致する要素が選択されます。 [contains(text(), “文字列”)] にて、要素の内部の文字列が部分一致する要素が選択されます。 [contains(@class, “label”)] といった使い方もできます。 [last()] にて、最後の要素を取得することができます。 ([0]で先頭の要素) ブラウザの開発ツールから取得されるXPathについて、id属性にて特定で きない要素に対しては、テキスト、他の属性、及び、順番といった様々 な条件(XPathでは上に記載したもの以外にも多くの条件を用いることが できます)を組み合わせていくことで、変化に強いXPathを設定できます。 23_ブラウザ関連/テーブルスクレイピングライブラリの、ページ遷移要 素XPathの選択ボタンではテキストによる条件を用いたXPathを自動的に 作成していますので、参考にしてください。
  16. 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で概ね代用できますので、お試しください。
  17. 16 © 2022 NTT Advanced Technology Corporation Λ(らむだ)さん質問④ WebDriver更新のベストな方法を教えて欲しい。 →

    WinActorの機能でWebDriver更新は可能だが、Chromeが更新されると一度シ ナリオが止まってしまうので、シナリオを止めずにChromeに追従して WebDriverを更新する方法はないか?
  18. 17 © 2022 NTT Advanced Technology Corporation WebDriverの更新について オプション画面の更新タブ 「起動時にバックグラウンドで更新を確認する」

    WebDriverの更新方針を「自動更新」に設定する。 WinActor起動することで WebDriverが最新化されます。
  19. 18 © 2022 NTT Advanced Technology Corporation Edge WebDriverの更新について Edge

    WebDriverについて、Ver.7.4よりオンラインアップデートを再 開します。 ただし、自動更新はできず、確認画面を一つ挟むようになります。
  20. 19 © 2022 NTT Advanced Technology Corporation WebDriverに依存せずにブラウザを操作したい • WinActorを起動し、オンラインアップデートが完了するのを確認してから、シ

    ナリオ実行をするのは手間 • WebDriverにて起動したブラウザしか操作できないが、IEでできていたように ユーザが起動したブラウザに対しても操作したい WebDriverに依存せずにブラウザ操作したい!
  21. 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 新ブラウザ拡張機能 ブラウザ 操作 ブラウザ 操作記録 ブラウザ 新ブラウザ 操作
  22. 21 © 2022 NTT Advanced Technology Corporation WinActor Ver.7.4 最後の品質チェック中です。

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