How to Test Electron Apps

  September 18, 2019

New languages and frameworks are always pushing the envelope when it comes to developing software applications. While older technologies may have well-established test automation tools, newer languages and frameworks may lack some of these features, making it challenging for developers to get up-to-speed with Agile best practices. 

Electron is a great example of a platform that can make testing difficult by merging web and desktop paradigms. While there are many JavaScript testing frameworks, it’s challenging to connect them to a desktop environment. Fortunately, new testing frameworks are making it easier than ever to handle these new scenarios, including tools like TestComplete.

Let's take a look at how Electron apps are conventionally tested, as well as how to test them with TestComplete.

What is Electron?

Electron is a platform for building cross-platform desktop applications with JavaScript, HTML and CSS. Using Chromium and Node.js, the platform starts a main process with renderer processes for each browser window. The renderer process takes a web page and renders it into a window with a native feel and a very high level of compatibility with standards.

In addition, the main process can access the native graphical user interface through a series of Electron modules, which makes it possible to interact with the underlying operating system. The only downside is that these applications involve more overhead than the purely native applications, which means that they may have a bit slower performance and some other limitations.

Many popular desktop applications use Electron, including GitHub Desktop (GitHub created Electron), Slack, Skype, Mailspring, Visual Studio Code and Atom. These companies and many other developers are drawn to the framework for its ease of use, ability to deploy across platforms and the familiar use of JavaScript, HTML and CSS to create user interfaces.

Testing With Spectron

The most popular testing framework for Electron is the built-in Spectron, which is built with ChromeDriver and WebDriverIO. The testing platform sets up and tears down your Electron application and allows it to be test-driven remotely with full support for Electron APIs, as well as compatibility with testing libraries like Mocha, Jasmine, AVA and Chai. 

Spectron tests can be written in the same way as conventional JavaScript integration tests. For example, you can easily chain together asynchronous operations and assertions using standard Promises and use common testing libraries like Mocha. Using command API, you can even add additional helpers specific to your app to minimize code duplication.

Continuous integration is a bit more challenging since it requires a display driver, which must be installed and configured to launch the application. For instance, Jenkins CI users must install the Xvfb plugin to add a display driver in order for the tests to run successfully. However, CircleCI and some others already have display drivers setup by default.

A typical Electron testing workflow with Spectron might involve developers writing unit tests in a conventional TDD fashion and then writing integration tests to verify that the acceptance criteria are met before approving a feature to deploy. Continuous integration servers might verify that all of these tests pass before they’re deployed into production.

Alternatives to Consider

Spectron, Mocha, Jasmine and other code-based test frameworks are great for developers, but they can quickly become complex. Test engineers that aren't familiar with specific languages (e.g. JavaScript) or frameworks (e.g. Mocha) might struggle to get up-to-speed, and these learning curves can cut into test and development time.

SmartBear's TestComplete is an automated UI testing tool that makes it quick and easy to create, maintain and execute functional tests across desktop, web and mobile applications. With our AI-powered object recognition engine, TestComplete automatically finds dynamic UI elements quickly, easily and accurately — eliminating the need for code-based tests.

The dynamic nature of TestComplete transates to robust tests that don’t break when the user interface changes. TestComplete automatically switches its object recognition to leverage AI when application properties aren’t easily detected, enabling test engineers to capture UI elements at a contextual level and easily manipulate complex user actions.

If you need to test advanced functionality, you can easily add scripting to your functional GUI tests in JavaScript, VBScript, Python and other popular languages. You can also easily connect TestComplete to your continuous integration ecosystem, including tools like Jenkins, Git and Jira with built-in plugins that make the entire process a breeze.

TestComplete even makes it easy to incorporate behavior-driven development (BDD) into your workflow. Test cases that are designed and written in Gherkin syntax can be easily converted into automated UI functional tests and maintained with object recognition and record-and-replay technology without the need for additional plugins or integrations.

1909_Electron-Apps_img1.png

How to Get Started

TestComplete makes it easy to create automated tests for Electron applications since it automatically recognizes web pages that implement the application interface and individual web elements on those pages. Supported versions of Electron include 1.8.2, 2.0.2, 3.0.2, 4.0.2 and 5.0.0 and 6.0.0, although other versions could also work with the framework.

There are a few simple steps to get started:

  • Select File > New > New Project and open the Create New Project wizard.
  • Specify the project’s name and location.
  • In the Project Explorer, double-click the testedApps node, right click, and select Add Application.

1909_Electron-Apps_img2.png

  • Select Generic Windows application and specify the path to the Windows binary.
  • Start recording a test by going to Test > Record > Record Keyword Test.
  • Expand the Recording toolbar, click Run App, and then select the Electron application.
  • Create Property Checkpoints by clicking Add Check. Checkpoints verify objects and values in the application that’s being tested.

1909_Electron-Apps_img3.png

  • Click Stop on the Recording toolbar when you’re finished.
  • Click Run Test on the Keyword Test editor toolbar to run each test.

1909_Electron-Apps_img4.png

The overall testing process works the same as any other web application since TestComplete automatically recognizes the web pages and components within Electron applications. In addition to basic keyword tests, you can run more advanced data-driven tests that simulate user actions with different input data to provide larger test coverage.

You can view a complete tutorial along with a demo application to test in the TestComplete documentation. Or, download a free trial of TestComplete and see how easy it is to get started testing your Electron apps in a hands-on way.

The Bottom Line

It can be challenging to test cutting-edge new technologies, like Electron, but platforms like TestComplete simplify the process by working at a higher level and in a way that's more accessible for test engineers and other non-developers. By making testing more approachable, many development teams find it easier to achieve more complete test coverage.

Download a free trial of TestComplete and see how easy it is to get started testing your Electron apps.