【Automation Anywhere】Object Cloning (Recorder:Capture) の DOMXPath、Pathによるオブジェクトの指定のしくみ

# 概要
[前回](https://qiita.com/RPAbot/items/477c783ef5c2f8e91d9b)は、Automation Anywhere v11.3.xのObject Cloningコマンド (もしくはA2019のRecorder:Captureアクション)で取得されるオブジェクト情報の内容についてみてきました。

今回は、取得できる属性のうち、特に**Path**と**DOMXPath**のしくみ (後者はHTMLページのみ) についてみていきたいと思います。

**v11.3.x**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/0b466725-fd2b-e97f-6a24-d12c7fc70444.png)

**A2019**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c2e11335-d098-477c-b6d1-bd9f232591c9.png)

# PathとDOMXPath
XPathもDOMXPathも、これを指定することでUIの中で特定のオブジェクトを一意に指定するための文法です。同様のしくみはUiPathやCSSの世界では「**セレクター**」と呼んでおり、こちらの方が一般的な言葉かもしれません。ただし、オブジェクト (HTMLではタグ) を一意に指定するためという趣旨は同じですが文法は各プラットフォーム上で異なっています。

**Path**は、Automation Anywhereに固有の仕組みで、対象オブジェクトが何かによって中身が異なってきます。**DOMXPath**はWebアプリケーション/HTMLページで要素を指定するための一意識別子で、こちらは**XPath**と呼ばれる一般的な仕組みです。見た目にはDOMXPathのほうが文法が理解しやすく、また汎用的な仕組みのため、両方使えるオブジェクトであるならばDOMXPathを使うのがお勧めです。

## サンプル1: HTML
以下のようなHTMLファイルがあったとして、これをローカルに保存してInternet Explorerで開き、Automation Anywhereでスマートレコーダーを使ってクローニングしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/774052eb-8c7c-2c76-3252-52eadc68c723.png)

```HTML:sample1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <div id='root'>
      <div>
      </div>
      <div>
        <span><p>This is text</p></span>
      </div>
      <div>
        <span><p id='findme'>Also Text</p></span>
      </div>
    </div>
</body>
</html>
```

#### サンプル1-1
最初に、「This is text」という文字列が入ったタグをクローニングします。
すると、得られるPath / DOMXPathの情報は以下のようになるでしょう。

* DOMXPath : `//div[@id='root']/div[2]/span[1]/p[1]`
* Path: `1|2|1|1`

**意味:**
まずDOMXPathの文字列ですが、これはXPathと呼ばれるHTMLの中でタグを特定するためのクエリ言語です。『[クローラ作成に必須！XPATHの記法まとめ](https://qiita.com/rllllho/items/cb1187cec0fb17fc650a) by @rllllho さん』の記事に主な文法が良くまとまっています。ここで書かれている記載では**「まずid=rootの属性を持つ`<div>`タグを検索して、その下の2番目に出現する`<div>`タグの下の、1番目に出現する`<span>`タグの下の、1番目に出現する`<p>`タグを指定」**しています。

次にPathの方ですが、HTMLページにおいては**「視覚要素のルートタグである`<body>`タグから数えていくつ目に出現するタグの中のいくつ目に出現するタグの...」**という意味となります。`1|2|1|1`は、「`<body>`タグの下の1番目に出現するタグ (`<div>`)の下の、2番目に出現するタグ (`<div>`)の下の、1番目に出現するタグ (`<span>`)の下の、1番目に出現するタグ (`<p>`)を指定」ということになります。(このPATHの文法はAA社の公式ドキュメントにどこにも記載がなく...困ります。)

#### サンプル1-2
次に、サンプル1で2番目の文字列「Also Text」のクローニングを行ってみましょう。
すると、得られるPath / DOMXPathの情報は以下のようになるでしょう。

* DOMXPath : `//p[@id='findme']`
* Path: `1|3|1|1`

**意味:**
まずDOMXPathの文字列ですが、該当する`<p>`タグに`id=findme`がついているので、これを直接検索する表記を行うととても簡単です。

Pathの方ですが、`1|3|1|1`は、「`<body>`タグの下の1番目に出現するタグ (`<div>`)の下の、3番目に出現するタグ (`<div>`)の下の、1番目に出現するタグ (`<span>`)の下の、1番目に出現するタグ (`<p>`)を指定」ということになります。

## サンプル2: HTML
今度はもうちょっと複雑なHTML、v11.3.xのControl Roomのログイン画面をクローニングしてみましょう。このページのログイン画面はJavascriptで動的に書かれているので、ソースを直接見てもXPathがよくわかりません。

```HTML:sample2.html
<!doctype html>
<html lang="en">
    <head>
        <title>Control Room - Automation Anywhere</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" href="asset/favicon-a34e71.ico"/>
    <link href="style/app-b46848.css" rel="stylesheet"></head>
    <body>
        <div id="root"></div>
    <script type="text/javascript" src="script/app-d74bb7.js"></script><script type="text/javascript" src="../script/en_US/linguifymain.js?ce76f9368e95094e040e"></script></body>
</html>
```


そのため、Google Chromeと拡張機能の「XPath Helper」を使ってXPathを簡単にのぞけるしくみを使いましょう。

### Chrome拡張機能『XPath Helper』でXPathを楽々取得！

XPath Helper:
https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl/related?hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/2e28f3a3-f111-bfcd-3983-0d29dd6c8d2e.png)

