Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Effective E2E Test In An Electron Application
Search
joe_re
April 24, 2017
Technology
1
780
Effective E2E Test In An Electron Application
第36回 西日暮里.rb 「Electronではじめるアプリ開発」発売記念 LT
joe_re
April 24, 2017
Tweet
Share
More Decks by joe_re
See All by joe_re
Building Public API with GraphQL
joere
3
75
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1k
Real-Time applications with GraphQL
joere
0
220
Prisma2 with Graphql
joere
3
930
Go beyound static on Netlify
joere
1
280
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
310
Mock Native API in your E2E test
joere
2
1.1k
Data feching and caching on Apollo Client
joere
2
2.8k
Other Decks in Technology
See All in Technology
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.5k
Writing Ruby Scripts with TypeProf
mame
0
370
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
680
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
7
1.2k
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1k
PdM採用とAIの製品活用を同時に頑張ってみた話 / EM oasis 20250418
rakus_dev
0
120
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
470
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
5
570
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
190
Dynamic Reteaming And Self Organization
miholovesq
3
650
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
130
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
15
4.5k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.5k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Scaling GitHub
holman
459
140k
How to Ace a Technical Interview
jacobian
276
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
Transcript
Effective E2E Test In An Electron Application @joere
Who am I? twitter: @joe_re github: @joere 西日暮里.rb オーガナイザ working
in freee.K.K
最近本を書きました
今日はElectron の E2E テストの書き方について 3 つのポイントをお話します
Spectron
What is Spectron? Electron アプリケーションのE2E テストを実行するための テストツール テストコードの中でElectronAPI を叩くことができる ChromeDriver
+ WebDriverIO を通じてアプリケーションの 操作、情報取得が行える
Demo CafePitch https://github.com/joere/cafepitch Electron 製のマークダウンで書けるプレゼンツール このスライドもCafePitch で作っています
Example const app = new spectron.Application({ path: 'path/to/your/app' }); describe('application
launch', function () { this.timeout(10000); beforeEach(function () { return app.start(); }); afterEach(function () { return app.stop(); }); it('shows an initial window', function () { return app.client.getWindowCount().then(function (count) { assert.equal(count, 1); }); }); });
Strong Points Webdriver.io を通じて、任意のDOM 要素にアクセスして テストが書ける Electron のAPI をテストコードの中から透過的に呼び出す ことができる
Electron 内部のChromium をそのまま使うのでセットアップ の手間がない( 基本的にパスを指定するだけ) Travis やAppVeyor などのCI サービスをサポートしている
しかし、E2E テストは 壊れやすくメンテナンス が大変...
Effective1: Using Page Object Pattern
Why maintenance of E2E tests are difficult? E2E テストは画面変更に弱い 画面を変更すると関連するすべてのテストケースに
影響がある 画面要素へのアクセスが大量に発生するので 修正すべき箇所を把握しづらい
Page Object Pattern is... テストコードをページとシナリオに分ける アプリケーションの1 つの画面をオブジェクトと捉える (Page Object) Page
Object にはアサーションは含まず、 ページ操作を振る舞いとして記述する アサーションはシナリオに記述する (Page Object はライブラリとして利用されるイメージ) PageObject にはアサーションは含まない 他にも原則があるので、詳しくはSelenium の公式ページへ (https://github.com/SeleniumHQ/selenium/wiki/PageObjects)
Strong Points シナリオから煩雑な画面操作が取り除かれるので、 見通しが良くなる 複数のシナリオから1 つのPage Object を利用するので、 画面変更時にはPage Object
を変更するだけで良い ( 画面変更に強い) Page Object の振る舞い === 画面操作となるので、 変更箇所の把握が用意になる
Example export default class SlideEditorPage { constructor(private client: Client<void>) {}
inputText(text: string): WebdriverIO.Client<void> { return this.client.waitForExist('#editor').then(() => { this.client.setValue('#editor textarea', text); }); } getSlideHtml(): WebdriverIO.Client<string> { return this.client.waitForExist('.slide-content') .then(() => this.client.getHTML('.slide-content')) .then((html) => typeof html === 'string' ? html : html.join()); } ... }
話は変わって
皆さんE2E テスト 書いてますか
テストが失敗したとき どうしてますか
E2E テストの失敗は 原因を追うのが難しい...
そこで
Effective2: Record the state at the time of test failure
Electron + Spectron のAPI を利用して 失敗時の状態を取得して記録する 画面キャプチャ BrowserWindow.capturePage() ログ client.getRenderProcessLogs()
client.getMainProcessLogs()
Demo
Example function capturePage(app: Application, testName: string) { return app.browserWindow.capturePage().then((img) =>
{ fs.writeFileSync(`${outputDir}/capture_${testName}.png`, img); }); } function reportLog(app: Application, testName: string) { return Promise.all([ app.client.getRenderProcessLogs(), app.client.getMainProcessLogs() ]).then(([ rendererLogs, mainLogs ]) => { const logs = JSON.stringify({ renderer: rendererLogs, main: mainLogs }); fs.writeFileSync(`${outputDir}/logs_${testName}.txt`, logs, "utf8"); }); }
Effective3: Mock a native API
現在のSpectron(v3.6.2) では メニューの操作やファイルダイアログの 操作はできない https://github.com/electron/spectron/issues/21 Menu のAPI がJSON にserialize されていないので、process
間通信が必要なSpectron では操作が難しい アプリケーションの操作をChrome Driver を通じて行うのが Spectron の基本なので、これらのnative なAPI を必要とする 操作に対するサポートはまだ不十分
ところでElectron は ネイティブなAPI 呼び出しも、 JavaScript から 扱えるようにするため、 JavaScript のレイヤーで ラップしている
つまりElectron のAPI を 局所的に差し替えてしまえば テストができる
Electron のrequire オプションを利用する Electron は --require オプションで、起動直前にスクリプト を読み込ませることができる これを利用して、テスト実行時だけ1 部のElectron
のAPI を 書き換えるスクリプトを読み込む
Menu は作ってライブラリにした spectronfakemenu https://github.com/joere/spectronfakemenu Spectron から任意のラベルを持つメニューの クリックができる fakeMenu.apply(app); // apply
fake menu fakeMenu.clickMenu('Config'); // 'Config' Menu click fakeMenu.clickMenu('File', 'CloseTab'); // File->CloseTab Menu click
ダイアログはこんな感じで差し替える const { dialog } = require('electron'); function mockShowSaveDialog() {
return 'sandbox/test.md'; }; function mockShowOpenDialog() { return [ 'sandbox/test.md' ]; }; dialog.showSaveDialog = mockShowSaveDialog; dialog.showOpenDialog = mockShowOpenDialog;
Demo
E2E テストでモックを使うのは 基本的にマナー違反なので、 あくまで必要最小限にしましょう
おさらい Effective1: Using Page Object Pattern Effective2: Record the state
at the time of test failure Effective3: Mock a native API
ところでこの話は全部本 に書いてあります( 宣伝)
Thanks for your attention!