趣味で 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
してテストを流す。
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 のコメント見て気がついた…