この拡張機能は、Google ChromeのツールバーのXPath Helper アイコン (![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/e8d197ae-48c1-3f67-617f-917ae340f3f6.png)) をクリック、またはショートカットキー `Ctrl`+`Shift`+`X`で起動します。
そして、ブラウザー上で取得したい要素を`Shift`キーを押しながらクリックすると、要素のXPathが上部に表示され、簡単に取得できます！

まずAutomation AnywhereのObject Cloningコマンドを使って、Usernameのフィールドをクローニングします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/185d16e9-59a5-ff1f-cd77-47a398074e67.png)

すると、得られるPath / DOMXPathの情報は以下のようになるでしょう。

* DOMXPath : `//input[@name='username']`
* Path: `1|1|1|1|1|1|2|1|1|2|2|1|1|1|1|1|1|1|2|1|1|1`

XPathは、フィールドに`name='username'`と名前がついているのでシンプルにこれを指定する方法をとっています。
一方、先ほどのXPath HelperでXPathを取得してみます。

```XPath:
/html/body/div[@id='root']/div[@class='app']/div[@class='mainlayout']/div[@class='mainlayout-content']/div[@class='page page--theme-gradient loginpage']/form[@class='form']/div[@class='loginpage-form']/div[@class='loadable loadable--theme-light']/div[1]/div[@class='gridlayout gridlayout--size-xs']/div[@class='gridlayout-row'][2]/div[@class='gridlayout-column']/div[@class='gridlayout-content']/div[@class='gridlayout gridlayout--size-xs']/div[@class='gridlayout-row'][1]/div[@class='gridlayout-column'][1]/div[@class='gridlayout-content']/label[@class='fieldlabel']/div[@class='fieldlabel-content']/label[@class='textinput textinput--focus']/div[@class='textinput-cell textinput-cell-input']/input[@class='textinput-cell-input-control']
```
XPath Helperから得られるXPathは、Automation Anywhereが取得したものと異なりますね。このように、XPathによる指定は必ずしも同じ形にはならず、複数の指定方法があります。ちなみに、ごくまれに、Automation Anywhereが生成したXPathではうまく動かなかったりすることもあるので、そのような場合は、このように別のツールでも生成してみる手もあります。

### Firefoxの「選択した部分のソースを表示」で動的に描画されたHTMLを簡単に得る
さて、今度はPathの指定の仕方を見ていきたいのですが、XPath Helperで得られたXPathは、属性が付いて選択されたタグが何番目の出現なのかが厳密にわからないため、また別の方法を模索することにします。

