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はまだまだ薄っすいのも濃ゆいのも募集中です！

Seleniumの薄っすい話3:俺とElectron