この記事はSelenium/Appium Advent Calendar 2015の3日目の記事です。
薄っすい記事も3日目です！こんにちは！
みなさんElectronやってますか！
私はまだやってません！ がんばってね！
Electronってなに？
クロスプラットフォームなデスクトップアプリケーションの開発フレームワークです。
要はNode.jsアプリのフレームワークなので、言語はJavaScriptになります。
最近流行っています。
例えば、人気エディタのAtomとか、Slackの公式クライアントとか、あとQiitaの公式クライアントのKobitoなんかはElectronベースで作られているらしいですね。
（他の事例はawesome-electronにまとめられていますので気になるなら読んでみましょう）
細かい話はきっとElectron Advent Calendar 2015で書かれますのでそっちを読みましょう！
なんでSeleniumのAdvent Calendarに持ってきたし
だってElectronアプリはSeleniumで自動操作できるって言うから…
https://github.com/atom/electron/blob/master/docs/tutorial/using-selenium-and-webdriver.md
Electronの中身はChromium
なんでSeleniumで操作できるかというと、Electronフレームワークの実態は次のようなものだからです。
- Google Chromeのオープンソース部分であるChromiumがまるごとバンドルされている
- Electronアプリの画面は、そのChromiumに表示されるWebアプリの画面
つまりChromeDriverがあれば自動操作・テストできるということになります！
Webアプリだけじゃなく、デスクトップアプリまでSeleniumで手をつけられるということになりますね～燃えますね～
ElectronでSeleniumやってみよう
では、試しにQiitaの公式クライアントのKobito for Windowsを自動操作して、どんな感じになるのか確認してみましょう。
Electron公式Wikiの手順にしたがって、JavaScriptバインディングでコードを書いてみます。対象とするKobito for Windowsのバージョンは1.5.0です。
ChromeDriverサーバーをダウンロードして起動する
ChromeDriverサーバーは公式サイトからダウンロードできます。
が、ここであわてて最新版をダウンロードしてしまうと、Electronにバンドルされている古いバージョンのChromiumを動かせないことがありますので、適合するバージョンをダウンロードするように注意しましょう。
ターゲットとするアプリにバンドルされているChromiumのバージョンがわからない場合は、タイムスタンプを参考にして近い日付にリリースされたバージョンをダウンロードするとだいたいOKかもしれません。
なお、Kobito 1.5.0は、2015年3月リリースのChromeDriver 2.15と適合しました。
ダウンロードできたら、起動しましょう。次のようなメッセージが出て待ち受け状態となります。
Starting ChromeDriver 2.15.322448 (52179c1b310fec1797c81ea9a20326839860b7d3) on port 9515
Only local connections are allowed.
このとき、ポート番号をチェックしておきましょう。次の手順で使います。
この例では、9515番ポートが使われています。
WebDriverJSをインストールする
WebDriverが動かせれば何でもOKなはずですが、この記事では公式Wikiに書かれている複数の手順のうちWebDriverJSだけ試します。
> npm install selenium-webdriver
ChromeDriverに接続するコードを書く
先の手順でチェックしたChromeDriverサーバーのポート番号をusingServer()の引数に追加して実行しましょう。
次のようなコードを実行すると、ChromeDriverサーバーを介してKobitoを起動できます。
const webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder()
.usingServer('http://localhost:9515')
.withCapabilities({
chromeOptions: {
binary: 'C:/Program Files/kobito/kobito.exe',
}
})
.forBrowser('electron')
.build();
あとは、Webアプリ向けのSeleniumコードを書くのと同じように、操作したい要素のロケーターを得て自動操作するコードを書くだけです。
なお、Kobitoはオープンソースではないので本来は画面のDOMをユーザー側で確認することができませんが、開発者向け設定からChromiumのDeveloper Toolsを表示させることができますので、これを利用してSeleniumのロケーターを得ることができます。
例えば、トップ画面の新規作成ボタンを押すためのコードは次のようになります。
driver.findElement(webdriver.By.xpath('//i[@data-tooltip="新規作成"]')).click();
ここまで具体的にできると、何かいろいろできそうな気がしてニヤニヤしますね～
ところで昔 node-webkit っていうやつもありましたよね
GitHubのエンジニアが node-webkit が嫌でわざわざ作ったのがElectronらしいですよ。
http://qiita.com/yaotti/items/6b4600be653ba81ec2cc
薄っすい話なので以上です。
次回も薄っすいの書きます！
Selenium/Appium Advent Calendar 2015はまだまだ薄っすいのも濃ゆいのも募集中です！