End-to-end Testing Electron Apps with Spectron

You’ve built a really awesome Electron application, but you want to include a few automated tests to make sure a regression doesn’t occur? Spectron is here to help!

Spectron is Electron’s end-to-end testing library. Let’s see how it we can set it up to use in our own Electron projects.

If you want to go straight to the demo code, the repository is on GitHub.

Setup

For this post and demo code I’ll be using Electron’s quick start repository. This repository has all that is needed to get a quick “Hello World” application going in Electron.

While the quick start repository has all dependencies that we need to run an Electron application, we need to add Spectron to it. This is just another NPM package to install:

npm install --save-dev spectron

To help with our testing and assertions we’ll also bring in a couple of more packages:

npm install mocha chai chai-as-promised

Our package.json file should now have the following dev dependencies:

"devDependencies": {
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "electron": "^1.3.4",
    "mocha": "^3.0.2",
    "spectron": "^3.4.0"
  }

So we can save some keystrokes and make it a bit easier for us to run our tests, I added an NPM script to the package.json file to run our end-to-end tests with mocha. If desired, Jasmine can also be used instead of Mocha.

"scripts": {
    "start": "electron .",
    "test:e2e": "./node_modules/mocha/bin/mocha tests/test.js"
  }

Now that we have all of these items installed, we’re ready to start testing!

Asserting

Our main.js file is where all of our Electron code will reside. For our Spectron tests we have a tests folder which has all of our test files. For this post we will only have one test file to keep things simple.

First thing we need to do is to require all the packages that we’ll be using:

const Application = require('spectron').Application;
const path = require('path');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');

Chai and Chai as Promised are helper packages to help have our tests written in a bit more fluently instead of the older Assert style.

In order for Spectron to launch our application to test on, we need to specify the path. If you want to test on the actual .app or .exe that you’ve built from Electron you can just point it to that. However, since we won’t be doing that for the purpose of this post, we’ll just point it to the Electron node module and run that from our main application directory.

var electronPath = path.join(__dirname, '..', 'node_modules', '.bin', 'electron');

if (process.platform === 'win32') {
    electronPath += '.cmd';
}

var appPath = path.join(__dirname, '..');

var app = new Application({
            path: electronPath,
            args: [appPath]
        });

Before we start writing our tests, we should define how to use the chai and chai as promised packages. We’ll do this within the global.before function.

global.before(function () {
    chai.should();
    chai.use(chaiAsPromised);
});

Tests

Now that we have all of our packages setup, let’s write some tests for our Electron application. If you recall from installing our packages, we had mocha installed. This will allow us to write our tests with describe and it blocks. From there we can write our tests.

describe('Test Example', function () {
  beforeEach(function () {
      return app.start();
  });

  afterEach(function () {
      return app.stop();
  });

  it('opens a window', function () {
    return app.client.waitUntilWindowLoaded()
      .getWindowCount().should.eventually.equal(1);
  });

  it('tests the title', function () {
    return app.client.waitUntilWindowLoaded()
      .getTitle().should.eventually.equal('Hello World!');
  });
});

the app object that we created earlier is the Electron application. From there we can call methods such as getWindowCount() or getTitle() that we can use to test on. The full API for what we can do with this object is located on Spectron’s API documentation.

From there we can run npm run test:e2e and see our tests open the Electron app, perform the tests, and exit the app.