selenium webdriverによるHTML要素の取得方法

今回は、node.jsからselenium webdriverを介してWEBサイトのHTMLを取得する際の話題です。

まず、selenium webdriverモジュールを読み込み、driverオブジェクトを生成してURLをGETします。
（selenium-webdriverはnpmなどで事前にインストールしておきます。）

node.js

var wb = require("selenium-webdriver");

//今回、phantomjsのghostdriverをつかったヘッドレスな環境で実行していて、ghostdriverがポート8910で起動してる。
var driver = new wb.Builder()
		.usingServer("http://localhost:8910") 
		.withCapabilities(wb.Capabilities.chrome()) //実際にブラウザはないが、仮想のgoogle chromeを使用している。
		.build();

driver.get(URL)でページをfetchすることで、driverオブジェクトにページ情報が格納される。

//ためしにyahooのTOPをgetしてみる
driver.get("http://www.yahoo.co.jp/");

さて、ここからページのHTML要素にアクセス方法は、ID指定やXPathなどいくつかありますが、
個人的に一番使いやすいのがCSSセレクタで取得する方法です。

//wb.By.css(CSSセレクタ)で要素にアクセス
driver.findElement(wb.By.css("#srchbd ul.tab > li:nth-of-type(1)")).then(function(elem){
    //要素の内包テキストを取得
    elem.getAttribute("innerText").then(function(txt){
        console.log(txt);
    });
});

※node.jsではfindElementやgetAttributeは非同期で走るので、
then等でコールバックを指定する必要があります。

僕の場合もともとフロントエンドの開発が好きで
jqueryやスタイルシートでCSSセレクタに触れる機会が多かったのでかなり取っ付きやすかったです。。

要素の検索速度等を考えるとID指定の方が早いかもですね！