Wintellect Blogs

Running Spectron Tests in Visual Studio Team Services Build

Jonathan Wood

5 Jan , 2017  

Having end-to-end tests and running them locally can definitely be beneficial, but one of the main reasons to have them is to run them automatically during a nightly build. Getting these tests to run in Visual Studio Team Services isn’t trivial. Here’s some tips on how to get them going.

Setting up build definitions

When first setting up a build for your Spectron tests all the build definitions need to be manually entered. However, the first step is to actually specify what repository you want to use. This gets set when you start your first build definition.

New Build Definition

Select the “Empty” template when the dialog pops up.

Empty Template

From there you can then choose what repository you want to from VSTS or even choose a repository from GitHub.

Choose Repository

Here we can set up our steps to have our tests run. If you recall from our [first post on Spectron with our demo project I set up an npm run script to run our tests. In this case, we only have two tasks to create for our build definition:

  • npm install
  • npm run

NPM Install


Setting up the build agent

So the easy part is done. I only say that, though, because this next part was a bit tricky and wasn’t very well documented on what to do to get these types of tests to run.… Read more

, , , ,

Wintellect Blogs

Top NPM Packages for Spectron Testing

Jonathan Wood

27 Dec , 2016  

Spectron is a great tool for testing your Electron applications. However, some help is needed to get the full use out of it. This post will go through all of the npm packages I’ve found useful in my Spectron testing.

Jasmine Reporters

The default reporter for Spectron is to just log out to the terminal. That’s great, but I like pretty colors in my terminal, especially when they’re green for success and red for error. That’s where the jasmine reporters package comes in. Actually, there are a few reporters in this package. Not just one for the terminal. In fact, I use two reporters from this package – the terminal reporter and the JUnit XML Result reporter.

Why do I use the second reporter? Well, that reporter plays very well with the jasmine-xml2html-converter package. This package converts the XML results from the JUnit XML Result reporter into an HTML file with graphs and a much easier way to view the tests.


Yep, the package to have build tasks in your JavaScript projects has been useful for running Spectron tests. Whether you’re using Jasmine, Mocha, or Karma for your tests, there are gulp versions.

Something I’ve used that seemed to help is to break up your gulp tasks to run tests by scenario.… Read more

, , ,

Wintellect Blogs

Introducing the Spectron Command Line Tool

Jonathan Wood

21 Dec , 2016  

After some Spectron experience there tends to be some things that can get repetitive when creating Spectron tests. I figured creating a tool to do just that would be handy to have. So I created the spectron-cli npm package.

Granted, this command line tool doesn’t do all that much. Currently, it only has two commands to it.

The “init” command will create an e2e directory, if it doesn’t already exist in the current directory it’s run in. It will also create two files in that directory for you – a test.spec.js file and a file. These files will include templates to help you get started writing your Spectron tests.

The “add” command will just create a spec file and a page file with the name of your choosing inside the e2e directory.

The way the templates are laid out, however, you would have to include chai and chai-as-promised packages if you don’t already have them. These tests can be run with mocha or jasmine test runners.

So feel free to install the tool with npm install spectron-cli and see how it works for you (or just find ways to break it). It is open source so feel free to submit and enhancements or fixes or just create an issue.… Read more

, ,

Wintellect Blogs

Spectron Tip: Getting Selectors From Chrome Dev Tools

Jonathan Wood

21 Nov , 2016  

If you’re using Spectron (or even Protractor) for automating your applications probably the most time consuming thing is to figure out exactly what selectors you need in order to interact with your application. Whether to click on a button or to test if the text of a dialog is what you expect, you need a selector in order to access it.

The Chrome dev tools are awesome for figure out what selectors you need by looking at the Elements section and manually going through the page and looking at all the classes and such that you may need in your tests. However, here’s a quick tip if you have a complicated item that you need to select in your tests.

Copying CSS or XPath

The Chrome dev tools has a pretty nifty way to select very nested or complicated items on your page where you can then use for your tests as selectors.

I’m at a page for the Electron documentation and have the dev tools pulled up.



Let’s say I need to select the require('electron') part of this page. Not the most trivial of selectors, but the dev tools can really help us out here. Right click on the element in the dev tools and you’ll see something similar to a Copy item.… Read more


Wintellect Blogs

Creating Page Files for Spectron Tests

Jonathan Wood

12 Oct , 2016  

Now that we’ve got Spectron working, let’s add some more to it to help with our testing. One way of doing end-to-end testing is to have a separate file that contains our page objects and any helper functions specific to that page. This will help the readability and maintainability of our tests. The latest code to this demo is located on GitHub.

Accessing Page File From Main Test File

Let’s create our page file. Since we’re in vanilla JavaScript, I’ll be using module.exports to export our file so we can access it in our main test file.

But first we need to declare a function and properties to export from a separate file.

var TestPage = function () {
  // Properties and functions relevant to the page here

module.exports = TestPage;

Here we have a file named that will contain our page objects – properties and functions associated with our page that we will test against. We just create a main object, TestPage, and add all that we’ll need. To have it able to be accessed in our main test file we add the module.exports = TestPage line at the bottom.

From there we can now reference this file in our main test file:

const testPage = require('./');

And then we can new it up to use it:

var page = new testPage();

Page File Properties

Now that we can access our page file from our test file, let’s add some value to it.… Read more