end-to-end tests for Electron Apps using WebdriverIO

Photo by ThisisEngineering RAEng on Unsplash

this post is tailored for developers who are already familiar with building desktop applications with Electron. It will guide you through the steps to set up a minimalistic environment for automated tests.

the boilerplate code, essential configurations & a sample test written with Mocha can be found here.

[embed]GitHub — hamzeen/electron-test-automation: boilerplate: UI automation tests for electron using… boilerplate: UI automation tests for electron using WebdriverIO — GitHub — hamzeen/electron-test-automation…github.com

for the most part, the repo is based on the demo that was presented by Christian Bromann at this talk though it was tweaked a bit to run it on a widows box.

if you have an older version of Node.js (< v18.0.0), you might not be able to work with it. A good option here will be to go for Node Version Manager (NVM) — a tool for managing multiple Node.js versions.

• For windows users, the following guide helps understand the tool & point to an installer, https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/
• This guide should help unix users, https://medium.com/geekculture/how-to-install-node-js-by-nvm-61addf4ab1ba
• here you can find how to use it, https://heynode.com/tutorial/install-nodejs-locally-nvm/

2. install dependencies

install all the dependencies for this project.

npm install

2. launch the app

If you are curious to see the app for yourself before you run the tests.

npm start

3. run the tests

The repo already contains webdriverIO configurations. So if you have gotten this far, you’re up for some magic now!

npm run build
npm run package
npm run wdio

you may skip the first 2 commands above (build and package). For instance, when you have just updated/added test case(s). They are only meant to be run for the first time & subsequently after you change the code of your application.

happy holidays!