ブラウザーに動的に描画されたHTMLを得る方法として、一番簡単なのがFirefoxを使う方法です。HTMLを取得したい部分をブラウザー上で選択 (今回はページのすべての部分なので`Ctrl`+`A`で全選択)して、右クリックのコンテキストメニュー「選択した部分のソースを表示」を使うことで動的なソースが手に入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/5938773a-1332-3bee-1cd7-0f21f9b6eae2.png)

得られたソースは以下の通りです。

```HTML:sample2-1.html
<html lang="en"><head>
        <title>Control Room | Log in | Automation Anywhere</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="asset/favicon-a34e71.ico">
    <link href="style/app-b46848.css" rel="stylesheet"><style type="text/css">@font-face{font-family:aa-icons;src:url("/asset/aa-icons-4000e9.svg#aa-icons") format("svg"),url("/asset/aa-icons-f5e448.eot?#iefix") format("embedded-opentype"),url("/asset/aa-icons-cf75d9.woff") format("woff"),url("/asset/aa-icons-641e90.woff2") format("woff2"),url("/asset/aa-icons-83ccf3.ttf") format("truetype")}.aa-icon{line-height:1}.aa-icon:before{font-family:aa-icons!important;font-style:normal;font-weight:400!important;vertical-align:top}.aa-icon-action-cancel:before{content:"\f101"}.aa-icon-action-copy:before{content:"\f102"}.aa-icon-action-create:before{content:"\f103"}.aa-icon-action-customize-table:before{content:"\f104"}.aa-icon-action-dashboard-export:before{content:"\f105"}.aa-icon-action-dashboard-filter:before{content:"\f106"}.aa-icon-action-dashboard-fullscreen:before{content:"\f107"}.aa-icon-action-dashboard-style:before{content:"\f108"}.aa-icon-action-delete:before{content:"\f109"}.aa-icon-action-edit:before{content:"\f10a"}.aa-icon-action-email:before{content:"\f10b"}.aa-icon-action-entry-archive:before{content:"\f10c"}.aa-icon-action-entry-restore:before{content:"\f10d"}.aa-icon-action-export-selected-item:before{content:"\f10e"}.aa-icon-action-export:before{content:"\f10f"}.aa-icon-action-favorite--not-selected:before{content:"\f110"}.aa-icon-action-favorite--selected:before{content:"\f111"}.aa-icon-action-import:before{content:"\f112"}.aa-icon-action-install-license:before{content:"\f113"}.aa-icon-action-link-external:before{content:"\f114"}.aa-icon-action-link-internal:before{content:"\f115"}.aa-icon-action-lock--unlocked:before{content:"\f116"}.aa-icon-action-pause:before{content:"\f117"}.aa-icon-action-reading-pane-hide:before{content:"\f118"}.aa-icon-action-reading-pane-show:before{content:"\f119"}.aa-icon-action-refresh:before{content:"\f11a"}.aa-icon-action-remove:before{content:"\f11b"}.aa-icon-action-resume:before{content:"\f11c"}.aa-icon-action-run:before{content:"\f11d"}.aa-icon-action-schedule-bot:before{content:"\f11e"}.aa-icon-action-toggle--disabled:before{content:"\f11f"}.aa-icon-action-toggle--enabled:before{content:"\f120"}.aa-icon-action-view-info--hidden:before{content:"\f121"}.aa-icon-action-view-info--visible:before{content:"\f122"}.aa-icon-action-view:before{content:"\f123"}.aa-icon-action-workload-mark-complete:before{content:"\f124"}.aa-icon-action-workload-mark-ready-to-run:before{content:"\f125"}.aa-icon-action-zoom-fit:before{content:"\f126"}.aa-icon-action-zoom-in:before{content:"\f127"}.aa-icon-action-zoom-out:before{content:"\f128"}.aa-icon-activity-in-progress--default:before{content:"\f129"}.aa-icon-activity-in-progress--paused:before{content:"\f12a"}.aa-icon-activity-navigation:before{content:"\f12b"}.aa-icon-activity-scheduled--default:before{content:"\f12c"}.aa-icon-activity-scheduled--one-time:before{content:"\f12d"}.aa-icon-activity-scheduled--recurring:before{content:"\f12e"}.aa-icon-administration-navigation:before{content:"\f12f"}.aa-icon-audit-log--default:before{content:"\f130"}.aa-icon-audit-log-navigation:before{content:"\f131"}.aa-icon-bot--default:before{content:"\f132"}.aa-icon-bot--iq-bot:before{content:"\f133"}.aa-icon-bot--metabot:before{content:"\f134"}.aa-icon-bot--workflow:before{content:"\f135"}.aa-icon-bot-navigation:before{content:"\f136"}.aa-icon-botinsight-navigation:before{content:"\f137"}.aa-icon-business-process--default:before{content:"\f138"}.aa-icon-business-process-navigation:before{content:"\f139"}.aa-icon-credential--default:before{content:"\f13a"}.aa-icon-credential--standard:before{content:"\f13b"}.aa-icon-credential--user-created:before{content:"\f13c"}.aa-icon-dashboard--default:before{content:"\f13d"}.aa-icon-dashboard--system-created:before{content:"\f13e"}.aa-icon-dashboard--user-created:before{content:"\f13f"}.aa-icon-dashboard-navigation:before{content:"\f140"}.aa-icon-device--bot-creator:before{content:"\f141"}.aa-icon-device--bot-pool:before{content:"\f142"}.aa-icon-device--bot-runner:before{content:"\f143"}.aa-icon-device--default:before{content:"\f144"}.aa-icon-device--vm-image:before{content:"\f145"}.aa-icon-device-navigation:before{content:"\f146"}.aa-icon-file--default:before{content:"\f147"}.aa-icon-file--document:before{content:"\f148"}.aa-icon-file--executable:before{content:"\f149"}.aa-icon-file--report:before{content:"\f14a"}.aa-icon-file--script:before{content:"\f14b"}.aa-icon-file--workflow:before{content:"\f14c"}.aa-icon-folder--closed:before{content:"\f14d"}.aa-icon-folder--default:before{content:"\f14e"}.aa-icon-folder--open:before{content:"\f14f"}.aa-icon-folder-selected--closed:before{content:"\f150"}.aa-icon-folder-selected--open:before{content:"\f151"}.aa-icon-locker--default:before{content:"\f152"}.aa-icon-locker--standard:before{content:"\f153"}.aa-icon-locker--user-created:before{content:"\f154"}.aa-icon-migration--default:before{content:"\f155"}.aa-icon-migration-navigation:before{content:"\f156"}.aa-icon-misc-button-list-actions:before{content:"\f157"}.aa-icon-misc-caret--left:before{content:"\f158"}.aa-icon-misc-caret--right:before{content:"\f159"}.aa-icon-misc-message-system-level-arrow:before{content:"\f15a"}.aa-icon-misc-message-system-level-close:before{content:"\f15b"}.aa-icon-misc-message-system-warning:before{content:"\f15c"}.aa-icon-misc-search-filter-dropdown-arrow:before{content:"\f15d"}.aa-icon-misc-search-filter-dropdown-selected:before{content:"\f15e"}.aa-icon-misc-search-filter-object-bar-cancel:before{content:"\f15f"}.aa-icon-misc-search-filter-search:before{content:"\f160"}.aa-icon-misc-sort--ascending-1:before{content:"\f161"}.aa-icon-misc-sort--ascending-2:before{content:"\f162"}.aa-icon-misc-sort--ascending-3:before{content:"\f163"}.aa-icon-misc-sort--ascending:before{content:"\f164"}.aa-icon-misc-sort--descending-1:before{content:"\f165"}.aa-icon-misc-sort--descending-2:before{content:"\f166"}.aa-icon-misc-sort--descending-3:before{content:"\f167"}.aa-icon-misc-sort--descending:before{content:"\f168"}.aa-icon-misc-table-actions-menu:before{content:"\f169"}.aa-icon-misc-tbd:before{content:"\f16a"}.aa-icon-misc-toast-close:before{content:"\f16b"}.aa-icon-queue--default:before{content:"\f16c"}.aa-icon-queue--not-in-use:before{content:"\f16d"}.aa-icon-queue-template--default:before{content:"\f16e"}.aa-icon-role--default:before{content:"\f16f"}.aa-icon-role--system-created:before{content:"\f170"}.aa-icon-role--user-created:before{content:"\f171"}.aa-icon-tray-favorites--empty:before{content:"\f172"}.aa-icon-tray-favorites-hold-and-drag:before{content:"\f173"}.aa-icon-tray-favorites-unfavorite:before{content:"\f174"}.aa-icon-tray-favorites:before{content:"\f175"}.aa-icon-tray-help:before{content:"\f176"}.aa-icon-tray-notifications-close:before{content:"\f177"}.aa-icon-tray-notifications-empty:before{content:"\f178"}.aa-icon-tray-notifications-go-to-arrow:before{content:"\f179"}.aa-icon-tray-notifications:before{content:"\f17a"}.aa-icon-tray-profile:before{content:"\f17b"}.aa-icon-user--admin-disabled:before{content:"\f17c"}.aa-icon-user--admin:before{content:"\f17d"}.aa-icon-user--bot-creator-disabled:before{content:"\f17e"}.aa-icon-user--bot-creator:before{content:"\f17f"}.aa-icon-user--bot-runner-disabled:before{content:"\f180"}.aa-icon-user--bot-runner:before{content:"\f181"}.aa-icon-user--default-disabled:before{content:"\f182"}.aa-icon-user--default:before{content:"\f183"}.aa-icon-user--other-disabled:before{content:"\f184"}.aa-icon-user--other:before{content:"\f185"}.aa-icon-work-item--default:before{content:"\f186"}.aa-icon-work-item--on-hold:before{content:"\f187"}.aa-icon-work-item--ready-to-run:before{content:"\f188"}.aa-icon-workload-navigation:before{content:"\f189"}</style></head>
    <body>
        <div id="root"><div data-reactroot="" class="app"><!-- react-empty: 2 --><div class="mainlayout"><div class="mainlayout-content" style="padding-left: 0px;"><div class="page page--theme-gradient loginpage"><form name="login" class="form"><input type="text" autocomplete="none" name="_auto_complete_" class="form-hidden"><div class="loginpage-form"><div class="loadable loadable--theme-light"><div><div class="pagetitle"><div class="pagetitle-container"><div class="pagetitle-label" title="Log in"><!-- react-text: 29 -->Log in<!-- /react-text --></div><div class="pagetitle-underline"></div></div></div><!-- react-empty: 31 --><div class="gridlayout gridlayout--size-xs"><div class="gridlayout-row" style="padding-top: 0px;"><div class="gridlayout-column" style="padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"></div></div></div><div class="gridlayout-row" style="padding-top: 10px;"><div class="gridlayout-column" style="padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><div class="gridlayout gridlayout--size-xs"><div class="gridlayout-row" style="padding-top: 0px;"><div class="gridlayout-column" style="padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><label class="fieldlabel"><div class="fieldlabel-label"><span class="fieldlabel-label-content">Username</span></div><div class="fieldlabel-content"><label class="textinput"><div class="textinput-cell textinput-cell-input"><input type="text" class="textinput-cell-input-control" name="username" autocomplete="off" tabindex="0" maxlength="255" spellcheck="false"></div><span class="popup-anchor"></span></label></div></label></div></div><div class="gridlayout-column" style="padding-top: 10px; padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><label class="fieldlabel"><div class="fieldlabel-label"><span class="fieldlabel-label-content">Password</span></div><div class="fieldlabel-content"><label class="textinput"><div class="textinput-cell textinput-cell-input"><input type="password" class="textinput-cell-input-control" name="password" autocomplete="off" tabindex="0" maxlength="64" spellcheck="false"></div><div class="textinput-cell textinput-cell--after"><div class="actionbar"><button type="button" class="actionbar-action actionbar-action--clickable" tabindex="-1"><span class="icon aa-icon aa-icon-action-view-info--hidden icon--animate-none icon--block"></span><span class="popup-anchor"></span></button></div></div><span class="popup-anchor"></span></label></div></label></div></div></div><div class="gridlayout-row" style="padding-top: 10px;"><div class="gridlayout-column" style="padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><div class="checkboxinput checkboxinput--disabled checkboxinput--theme-light"><label class="checkboxinput-container"><div class="checkboxinput-control"><input type="checkbox" name="rememberUsername" tabindex="0" disabled="" value="on"><span class="icon fa fa-check icon--animate-none checkboxinput-control-check"></span><div class="checkboxinput-control-fill"></div></div><span class="checkboxinput-label">Remember my username</span></label></div></div></div></div><div class="gridlayout-row" style="padding-top: 10px;"><div class="gridlayout-column" style="padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><div class="commandbutton commandbutton--theme-disabled commandbutton--fill commandbutton--recommended"><button name="submitLogin" type="submit" class="commandbutton-button commandbutton-button--disabled" tabindex="-1"><div class="commandbutton-button-label">Log in</div></button></div></div></div><div class="gridlayout-column" style="padding-top: 10px; padding-left: 0px; clear: left; width: calc(100% + 0px);"><div class="gridlayout-content"><div class="commandbutton commandbutton--theme-disabled commandbutton--fill commandbutton--not-recommended"><button name="forgotPassword" type="button" class="commandbutton-button commandbutton-button--disabled" tabindex="-1"><div class="commandbutton-button-label">Forgot password?</div></button></div></div></div></div></div></div></div></div></div></div><div class="loading-overlay"><div class="loading-overlay-spinner"><img class="loading-overlay-image loading-overlay-image-loading" src="asset/loading-835f73.gif"><img class="loading-overlay-image loading-overlay-image-working" src="asset/working-7a75ca.gif"></div></div></div></div><input type="submit" class="form-hidden"></form></div></div><div class="mainlayout-welcomeheader" kind="layout-header" style="left: 0px; width: calc(100% + 0px);"><div class="welcomeheaderbar"><div class="welcomeheaderbar-logo"><img src="asset/logo-enterprise-4d576c.svg"></div><div class="welcomeheaderbar-title">Control Room</div></div></div><div class="mainlayout-announcement" kind="layout-header"></div><div class="mainlayout-toasttray" style="left: calc(50% - 150px);"><div class="mainlayouttoasttray"><div class="toasttray"></div></div></div></div></div><div><div data-reactroot="" class="popupmanager" data-popupmanager="1"><div data-popup="1" class="popup popup--theme-info popup--position-none"><div class="popup-content"></div><div class="popup-arrow"></div></div><div data-popup="2" class="popup popup--theme-info popup--position-none" style="top: 285px; right: 610.967px;"><div class="popup-content">Show</div><div class="popup-arrow" style="left: 29px;"></div></div><div data-popup="3" class="popup popup--theme-info popup--position-none"><div class="popup-content"></div><div class="popup-arrow"></div></div></div></div></div>
    <script type="text/javascript" src="script/app-d74bb7.js"></script><script type="text/javascript" src="../script/en_US/linguifymain.js?ce76f9368e95094e040e"></script>
</body></html>
```
CSS情報や属性情報がたくさんついているので、これらを省略して構造をわかりやすく書き直してみると以下になります。このように書くと、Pathが`1|1|1|1|1|1|2|1|1|2|2|1|1|1|1|1|1|1|2|1|1|1`で指定される理由がわかりますね。7番目、10番目、11番目、19番目の階層が2回目の出現で、他は22階層まで1番目の出現のタグを拾っているからです。

