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 test.page.js 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

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 test.page.js 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('./test.page.js');

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

,

Wintellect Blogs

End-to-end Testing Electron Apps with Spectron

Jonathan Wood

5 Oct , 2016  

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.… Read more

, , ,