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

この記事は[Selenium/Appium Advent Calendar 2015](http://qiita.com/advent-calendar/2015/selenium)の3日目の記事です。

薄っすい記事も3日目です！こんにちは！
みなさんElectronやってますか！
私はまだやってません！ がんばってね！

# Electronってなに？

クロスプラットフォームなデスクトップアプリケーションの開発フレームワークです。
要はNode.jsアプリのフレームワークなので、言語はJavaScriptになります。

最近流行っています。
例えば、人気エディタの[Atom](https://atom.io/)とか、[Slackの公式クライアント](https://slack.com/downloads)とか、あとQiitaの公式クライアントの[Kobito](http://kobito.qiita.com/)なんかはElectronベースで作られているらしいですね。
（他の事例は[awesome-electron](https://github.com/sindresorhus/awesome-electron)にまとめられていますので気になるなら読んでみましょう）

細かい話はきっと[Electron Advent Calendar 2015](http://qiita.com/advent-calendar/2015/electron)で書かれますのでそっちを読みましょう！

# なんで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](https://www.chromium.org/)がまるごとバンドルされている
* Electronアプリの画面は、そのChromiumに表示されるWebアプリの画面

つまり**ChromeDriverがあれば自動操作・テストできる**ということになります！
Webアプリだけじゃなく、デスクトップアプリまでSeleniumで手をつけられるということになりますね～燃えますね～

# ElectronでSeleniumやってみよう

では、試しにQiitaの公式クライアントのKobito for Windowsを自動操作して、どんな感じになるのか確認してみましょう。
Electron公式Wikiの手順にしたがって、JavaScriptバインディングでコードを書いてみます。対象とするKobito for Windowsのバージョンは1.5.0です。

## ChromeDriverサーバーをダウンロードして起動する

ChromeDriverサーバーは[公式サイト](https://sites.google.com/a/chromium.org/chromedriver/)からダウンロードできます。
が、ここであわてて最新版をダウンロードしてしまうと、Electronにバンドルされている古いバージョンのChromiumを動かせないことがありますので、適合するバージョンをダウンロードするように注意しましょう。
ターゲットとするアプリにバンドルされているChromiumのバージョンがわからない場合は、タイムスタンプを参考にして近い日付にリリースされたバージョンをダウンロードするとだいたいOKかもしれません。

![](https://qiita-image-store.s3.amazonaws.com/0/33963/882a2557-3132-57bf-8e8e-16f9a99254d2.png)

なお、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を起動できます。

```js
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のロケーターを得ることができます。

![](https://qiita-image-store.s3.amazonaws.com/0/33963/1f97cb55-8a43-4748-a14c-d164fe48ae13.png)

例えば、トップ画面の新規作成ボタンを押すためのコードは次のようになります。

```js
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](http://qiita.com/advent-calendar/2015/selenium)はまだまだ薄っすいのも濃ゆいのも募集中です！