```HTML:sample2-2.html
<html lang="en">
<head>
        <title>Control Room | Log in | Automation Anywhere</title>
</head>
<body>
  <div>  <!-- 1 -->
    <div>  <!-- 2 -->
      <div>  <!-- 3 -->
        <div>  <!-- 4 -->
          <div>  <!-- 5 -->
            <form>  <!-- 6 -->
              <input name="_auto_complete_" />
              <div>  <!-- 7 ⇒ 2番目の出現 -->
                <div>  <!-- 8 -->
                  <div>  <!-- 9 -->
                    <div>
                      <div>
                        <div>Log in</div>
                        <div></div>
                      </div>
                    </div>
                    <div> <!-- 10 ⇒ 2番目の出現-->
                      <div> 
                        <div>
                          <div></div>
                        </div>
                      </div>
                      <div> <!-- 11 ⇒ 2番目の出現 -->
                        <div> <!-- 12 -->
                          <div> <!-- 13 -->
                            <div> <!-- 14 -->
                              <div> <!-- 15 -->
                                <div> <!-- 16 -->
                                  <div> <!-- 17 -->
                                    <label> <!-- 18 -->
                                      <div>
                                        <span>Username</span>
                                      </div>
                                      <div> <!-- 19 ⇒ 2番目の出現-->
                                        <label> <!-- 20 -->
                                          <div>  <!-- 21 -->
                                            <input name="username"/> <!-- 22 --> 👈👈👈👈　これをクローニング  👈👈👈👈👈
                                          </div>
                                          <span></span>
                                        </label>
                                      </div>
                                    </label>
                                  </div>
                                </div>
                                <div>
                                  <div>
                                    <label>
                                      <div>
                                        <span>Password</span>
                                      </div>
                                      <div>
                                        <label>
                                          <div>
                                            <input name="password"/>
                                          </div>
                                          <div>
                                            <div>
                                              <button>
                                                <span></span>
                                                <span></span>
                                              </button>
                                            </div>
                                          </div>
                                          <span></span>
                                        </label>
                                      </div>
                                    </label>
                                  </div>
                                </div>
                              </div>
...
(以下省略)
```

