だいたいのブラウザには開発ツールが利用できるようになっています。メニューから選んだり画面を右クリックして「検証」「要素を調査」などのメニューを選ぶと特別な画面が表示されます。macのSafariでは環境設定で「開発メニューを表示」にチェックを入れる必要があります。

ここで現在のページに対してJavaScriptを実行することができます。

ブラウザによる検証

上の図はmacのSafariで開発ツールを開いたところです。全部見えていないのですがConsoleというタブが選択されていてここにJavaScriptを入力できるコンソールが表示されています。画面ではdocument.bodyと打ったところでbodyタグのノードが返されています。

XPathを指定してノードを返すコードは少し複雑なので関数にしました。以下をコピーして上のようなコンソールに貼り付けて実行してください。

function findXPath(xpath){
  var tags = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  if(tags.snapshotLength == 0){
    return null;
  }
  return tags.snapshotItem(0);
}

これでfindXPathという関数が使えるようになります。例えば以下のように

findXPath("//a");

とコンソールに入力すると画面上の一番最初に見つかるaタグのノードが返されます。マウスを返されたノードに重ねると画面上の該当のaタグの部分の色が代わりどこのノードかがわかります。

Google翻訳のページの翻訳ボタンを指定したいと思います。ボタンの上で右クリックして「要素を調査」を選ぶとソースが表示されます。ボタンは以下のようなタグでした。

<input type="submit" id="gt-submit" value="翻訳" tabindex="0" class="jfk-button jfk-button-action">

これを選択するXPathを作ります。簡単に以下のようなものを作りました。

//input[@type=’submit’]

コンソールから以下のように実行します。

findXPath("//input[@type='submit']")

画面上で実行したところです。マウスを返されたノードのテキストの上に重ねると翻訳ボタンの色が変わり正しく指定ができたことがわかります。

次回はXPathで指定した項目をSeleniumで操作したいと思います。