Javascript is required
·
4 min read
·
1293 views

Run Automated Electron App Tests Using Travis CI

Run Automated Electron App Tests Using Travis CI Image

Last year I developed the Standup Picker, which is an Angular application running in an Electron shell.

As I released new versions while older versions were already in use, I wanted to gain more confidence while releasing newer versions of my application.

As the source code is available at GitHub, I researched for free alternatives to Jenkins which we used at work for Continuous Integration (CI).

I found Travis, a free continuous integration platform for GitHub projects.

My Expectations

Deployment Meme

I wanted to integrate automated E2E and unit tests before each release of the Electron application. In my case, a release should be triggered if something has been merged to master. So the CI should perform these steps:

  1. Run unit tests
  2. Run E2E tests
  3. Create Electron releases for OS X, Linux, Windows

This way, I can ensure that my releases work as expected (at least all the stuff I have covered by tests).

Integrate Travis CI in your project

To use Travis, you need to make sure that you have a GitHub account and owner permissions for this project hosted on GitHub.

The next step is to visit the Travis homepage, sign up with GitHub and follow the instructions until you can select your project.

To tell Travis CI what automated steps should be executed, you need to add a .travis.yml file to the root directory of your repository.

Finally, you must add the .travis.yml file to git. If you then commit and push, a Travis CI build is triggered. Be aware that Travis can only run builds on commits that were pushed after the .travis.yml file has been pushed to git.

Configure Travis CI

I will explain how I configured the .travis.yml file for my Electron application.

Travis Image

Select Operating System

I start with a quote from the electron-builder website, which is an NPM package I used to create my Electron releases:

Don’t expect that you can build app for all platforms on one platform.

As I wanted to create releases for OS X, Windows, Linux I had to define multiple operating systems. The main reason was that it is impossible to create a Linux release from OS X or Windows.

So I ran my Travis setup on Linux and OS X in parallel. My scripts check the current operating system and run only in the correct environment.

Check the official documentation for more details.

These are the relevant parts of my .travis.yml file:

yaml
1osx_image: xcode8.4 # define OS X image which will be mounted
2
3dist: trusty # use Ubuntu Trusty for Linux operation system
4
5# Note: if you switch to sudo: false, you'll need to launch chrome with --no-sandbox.
6# See https://github.com/travis-ci/travis-ci/issues/8836
7sudo: required
8
9# Define Node.js as the programming language as we have a web application
10language: node_js
11node_js: '8'
12
13addons:
14  chrome: stable # Install chrome stable on operating systems
15
16# A list of operating systems that are used for tests
17os:
18  - linux
19  - osx

Electron Builder Configurations

Electron Logo

For the electron-builder I added some additional cache and variable configuration based on the official documentation:

yaml
1env:
2  global:
3    - ELECTRON_CACHE=$HOME/.cache/electron
4    - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
5
6cache:
7  yarn: true
8  directories:
9    - $HOME/.cache/electron
10    - $HOME/.cache/electron-builder
11    - $HOME/.npm/_prebuilds
12
13before_cache:
14  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then rm -rf $HOME/.cache/electron-builder/wine; fi

Define Scripts

Now we define the scripts which Travis should execute:

yaml
1# These commands are executed before the scripts are executed
2install:
3  # On OS X we first need to install Yarn via Homebrew
4  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then brew install yarn; fi
5  # Install all dependencies listed in your package.json file
6  - yarn
7
8script:
9  - echo "Unit Tests"
10  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then xvfb-run yarn test; else yarn test; fi
11
12  - echo "E2E Tests"
13  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then xvfb-run yarn test:electron; else yarn test:electron; fi
14
15  - echo "Deploy linux version to GitHub"
16  - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "linux" ]]; then yarn release:linux; fi
17
18  - echo "Deploy windows version to GitHub"
19  - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn release:win; fi
20
21  - echo "Deploy mac version to GitHub"
22  - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn release:mac; fi

Unit & E2E tests

Electron needs a display driver as it is based on Chromium. You cannot execute any of your tests (and Electron will fail to launch) if Chromium cannot find a display driver. To fix this issue, we need to use a virtual display driver like Xvfb.

Xvfb is a virtual framebuffer that enables our tests to run in memory without showing an actual screen.

On Linux, we need to run the NPM test script via xvfb-run yarn <NPM_SCRIPT_NAME> on OS X and Windows Chromium is already correctly configured.

GitHub Release

By running yarn release:<OS> from my package.json via electron-builder, I could automatically create a new release draft on the GitHub release page if the unit & E2E tests have passed:

GitHub Release Page

Conclusion

I had to invest multiple hours in configuring Travis for my application. In the end, the time and effort were worth it.

New releases have passed my tests, and I can be sure that the application's basic functionality is working.

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
Use Nitro as Mock Server Image

Use Nitro as Mock Server

Unlocking the Power of v-for Loops in Vue With These Useful Tips Image

Unlocking the Power of v-for Loops in Vue With These Useful Tips

Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks

Lazy Load Vue Component When It Becomes Visible Image

Lazy Load Vue Component When It Becomes Visible