Check out a free preview of the full Electron Fundamentals, v2 course:
The "Running Spectron" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve Demonstrates how to run the Electron testing framework.

Get Unlimited Access Now

Transcript from the "Running Spectron" Lesson

[00:00:00]
>> Steve Kinney: All right, so this is in a repo called clipmaster-spectron-fem-v2. And we're gonna pull just Node's built-in assertion library, that path module, for helping us out with a few things. That application constructor that I showed you before is attached to Spectron. And when we use require('electron'), it's mostly to get the path of our instance of Electron, right?

[00:00:24] This is going to be in Node modules installed there. And so theoretically, if you wanted to test against the built production version of your application? You could hard-code in a path to that Electron instance, we're not doing that, we're testing development. And so we're gonna create an application that is going to use a new Application constructor.

[00:00:44] We're gonna point to where it can find Electron. And the arguments are actually gonna be, we're in a test directory, so we just want to go up a directory, as well. So before every test, we're gonna start up the application. After every test, we are going to stop the application, so we'll get a fresh app in between every single test.

[00:01:11] I also turned up Mocha's timeout, because starting up an application and tearing it down is not as fast as comparing two strings, right? So I bought us a little more time with that, and we have this very first test, which is basically, does any of this even work, right?

[00:01:29] You'll be like, yeah, assert.ok(true), that makes total sense, but that still involves spinning up the app and tearing it down. So let's go ahead and take that first spin, with npm test
>> Steve Kinney: And you could briefly see the application, there wasn't a lot to do in the application, but you saw it up here for a second.

[00:01:49] We asserted that true was in fact true, and then we tore down the application, all right? We have bunch of skipped tests, in this case, so I'm gonna kind of begin to implement some of them. And we could get a good feel for the API of WebDriver, and Spectron, by extension.

[00:02:09] So I don't really need this test anymore, so we have, shows an initial window. Now we saw that, but again, this is, we've got our training wheels on here, we're practicing. So one of the things we can do is, we wanna figure how many windows there are. Now, we saw there was a getWindowCount(1) in that slide, so we could say something like const count.

[00:02:31] Now, this is an async function, mostly, everything in Spectron is promise-based. So you could .then, .then, .then, and we'll do a little bit of that, where it makes sense. But we're gonna use a little bit of the async await syntax, which will get count, and we say, await app.client.getWindowCount().

[00:02:49] So this'll wait for that getWindowCount promise to resolve, and assign that to the variable count. Now, when we implemented Clipmaster before, we knew that it was,effectively one window. So, we know when the application starts out, that count should be 1, and we wanna assert.equal().
>> Steve Kinney: All right, cool, assert that, when this starts up, we got one window.

[00:03:22] So await, if we don't have await, then the function will just end, so we'll wait for that to happen. And then in Mocha, the way it knows that your test is actually over, cuz we're doing asynchronous stuff, is we return that promise. And when the whole promise resolves, we know the test is done.

[00:03:38] So take that, and we'll un-skip that test, let's give it a shot.
>> Steve Kinney: Cool, shows an initial window, so when it started the application, it counted one window, the test passed. All right, does that window have the correct title?
>> Steve Kinney: So we can say const title = await app.client, wait until the window's loaded, right?

[00:04:10] Cuz we need that HTML page to totally load, cuz it gets the title from the title element in the HTML. So we'll say waitUntilWindowLoaded(), and then we'll say getTitle(). And then we'll assert, return assert.equal, the title is, in this case, Clipmaster 9000, cuz I was feeling saucy when I make the app.

[00:04:39] That test is still skipped,
>> Steve Kinney: Run an npm test, fire up the app once, fire up the app twice, it has the correct title, right? So we're beginning to make assertions about, even the window title, and stuff along those lines, all right, what's our next test? Assert that we did not ship it with the developer tools open, seems like a good test to run before we build it, all right?

[00:05:11] I'm gonna say, const devToolsAreOpen = await app.client, I'll give myself a little room here, I've got a big font. Wait until the window is loaded, get the browser window, that one browser window that we had open, and call the isDevToolsOpened().
>> Steve Kinney: Cool, and then we will return assert, I'll go with assert.equal.

[00:06:00]
>> Steve Kinney: It should run three tests this time, we'll show that other window, see it again, if you skip the tests, they don't run. Someone needs to be on Steve, you forgot to unskip the test duty. One, two, three, the dev tools are not open, right? So now, when we got the browser window itself, you can actually call this, this is a method on browser window instances.

[00:06:29] So we can actually directly reach into some of the Electron APIs, and call that ourselves.