Recommended
More Related Content
What's hot
What's hot (20)
Similar to Spectron
Similar to Spectron (20)
Spectron
- 1. Spectron
- 3. Ruby ‑> JavaScript(Node) あるある return を書かない > hoge = function hoge() { "hogehoge" } [Function: hoge] > hoge() undefined
- 4. 0 にハマる > [0, 1, null].filter(val => { return val }) [ 1 ]
- 5. this にハマる NG : thisは呼び出し元=== ary1 convert() { this.ary1.forEach(function(val) { this.ary2.push(this.str2num(val)) }) }
- 6. OK : thisを渡す convert() { this.ary1.forEach(val => { this.ary2.push(this.str2num(val)) }, this) } OK : Allow functionを使う(thisを語彙的に束縛する) convert() { this.ary1.forEach(val => { this.ary2.push(this.str2num(val)) }) }
- 8. 本題
- 11. Electron デスクトップアプリケーションフレームワーク Chromium + Node.js HTML + CSS + JavaScript クロスプラットフォーム対応 JS界でのこの分野はまだメジャー (参考)
- 12. Electronおさらい とっとるびーでも何度か発表あり(20th, 25th) メインプロセス: Windowを起動したりメニュー操作イベントを受け取ったり Node.js レンダープロセス ブラウザ(HTML + CSS + JavaScript) をレンダリング Chromium プロセス間通信はipcを用いる。イベントフックしてやり取りする
- 14. Electron App your-app/ ├── package.json ├── main.js └── index.html const { app, BrowserWindow } = require('electron') function createWindow () { win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile('index.html') } app.on('ready', createWindow) $ npm run start
- 16. Webdriver
- 17. Webdriver ブラウザのテストツール ページ上の要素を操作できる(クリック, 入力等) ページ上の要素の有無や状態をテストできる WebDriverIO === WebDriver binding for Node.js
- 18. ElectronアプリをSpectronでテストする HTML + CSS + JavaScriptで作られたデスクトップアプリを、 WebDriverでテストする。 単純明快で、普通のアプリならテストしやすいよね～と思うじゃないで すか。
- 19. 例えばslack 入力・表示のテストとか チャンネル切り替えとか 設定変更とか コマンドとか => ブラウザのレンダリング領域のテストは容易 http://webdriver.io/api.html
- 20. Demo : npm runしてテストする https://github.com/electron/spectron#usage electronアプリを起動してWindowの数をテストするだけ
- 23. メニュー操作
- 26. メニュー操作vs Spectron SpectronからElectronアプリケーションのMenuを操作する MenuのAPIがJSONにserializeされていないので、process間通信 が必要なSpectronでは操作が難しいというのがその理由のようで す。 同じ様に、dialogモジュールの操作も出来ません。 アプリケーションの操作をChrome Driverを通じて行うのが基本理 念のSpectronでは、これらのnativeなAPIを必要とする操作に対す るサポートはまだ不十分、というのが実情です。
- 28. spectron‑fake‑menu でやっていること https://github.com/electron/spectron/issues/94 Electronは‑‑requireオプションで、Electronの起動直前にスクリプ トを差し込むことができます。 これを利用して、Mainプロセスにspectron‑fake‑menu用のイベン トを受け取る口を仕込んでいます。 require('electron').ipcMain.on( 'SPECTRON_FAKE_MENU/SEND', (_e, labels) => { const item = findItem( require('electron').Menu.getApplicationMenu().items, labels ); item.click(); });
- 31. spectron‑fake‑menu example describe('Increment', function() { this.timeout(10000); let app; beforeEach(function() { app = createApplication(); return app.start(); }); afterEach(function() { return app.stop(); }); it('increment count', () => { return app.client.waitForExist('#count') .then(() => { fakeMenu.clickMenu('Count', 'Increment'); return waitForChangeCount(app, '1'); }) .then(() => assert.ok(true)); }); });
- 32. waitForChangeCount() export function waitForChangeCount(app, count) { return new Promise((resolve, _reject) => { const timer = setInterval(() => { app.client.getText('#count').then((text) => { if (text === count) { clearInterval(timer); resolve(); } }); }, 1000); }); }
- 33. とは言え、メニュー操作はクリア
- 34. しかし 某PCアプリの最初の操作 1. メニュー : ファイル> 開く 2. ファイル選択のダイアログが開く 3. 画像or 動画を選択する 4. 3が再生される
- 44. 継続的インテグレーション
- 45. Travis CI ### .travis.yml ### before_script: - "export DISPLAY=:99.0" - "sh -e /etc/init.d/xvfb start" - sleep 3 # give xvfb some time to start
- 46. 実装例& 一部Demo