Download to read offline
![Ruby ‑> JavaScript(Node) あるある
return を書かない
> hoge = function hoge() { "hogehoge" }
[Function: hoge]
> hoge()
undefined](https://image.slidesharecdn.com/tottoruby32-spectron-190125151514/85/Spectron-3-320.jpg)
![0 にハマる
> [0, 1, null].filter(val => { return val })
[ 1 ]](https://image.slidesharecdn.com/tottoruby32-spectron-190125151514/85/Spectron-4-320.jpg)
![Windowの状態確認
client.getSelectedText()
client.getWindowCount()
client.waitUntilTextExists(selector, text, [timeout])
client.waitUntilWindowLoaded([timeout])
client.windowByIndex(index)](https://image.slidesharecdn.com/tottoruby32-spectron-190125151514/85/Spectron-42-320.jpg)
![wait系のAPIが2つしかない
WebDriverを使ったことがある人は「待つ」処理がどれだけ必要か分か
るはず。
普通にテストを書いていると「xxの処理を待つ」が頻発。
client.waitUntilTextExists(selector, text, [timeout])
client.waitUntilWindowLoaded([timeout])
をラップした便利関数が多数必要になる。
例) window数がN個になるまで待つ](https://image.slidesharecdn.com/tottoruby32-spectron-190125151514/85/Spectron-43-320.jpg)
Spectron
- 1.
- 2.
- 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)) }) }
- 7.
- 8.
- 10.
- 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
- 15.
- 16.
- 17. Webdriver ブラウザのテストツール ページ上の要素を操作できる(クリック, 入力等) ページ上の要素の有無や状態をテストできる WebDriverIO ===WebDriver binding for Node.js
- 18. ElectronアプリをSpectronでテストする HTML + CSS+ JavaScriptで作られたデスクトップアプリを、 WebDriverでテストする。 単純明快で、普通のアプリならテストしやすいよね～と思うじゃないで すか。
- 19.
- 20. Demo : npmrunしてテストする https://github.com/electron/spectron#usage electronアプリを起動してWindowの数をテストするだけ
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. メニュー操作vs Spectron SpectronからElectronアプリケーションのMenuを操作する MenuのAPIがJSONにserializeされていないので、process間通信 が必要なSpectronでは操作が難しいというのがその理由のようで す。 同じ様に、dialogモジュールの操作も出来ません。 アプリケーションの操作をChromeDriverを通じて行うのが基本理 念のSpectronでは、これらのnativeなAPIを必要とする操作に対す るサポートはまだ不十分、というのが実情です。
- 27.
- 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(); });
- 29.
- 30.
- 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が再生される
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 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.
- 47.