Seleniumの仕組みブラウザのオートメーションツール、Seleniumについて解説します。第1回では、Sleniumの基本的な仕組みや、用語を取り上げます。ツールをインストールし、実際に動かしてみましょう。和仁フロントエンド・エンジニア次回このシリーズの記事一覧をみる2014年の記事です。記事中で紹介されている環境とコードでは、現在動作しません。ServerまとめSelenium(セレニウム)はブラウザのオートメーションツールです。自動でブラウザを操作することでWebサイトの動作のテストを行うことができます。本シリーズではSeleniumの仕組みや基本的な使い方、Seleniumを使ったテストの記述方法などについて解説します。初回である今回は、Seleniumの基本的な仕組みについて解説します。WebDriverがあります。それぞれ、Selenium1、Selenium2と呼ばれることもあります。RCはJavaやPythonなどの言語で書いたスクリプトを元に、ブラウザを操作するためのJavaScriptを生成し、対象のページにそのJavaScriptを埋め込んでブラウザを操作するという仕組みでした。RCはJavaScriptのコードを対象のページに埋め込んでブラウザを自動的に操作するという仕組み上、セキュリティの制限を受けるなどの欠点がありました。WebDriverです。WebDriverという名前になりました。RCの機能は非推奨となり開発を凍結し、今後はWebDriverのAPIの開発を進めていくことが発表されています。WebDriverのAPIはW3Cで標準化が進められています。WebDriverについて解説していきます。WebDriverがどのような仕組みでブラウザの自動操作を行うのかを解説します。WebDriverは各種ブラウザごとにドライバが用意されています。API*に対応しており、このAPIにしたがってリクエストすることでブラウザを操作することができます。Transferの略で、リソースにURLで名前を付け、HTTPメソッド(GET、POST、PUT、DELETEなど)で操作するという考え方です。ブラウザ自動操作の仕組み各ドライバによって形式やブラウザを操作する方法はさまざまです。FirefoxドライバはFirefoxの拡張機能として用意されていますし、Chromeドライバは実行ファイル(バイナリ)で提供されています。WebDriverのアーキテクチャを理解するために、ライブラリを使わずにブラウザの操作をしてみましょう。Driverを利用します。以下から自分の環境にあったzipファイルをダウンロードします*。chromedriverでもインストールできます。その場合はchromedriverコマンドで起動できます。http://chromedriver.storage.googleapis.com/index.htmlzipファイルを解凍すると実行ファイルが得られるので、そのファイルをコマンドラインから実行します。Xだとchromedriverというファイルが得られるので、解凍したディレクトリにcdで移動して次のようにします。./chromedriverそうすると9515番ポートでドライバが起動します。/sessionに従ってHTTPリクエストを発行します。別タブなどで、もうひとつシェルを起動して以下のコマンドでリクエストします。Xであればデフォルトでインストールされています。WebDriverのアーキテクチャを知るためにコマンドラインからHTTPリクエストをするという冗長なことを行っていますが、実際には各言語のライブラリが使いやすいインターフェースを提供してくれるので、Seleniumを使うにあたってこのコマンドを覚える必要は一切ありません。上記コマンドが成功するとChromeのウィンドウが新しく開き、次のようなレスポンスがターミナルに返ってくるはずです(実際のレスポンスは1行ですが、見やすいように整形しています)。}}このレスポンスに含まれるsessionIdを使って、今開いたブラウザを操作できます。URLを指定して特定のページを開いてみましょう。/session/:sessionId/urlを利用します。http://localhost:9515/session/a433343ec6e678b1bc17a93bbbf6aea7/url*注:sessionIda433343ec6e678b1bc17a93bbbf6aea7の部分は、先ほどのsession作成時に取得したsessionIdを適宜入れてください。これでピクセルグリッドのサイトに遷移すれば成功です。APIを利用してブラウザを自動的に操作します。ProtocolでHTTPリクエストを行うとブラウザが操作できることはわかりました。WebDriverを使う場合、先ほどの例のように、自分でHTTPリクエストを作成して操作するということはなく、これらのAPIを扱うためのクライアントが用意されています。現在Seleniumが公式で提供しているクライアントライブラリは次の言語です。JavaRubyPythonC#Javascript(Node.js)クライアントを用いたブラウザ自動操作の仕組み例えばNode.jsの公式ライブラリであるselenium-webdriverを利用してみましょう。selenium-webdriverはnpmでインストールできます。selenium-webdriverlaunch_firefox.jsという名前で次のように記述し実行します。launch_firefox.jsこれでFirefoxが立ち上がってピクセルグリッドのサイトに遷移し、すぐにブラウザが閉じれば成功です。npmのselenium-webdriverはFirefoxのドライバを同梱しているので、自前でドライバを準備する必要がありません。ChromeやIEなどのドライバは同梱されていませんので、自分でダウンロードしてパスが通っているところに設置する必要があります。先ほどのChromeドライバをcurlコマンドで動かした際には、chromedriverのサーバーを起動し、そのサーバーに対してリクエストを行いましたが、ここではドライバを起動していません。これはライブラリがドライバの起動も同時にやってくれているからです。IDEはFirefoxの拡張機能としてインストールでき、ブラウザ上で要素を選択するなどしてSeleniumのテストを記述できるツールです。IDEのイメージが強い方もいるかもしれません。WebDriverの機能を利用できるGUIツールの開発が活発です。IDEと同じくFirefoxの拡張機能としてインストールできます。Builderも検討してみるといいかもしれません。Server公式で用意されているライブラリのほとんどはドライバを自動で起動する機能を持っていますが、特定のドライバに対応してないライブラリもあります。上記で利用したNode.jsの公式ライブラリは現在のバージョン(2.44.0)で対応しているのはFirefoxとChromeのみです。Serverを利用します。ServerはJavaで書かれたサーバーで、クライアントとドライバの中継サーバーとして振る舞うので、クライアントライブラリがドライバの管理をする必要がなくなります。Serverの利用を前提としているケースが多いようです。Protocolでリクエストを行います。Serverは適切なブラウザのドライバを起動して、ドライバにリクエストを行います。Serverはダウンロードページからselenium-server-standalone-xxx.jar(xxxはバージョン番号)というファイルをダウンロードでき、次のコマンドで起動できます*。selenium-server-standaloneでもインストールできます。その場合はselenium-serverコマンドで起動できます。WebDriverで実行したり、複数のサーバーで同時にテストを行うためのGridという機能も持っていますが、それらについては今回のシリーズでは触れません。WebDriverのアーキテクチャについて解説しました。実際にSeleniumを利用する上で必ず知っておかないと困るという知識ではありませんが、このようなことを知った上でSeleniumを利用すると、より理解が増すと思います。次回は実際にブラウザを操作してテストを行うプログラムを書いていきます。和仁フロントエンド・エンジニアHTMLコーダー、JavaScriptプログラマ、PHP、Perlのプログラマといった職務を経験後、2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用、開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はJavaScriptとRuby。著書に『ノンプログラマのためのJavaScriptはじめの一歩』(単著:技術評論社、2012年11月7日)があり、共著も多数。Designなどにも寄稿。特定商取引法に基づく。