Testing your Electron apps with ChromeDriver

4e3f068bcac207404306e790c0d662ed?s=47 Kevin Sawicki
November 02, 2015

Testing your Electron apps with ChromeDriver

4e3f068bcac207404306e790c0d662ed?s=128

Kevin Sawicki

November 02, 2015
Tweet

Transcript

  1. TESTING YOUR ELECTRON APPS WITH CHROMEDRIVER

  2. KEVIN SAWICKI GITHUB @KEVINSAWICKI

  3. WHAT IS ELECTRON?

  4. 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
  5. 5 main process menu tray dialog window window window renderer

    process node DOM renderer process renderer process node DOM node DOM node ipc
  6. “TYPICAL” ELECTRON APP TESTING

  7. None
  8. PROS ▸Quick to run ▸Easy to inspect ▸Easy to debug

    ▸Easy to mock
  9. CONS ▸Complex setup and teardown ▸Leaks happens between tests ▸Main

    process code goes untested ▸Hard to test launch behavior
  10. 10 main process menu tray dialog window window window renderer

    process node DOM renderer process renderer process node DOM node DOM node ipc
  11. WHAT IS YOUR BIGGEST FEAR?

  12. None
  13. None
  14. YOUR APP HAS A BUG & CAN’T AUTO UPDATE

  15. WEBDRIVER AND CHROMEDRIVER

  16. WEBDRIVER IS AN OPEN SOURCE TOOL FOR AUTOMATED TESTING OF

    WEBAPPS ACROSS MANY BROWSERS. ChromeDriver Docs WHAT IS WEBDRIVER?
  17. CHROMEDRIVER IS A STANDALONE SERVER WHICH IMPLEMENTS WEBDRIVER'S WIRE PROTOCOL

    FOR CHROMIUM. ChromeDriver Docs WHAT IS CHROMEDRIVER?
  18. WEBDRIVERIO ▸WebDriver bindings for NodeJS ▸Promise based ▸Easily extensible ▸npm

    install webdriverio ▸http://webdriver.io
  19. None
  20. ELECTRON MEETS CHROMEDRIVER

  21. ELECTRON CHROMEDRIVER ▸Electron specific ChromeDriver build ▸Officially supported ▸npm install

    electron-chromedriver ▸github.com/atom/electron/releases
  22. PROS ▸Easily test launch behavior ▸Doesn’t pollute application state ▸Main

    process code is tested
  23. CONS ▸Slower to run ▸Hard to debug and occasionally flaky

    ▸Tests are harder to write
  24. INTRODUCING SPECTRON

  25. SPECTRON ▸Test harness for Electron ChromeDriver ▸Easily setup and teardown

    apps ▸Commands for BrowserWindow APIs ▸Test framework agnostic
  26. SPECTRON ▸npm install --save-dev spectron ▸Tested on Mac, Windows, and

    Linux ▸Tested on AppVeyor and Travis CI ▸github.com/kevinsawicki/spectron
  27. EXAMPLE USING MOCHA & CHAI

  28. None
  29. None
  30. None
  31. DEMO

  32. HELP WANTED

  33. HELP WANTED ▸Additional Electron commands ▸Make it less flaky ▸Docs

    and examples ▸Is it useful?