Check out a free preview of the full Electron Fundamentals, v2 course:
The "Testing with 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 introduces Electron's testing framework.

Get Unlimited Access Now

Transcript from the "Testing with Spectron" Lesson

[00:00:00]
>> Steve Kinney: Let's talk about everyone's favorite subject, testing, [LAUGH] yeah! So testing, you might imagine that, okay, I want to spin up a version of my application and run tests against it. That would probably be hard, right? Turns out that there is libraries officially supported by the Electron team for doing this, and it is called Spectron.

[00:00:25] And Spectron is built on top of Webdriver. WebDriver is Node.js bindings for Selenium. And so one way that you can think about Spectron is all the way under the hood, there is Selenium. Above that, you have the Node.js bindings in Webdriver. And then Spectron adds a bunch of Electron-specific stuff.

[00:00:45] Because Webdriver, which is meant mostly for go visit a webpage and poke at it, right? Is not necessarily super set up for spinning up an application, and figuring out all that other kinda stuff. So Spectron adds one more layer on top of that that makes it easier to point Webdriver, and by extension, Selenium tests at your actual application.

[00:01:15] And so with Spectron, we can basically call new Application() which will basically create a bespoke version of that app that we can kind of poke at. And there are a few methods on there, right? So your application instance that you create has a client, which is Webdriver, which is the thing kinda poking at the application and putting it through its paces.

[00:01:40] A property called Electron, which is the renderer process API, right? So anything when you do a require Electron to render a process, you have available on Electron. And then browserWindow is the currently focused browser window. So if you need to do anything or manipulate anything about the currently active window, it can do that.

[00:01:58] Cuz again, Selenium, which is used to visiting one page doesn't have this idea that you can have multiple windows open and all sorts of Electron-specific stuff. webContents, we saw that with Ascend. You can look at the webContents API in the docs, but it's basically just a way to get to all of that as well for that browser window.

[00:02:19] mainProcess, which is the process object, so when you did process.platform and stuff like that in the main process, it is that node object. And rendererProcess, which is the process object in the renderer, right? So basically, a bunch of different hooks into some of the different processes that you wouldn't have if you were just firing up a headless Chrome and pointing it at something.

[00:02:44] So that app.client, that's the Webdriver, so it also has a few extra things put onto it. Which is you can get the main process logs, right? I think it logs with the console. You can get the renderer process logs. You can get the currently selected text, window count.

[00:03:01] And again, this is stuff that not normally exists in there. You can get wait until test exists, wait until the window is loaded, which window, as well as all the rest of the Webdriver API. So these are just things that Spectron adds to the existing Webdriver API, which is again, an obstruction around the existing Selenium API.

[00:03:18] This is just stuff for your Spectron app, or your Electron app using Spectron. So that's all well and good, but I think it makes a lot more sense if we actually write some tests to see this in action.