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

NPM Run

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

Unexpected Benefits of End-to-end Testing

Jonathan Wood

3 Jan , 2017  

End-to-end Testing

Testing where the entire application is tested in a real-world scenario such as communicating with the database, network, hardware and other applications.

The above is the general definition of what an end-to-end test is. Most of these tests are written to make sure general flows of the application that a user may take are working correctly and as expected. However, there are other benefits to running and writing these tests that may not be as well known.

Find bugs when writing tests

True, end-to-end tests are supposed to find bugs, but that’s mainly when you run tests that have already been written to make sure no bugs were introduced as the project is being developed on. However, there are a lot of bugs you can find when you’re writing end-to-end tests. In my experience, I’ve usually found an issue while writing an end-to-end test on a specific functionality that I’m testing.

Unit tests will do this, too, but end-to-end tests can find issues that aren’t always logical, such as UI issues and components not interacting as expected. This, to me, is probably the most useful thing about having end-to-end tests.

Find hard to detect issues

Applications depend on all components of the application interacting and working correctly.… 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.

Gulp

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 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

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.

 

devtools

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 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

, , ,

Wintellect Blogs

Using XAML in F# Xamarin Forms – A Screencast

Jonathan Wood

1 Jun , 2016   Video

Now that we’ve seen the awesome new stuff in Xamarin Studio for F# let’s go a bit further and actually use some of those improvements to our advantage. However, instead of just a regular blog post, I thought it’d be worthwhile to do a screencast for y’all.

You can view the demo code directly on GitHub. Enjoy everyone!

 … Read more

, , ,

Wintellect Blogs

F# Improvements in Xamarin Studio

Jonathan Wood

9 May , 2016  

With the (almost) stable release of Xamarin Studio 6 comes a ton of great new improvements. I absolutely love the new dark theme! However, some huge improvements were made to the IDE for F# support, as well. Improvements that I feel may have gone without much notice. So I wanted to help get those improvements out in the open more as well as to recognize the folks that made all of this happen. At the time of this writing, I’m running the alpha build (v6.1) of Xamarin Studio.

Speaking of recognizing folks, huge shout out to Dave Thomas and Jason Imison for all their hard work in getting these improvements into Xamarin Studio. F# in Xamarin Studio would be nothing without these guys.

Project Templates

Xamarin Studio 6 now includes project templates for Xamarin Forms in F#. This is a pretty big update since, before, you couldn’t even add a PCL project in F# in Xamarin Studio.

F# Xamarin Forms Project

With this you can start creating cross-platform mobile applications with Xamarin Forms in F#! While this was doable before, it is much easier without going through a few workarounds to get things working. Just select this project and the templates do everything for you.… Read more

, ,

Wintellect Blogs

A Quick Look at F# In Visual Studio Code

Jonathan Wood

8 Dec , 2015  

It’s F# Advent time again! This is a yearly event the F# community comes together for the month of December and each person releases an F# related post on a day of their choosing. Today is that day for me this year.

With the recent announcement at Microsoft’s Connect() conference, Visual Studio Code now has an awesome update that can install extensions. With me being an F# fanatic I got excited to see that actually using F# is one of the first extensions available via Ionide which is originally made for developing in F# in GitHub’s Atom client.

While you could technically already “use” F# in Visual Studio Code, it was only for syntax highlighting. You couldn’t run any of the code. This quick post will help show you the steps to started developing F# within Visual Studio code.

The original creator of Ionide, Krzysztof Cieślak, did a great guest post for the .NET Blog to help announce F# support for VS Code. I figured I’d do my best to extend on it with this post.

Installing the F# Extensions

If you’re used to Atom or Sublime you’re already familiar with the command palette in Visual Studio Code (scroll down to the Command Pallete section).… Read more

, ,