WinActorにおけるXPathによる要素選択の一手法

2021/5/26

Copyright© 2021 NTT Advanced Technology Corporation

はじめに 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で置き換える方法（参考）Copyright© 2021 NTT Advanced Technology Corporation1

ブラウザの開発ツールからの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
Copyright© 2021 NTT Advanced Technology Corporation

2

開発ツールから取得されるXPathの問題点
 開発ツールでは、現在ブラウザが表示している要素を指定するXPathが取得されますが、シナリオ実行時に、お知らせのメッセージが増えていたり、検索結果のページが異なっていたりし、HTMLの構造がシナリオ作成時とシナリオ実行時で異なっていると、そのままでは正しく要素を指定することができないことがあります。

昨日まで5ページしかなかったのに、今日は6ページあり、次ページのリンクをクリックできず、シナリオの実行に失敗した！

■昨日（シナリオ作成時）のXPath/html/body/div[2]/div[1]/div/div/ul/div/div/a[6]■今日（シナリオ実行時）のXPath/html/body/div[2]/div[1]/div/div/ul/div/div/a[7]Copyright© 2021 NTT Advanced Technology Corporation3

Webページの構造変化に強いXPathとは
 Webページの構造の変化に強いXPathを選択します。
※1■「XPathをコピー」から得られたXPath//*[@id="js_fs_paginate"]/div/a[6]//*[@属性=“値”]は、指定された値の属性が設定されている要素を選択します。
これにより、<div id=“js_fs_paginate”>要素が選択されます。
<span class=“label”>を指定するために//*[@class=“label”]といった指定も可能。
id属性はページ内でその要素を特定するために利用されます。
class属性はページ内で同じ（デザインの）グループを表すために利用されます。
状況に応じ使い分けます。

※2■「完全なXPathをコピー」から得られたXPath/html/body/div[2]/div[1]/div/div/ul/div/div/a[6]左に比べこの部分の変化に弱い
id属性にて、ページ内の要素を特定することができるため、操作したい対象の要素に近いid属性で特定できる要素を選択し、XPathで利用します。
ブラウザの開発ツールの「XPathをコピー」では、この選択は自動的に行ってもらえるので、そのまま利用できます。
id属性で特定できる要素が無い場合は、「XPahをコピー」と「完全なXPathをコピー」で同じXPathが取得されます。

id属性で指定される要素より親側の変化に強くなったが、前のページの子供側の変化に対応できていない！

※1 Edgeでは「XPathをコピー」、Chromeでは「Copy XPath」、Filefoxでは該当メニューなし※2 Edgeでは「完全なXPathをコピー」、Chromeでは「Copy full XPath」、Firefoxでは「XPath」
Copyright© 2021 NTT Advanced Technology Corporation

4ページの変化に強いXPathとは（その２） id属性以外の方法による要素の特定方法について、いくつか紹介します。
■a要素内のテキストが「次へ」である場合 (<a href=“#”>次へ</a>）//*[@id=“js_fs_paginate”]/div/a[text()=“次へ”][text()=“文字列”]
にて、要素の内部の文字列が一致する要素が選択されます。

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

[contains(text(), “文字列”)]
にて、要素の内部の文字列が部分一致する要素が選択されます。
[contains(@class, “label”)]
といった使い方もできます。
[last()]
にて、最後の要素を取得することができます。
（[0]で先頭の要素）

Copyright© 2021 NTT Advanced Technology Corporation

5

IE操作の対象コントロール指定をXPathで行うには？
 IE操作では対象コントロールの指定にて、XPathではなくtag, frame index, tag index等を利用しています。
 IEのサポート終了に伴い、Edge等の別のブラウザによる操作へ置き換える方法はないか？
■「対象コントロール指定」で得られる詳細設定≒//a[130]

変化には弱いが、現シナリオが安定しているならば試したい。
ブラウザの種類により表示を変えるページもあり、必ずしも一致はしません。

現時点では、動作確認が必要なものとはなりますが、以下のXPathで概ね代用できますので、お試しください。
//<tag>[<tag index>][@name=<name>][@type=<type>][@id=<id>][@value=<value>]<frame index>が0以外の場合、23_ブラウザ関連/フレーム選択ライブラリを用いたフレームの選択が必要です。
Copyright© 2021 NTT Advanced Technology Corporation

6

WinActorメーカー
公式ホームページ
https://winactor.biz/〒212-0014 神奈川県川崎市幸区大宮町1310 ミューザ川崎セントラルタワーTEL 044-280-8811 FAX 044-520-1530

URL:https://www.ntt-at.co.jp/