ちょっとしたDevtoolsの便利な使い方です

このユーザフォーラムを題材にしますが

TOP

を開きDevtoolsをopen(F12等で)

Ctrl+F を押し検索エリアを表示

xpathを入力//span[@class='ap-questions-title']

すると要素が黄色く選択されます。

この検索エリアの上部に◀div.ap-questions-inner span.ap-questions-title▶

のように表示されているエリアがありますが、これは要素の階層を表したcssセレクタ表記になっていますこの部分を左スクロールしていきフレームが存在しないか確認することも重要

フレームがあったら、この要素を操作したい場合はフレーム操作が必要になります。

もちろんユーザフォーラムには存在しませんが

検索エリアに入力したxpathの隣に 1/135 のように

全体の要素の何番目が選択されているか表示されているのですが

WinActorでxpathを使用する場合は 1/1 の状態のxpathでないと要素を認識できません

したがって１番目の行を取得したい場合は

(//span[@class='ap-questions-title'])[1]

と変更してみます。そうすると 1/1 の状態になります。

この時点で、この要素をクリックしたら画面遷移するのか確認したいと思いますが

要素の黄色にハイライトされている隣あるいは下に == $0 と表示されていると思います

この $0 は選択された要素を表しています

要素の画面からコンソール画面に移動して

$0 と入力すると span.ap-questions-title と要素のcssセレクタ表記が表示されていると思います

ここで　$0.click() と入力すると要素のクリックになるのですが

おわかりのように、spanのクリックのため画面遷移は行われません

（span/a をクリックしないと駄目）

要素の検索画面に戻って再度a要素を取得してみても良いのですが

コンソールからxpath指定で要素を選択してみます。下記を入力($xを使う)

$x("(//span[@class='ap-questions-title']/a)[1]")

すると[s.ap-questions-hyperlink]と表示されています

$xはコレクション形式（配列）を返すようになっているので

$x("(//span[@class='ap-questions-title']/a)[1]")[0]

とすると要素単体を表します

さて

$x("(//span[@class='ap-questions-title']/a)[1]")[0].click()

と入力すると

画面遷移します

最終的にユーザフォーラムの一覧から1行目の詳細へ遷移するxpathは

(//span[@class='ap-questions-title']/a)[1]

のようになります

フレームの確認　xpathの動作確認にお悩みの方はこんなやりかたもありますよ

といった話でした