## サンプル3: Windowsアプリケーション
それでは、通常のWindowsアプリケーションはどうでしょうか。Windowsアプリケーションの場合はDOMXPathはなく、Pathのみになります。しかし、HTMLのようにタグがあるわけではありません。それでは、Pathは何を表しているのでしょう？

...結論から言うと、残念ながらよくわかりません。何しろリファレンスがどこにもないようです。英語のフォーラムとかも含め...
たとえば、電卓の「平方根」ボタンをキャプチャすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/126939e2-7ed4-a1ba-1d67-ab7ac831e4bb.png)
以下の通りになります。何やら10以上の数字、マイナスの数字も含まれています。いくつか試してみたところ、Pathの最後の数字は常にindexと同じ値になるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/28324d18-9dd9-7c8c-d129-96aaf135186a.png)

Windowsアプリケーションの場合、Pathは検索条件から外すのがベストプラクティスになっているようです。他にヒットできる属性がないときにのみ使う、とのことで、Path自体についての詳しい解説はないようですね...

# 最後に
いかがでしたでしょうか。DOMXPathとPathに指定すべき値をどのように構成するか、ご理解いただけたのではないかと思います。これが理解できると、デバッグ力が格段に上がります！

次回は、対象のオブジェクト別にUIオブジェクトの検索を行う際のベストプラクティスについて紹介します。

* [【Automation Anywhere】Object Cloning (Recorder:Capture) デバッグのベストプラクティス](https://qiita.com/RPAbot/items/ff5aae6f836e02f37d52)

# 参考記事

* [クローラ作成に必須！XPATHの記法まとめ](https://qiita.com/rllllho/items/cb1187cec0fb17fc650a)  by @rllllho さん