Testing your Electron apps with ChromeDriver

Slide 1

Slide 1 text

TESTING YOUR ELECTRON APPS WITH CHROMEDRIVER

Slide 2

Slide 2 text

KEVIN SAWICKI GITHUB @KEVINSAWICKI

Slide 3

Slide 3 text

WHAT IS ELECTRON?

Slide 4

Slide 4 text

ELECTRON ▸Write apps in JavaScript, HTML, CSS ▸Run apps on Mac, Windows, Linux ▸Built on Chromium and Node.js ▸Free and open source ▸http://electron.atom.io

Slide 5

Slide 5 text

5 main process menu tray dialog window window window renderer process node DOM renderer process renderer process node DOM node DOM node ipc

Slide 6

Slide 6 text

“TYPICAL” ELECTRON APP TESTING

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

PROS ▸Quick to run ▸Easy to inspect ▸Easy to debug ▸Easy to mock

Slide 9

Slide 9 text

CONS ▸Complex setup and teardown ▸Leaks happens between tests ▸Main process code goes untested ▸Hard to test launch behavior

Slide 10

Slide 10 text

10 main process menu tray dialog window window window renderer process node DOM renderer process renderer process node DOM node DOM node ipc

Slide 11

Slide 11 text

WHAT IS YOUR BIGGEST FEAR?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

YOUR APP HAS A BUG & CAN’T AUTO UPDATE

Slide 15

Slide 15 text

WEBDRIVER AND CHROMEDRIVER

Slide 16

Slide 16 text

WEBDRIVER IS AN OPEN SOURCE TOOL FOR AUTOMATED TESTING OF WEBAPPS ACROSS MANY BROWSERS. ChromeDriver Docs WHAT IS WEBDRIVER?

Slide 17

Slide 17 text

CHROMEDRIVER IS A STANDALONE SERVER WHICH IMPLEMENTS WEBDRIVER'S WIRE PROTOCOL FOR CHROMIUM. ChromeDriver Docs WHAT IS CHROMEDRIVER?

Slide 18

Slide 18 text

WEBDRIVERIO ▸WebDriver bindings for NodeJS ▸Promise based ▸Easily extensible ▸npm install webdriverio ▸http://webdriver.io

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

ELECTRON MEETS CHROMEDRIVER

Slide 21

Slide 21 text

ELECTRON CHROMEDRIVER ▸Electron speciﬁc ChromeDriver build ▸Ofﬁcially supported ▸npm install electron-chromedriver ▸github.com/atom/electron/releases

Slide 22

Slide 22 text

PROS ▸Easily test launch behavior ▸Doesn’t pollute application state ▸Main process code is tested

Slide 23

Slide 23 text

CONS ▸Slower to run ▸Hard to debug and occasionally ﬂaky ▸Tests are harder to write

Slide 24

Slide 24 text

INTRODUCING SPECTRON

Slide 25

Slide 25 text

SPECTRON ▸Test harness for Electron ChromeDriver ▸Easily setup and teardown apps ▸Commands for BrowserWindow APIs ▸Test framework agnostic

Slide 26

Slide 26 text

SPECTRON ▸npm install --save-dev spectron ▸Tested on Mac, Windows, and Linux ▸Tested on AppVeyor and Travis CI ▸github.com/kevinsawicki/spectron

Slide 27

Slide 27 text

EXAMPLE USING MOCHA & CHAI

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

DEMO

Slide 32

Slide 32 text

HELP WANTED

Slide 33

Slide 33 text

HELP WANTED ▸Additional Electron commands ▸Make it less ﬂaky ▸Docs and examples ▸Is it useful?