Run Automated Electron App Tests Using Travis CI
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.
I found Travis, a free continuous integration platform for GitHub projects.
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:
- Run unit tests
- Run E2E tests
- 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).
To use Travis, you need to make sure that you have a GitHub account and owner permissions for this project hosted on GitHub.
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.
I will explain how I configured the
.travis.yml file for my Electron application.
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
osx_image: xcode8.4 # define OS X image which will be mounted dist: trusty # use Ubuntu Trusty for Linux operation system # Note: if you switch to sudo: false, you'll need to launch chrome with --no-sandbox. # See https://github.com/travis-ci/travis-ci/issues/8836 sudo: required # Define Node.js as the programming language as we have a web application language: node_js node_js: '8' addons: chrome: stable # Install chrome stable on operating systems # A list of operating systems that are used for tests os: - linux - osx
env: global: - ELECTRON_CACHE=$HOME/.cache/electron - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder cache: yarn: true directories: - $HOME/.cache/electron - $HOME/.cache/electron-builder - $HOME/.npm/_prebuilds before_cache: - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then rm -rf $HOME/.cache/electron-builder/wine; fi
Now we define the scripts which Travis should execute:
# These commands are executed before the scripts are executed install: # On OS X we first need to install Yarn via Homebrew - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then brew install yarn; fi # Install all dependencies listed in your package.json file - yarn script: - echo "Unit Tests" - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then xvfb-run yarn test; else yarn test; fi - echo "E2E Tests" - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then xvfb-run yarn test:electron; else yarn test:electron; fi - echo "Deploy linux version to GitHub" - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "linux" ]]; then yarn release:linux; fi - echo "Deploy windows version to GitHub" - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn release:win; fi - echo "Deploy mac version to GitHub" - if [[ "$TRAVIS_BRANCH" == "master" ]] && [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn release:mac; fi
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.
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:
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.