課題
html要素を一個だけ選択したいのに出来ない場合に、対処したい
やりかた
◆ Chromeを立ち上げ、右側の設定ボタンをクリックしてブックマークツールバーを表示させる
◆ 下記URLを開き、青色の「CasperJS Utils」ボタンをツールバーへドラッグする
http://docs.casperjs.org/en/latest/modules/clientutils.html#index-2
◆ html要素を選択したいページへ移動する。
※ 以下、例として既に開いておいたGoogle Analyticsページを使用する
◆ ブックマークツールバーへドラッグした CasperJS Utils をクリックする
※ クリックするだけで良い。
◆ 選択したいhtml要素を表示させる。
※ 以下、例として下画面のカーソルがかぶさっているチェックボックスを選択させたいものとする
◆ チェックボックスにカーソルを合わせ、右クリック→「要素を検証」をクリックする
◆ Chrome デベロッパーツールが起動し、選択した要素の部分が青色で表示される
◆ デベロッパーツール右側の歯車アイコンの左のアイコンをクリックする
◆ コンソールが表示されるので、下記の文を入力してEnterキーを押下する
__utils__.findAll('input[type="checkbox"][class="ACTION-toggle TARGET-view"]')
◆ 複数の要素が出てきた（今回は４個）。
◆ この中から特定の要素を選択する。idタグで選別すればよさそうな感じだが、このidタグはどうやらページが読み込まれるたび動的に数字が変化するらしいので使えない。そこで、要素の特定に使えそうなプロパティを選ぶことにする。
デベロッパーツールの右ウインドウ「Properties」タブをクリックする。
◆ 一番上の左三角をクリックして展開する
◆ 展開した部分を探してゆくと、offsetParentの値がどうやらチェックボックスの属しているダイアログであるらしいことが分かる。idも固定のようなので、ここを指定してやれば一意に選択できそうである。
◆ offsetParentの値を選択するため、先程コンソールに入力した文を以下のように書き換える
__utils__.findAll('div.ID-compareConceptSelector._GAn1 input[type="checkbox"][class="ACTION-toggle TARGET-view"]')
◆ 書き換えた文をコンソールに入力し、Enterキーを押下する
一意の要素が選択されることを確認する。
試しに下記をコンソールに入力してチェックボックスをチェックしてみる
__utils__.mouseEvent('click', 'div.ID-compareConceptSelector._GAn1 input[type="checkbox"][class="ACTION-toggle TARGET-view"]')
チェックできた。
CasperJSでクリック遷移させる場合は文法を変える必要もあるが、特定要素の指定をするときに割と簡単にできるので試す価値ありです。
不明点ありましたらコメント欄まで。