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

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

comucal
PRO
April 25, 2022
Technology
0
2.1k

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

comucal
PRO

April 25, 2022
Tweet

More Decks by comucal

See All by comucal
株式会社セゾンテクノロジー_生成AIへの取り組み
comucal
PRO
0
30
スタートアップ必見！Google Workspaceで加速するチームワーク_株式会社G-gen
comucal
PRO
0
270
大事なのはコミュニティの価値！_株式会社コミュカル Mitz
comucal
PRO
0
93
Google Workspace で問い合わせ業務を改善！_株式会社G-gen 荒井
comucal
PRO
0
3.7k
RPACommunityについて 2024年6月版
comucal
PRO
0
410
はじめて買ったパソコンってなんでした_株式会社コミュカル_Mitz
comucal
PRO
0
1.4k
Self-introduction_Mitz
comucal
PRO
0
43
Gemini in AppSheet_吉積情報株式会社 石見
comucal
PRO
1
2.7k
ハイブリッドイベント＆イベント盛り上げ＆集客話_株式会社コミュカル Mitz
comucal
PRO
0
60

Other Decks in Technology

See All in Technology
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
480
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
690
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Facilitating Awesome Meetings
lara
50
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Scaling GitHub
holman
458
140k
Typedesign – Prime Four
hannesfritz
40
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Become a Pro
speakerdeck
PRO
25
5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Speed Design
sergeychernyshev
25
620

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とは（その２） ⚫ 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