なんか書いていこうぜー .com

趣味で Electron アプリを少しずつ作成しているのであるが、JavaScript のテストをまともに書ききったことがないため、導入してみようと思い、E2E のツールとしてprotractor を導入したので、メモ。

protractor とは

AngularJS の end to end testing tool として生まれているが、AngularJS を使っていなくても導入できる。 AngularJS を使っている場合は、{hoge} みたいな画面に bind している値を取得できて便利らしい。

導入すると一緒にインストールされる webdriver-manager を使ってブラウザを動作させてテストを実行する。

導入

https://angular.github.io/protractor/#/tutorial を見ながら導入する。

$ npm i --save-dev protractor
$ ./node_modules/.bin/webdriver-manager update

project の直下に conf.js を作成し、ここにend to end test の設定を書き、 protractor conf.js してテストを流す。

$ protractor conf.js

conf.js にいろいろと設定を書いておき、この設定にそってテストが実行される。設定の書き方は Configuration File Reference を見ながら書く。

{% gist a58824ebbfadee1c788b #file-conf-js %}

L2-7 は、power-assert を使うために、babel-plugin-espower を噛ませる設定。

L10 の chromedriver は、protractor を導入した際に一緒にインストールされたものを指定する。 L11 は、./node_modules/.bin/webdriver-manager start した際にコンソールに出力されるアドレスを記載する。

L14-16 に実行する end to end test のパターンを記載する。流しやすいように e2e というディレクトリを作成してそこにテストを配置した。 L17-24 で、Electron 用の設定を記載している。browserName には chrome を、chromeOptions の binary には electron-prebuilt のバイナリのパスを指定している。

ここがあまり調べても載ってなかったのだが、args に app= として、Electron の entry point になっているjs を指定する必要がある。 これがないと、blank のElectron のページが立ち上がって終わる…

L26 の browser.ignoreSynchronization = true; は非AngularJS なアプリで protractor を利用する際に必要とのこと。参照: stackoverflow

{% gist 99c2337c1d611b322356 #file-showhome-e2e-js %}

browser.get(url) みたいなもので希望するページを指定できたりするが、Electron の場合、起動時に開いているページについて特に指定しなくてもOKっぽい。トップページの class=“title” に “こんにちは” とあればテストが通る。

大事なこと

Electron アプリの場合、args に app=entry point の js が必要です。

※ GitHub のソース検索すると、http://localhost:8000 と書いてあるソースが多いが、それでは動かなかった…ここに到達するのに時間かかった。using-selenium-and-webdriver.md の 3. Connect to chrome driver のコメント見て気がついた…