The Speed at which Technologies and companies are growing today are quite unfathomable. We have come a long way from the digital age of the 1970s to the information age of the 21st century in such a short span of time. The rate at which technologies around the world are evolving things that we thought impossible is starting to take shape in reality. Artificial Intelligence in DevOps, Omnichannel communication through Multi Experience Development Platform and interaction between devices to make lives easy is progressing daily.

Besides all the progress, building a set of applications that work on a desktop has been a challenge as it needs a different skill set. And honestly enough why would someone go through the pain of learning another language, frameworks and scale-up another learning curve to cater to applications for the browser environment? That’s where Electron Application comes into play. With Electron, developers are able to bank on the skill sets they’ve already acquired to build applications that use the capabilities of the native desktop application.

 

What is electron application?

 

If you have used your desktop to send messages over WhatsApp, sent files on Slack or written code on Atom or Visual Studio Code, chances are you are already using an electron application. Applications designed to work on desktops that run on Windows, MacOS or Linux using the open source framework Electron is what can be defined as Electron Applications. 

Now, what is Electron, must be a question that you are dying to ask. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. The open-source project started by an engineer at Github has got the conversation going for many as developers are now able to focus on the core of the application instead of spending time on learning another new language or framework. Electron combines Node.js runtimes and Chromium content module to help you build desktop applications using Javascript.

Eg: Appium Desktop, WhatsApp Desktop, Slack Desktop, etc.

What is the challenge we faced in terms of automating this application?

 

Electron may have eased up the process of building the desktop application. However, testing these applications is a tedious and time consuming job if done manually. The solution to test such desktop applications is to automate the testing process. Now the traditional approach for automation of such applications would be the job for the Selenium Webdriver. 

Unfortunately Selenium doesn’t support the applications that are built on the open source electron platform. Hence, there arose a need for another platform to automate tests for the applications built on Electron. Since the Electron community supports the Spectron Project, web developers can write integration tests for testing Electron applications.

What is spectron:

 

Spectron is an open source framework that is used to easily write integration and end-to-end tests for your Electron applications. Simulating User Input, navigating web pages are some of the capabilities that Spectron provides. It also sets up and tears down the applications and allows it to be test-driven remotely with full support for the Electron APIs. Since it is built on top of ChromeDriver and WebDriverIO, you can test the Electron applications on the same as well.

 

Installation:

npm install –save-dev spectron

The example test below verifies a few validations that are specific to the electron app:

Let’s use the Electron API demos app, which can be downloaded here.

The first thing we notice is that the Chrome developer tools are already there.

 

 

Commands to Open Dev Tools on different OS

 

• Use alt+cmd+i for mac, 
• F12 on windows and 
• ctrl + shift + i on linux OS

Once you have opened the Dev Tools you can inspect elements and prepare the locators.

 

How To Test an Electron app ?

 

We can use mocha, standard, chai modules using spectron and javascript. 

It’s required to pass application binary path in Application object.

setup.js: This JS file is the base file where “removeStoredPreferences” function will help you clear the cache and start the app freshly, setupApp function will help you to click on “Get Started” button when the element is visible.

 

 

index.js:  This is an actual test file where some of the hooks like “before” and “after” have been used to start & close the app along with the “it” block where the actual test cases has been written.

 

 

You can use mocha && standard command to run the above sample script

Once you have executed the command we can see the test running faster than other tools. You can also view that we have performed some validations like window count, isVisible, isFocused etc, which are specific to the Electron App. We have also performed a wait statement by using “waitForVisible” in the script to wait for an element to be visible. Some actions like click to click on the “Get Started” button have also been performed. The page below will show us what happens when we click on the “Get Started” button.

 

 

We have attached a link below to access the Spectron APIs – https://github.com/electron-userland/spectron#clientwindowbyindexindex

We were also able to provide the link to a Sample Spectron Project that you can access and learn more about –https://github.com/electron/electron-api-demos (electron community official project)

With the sample project handy and the APIs so readily available, running projects is simple by using the steps below –

 

Steps to Run the projects:

1. git clone https://github.com/electron/electron-api-demos
2. cd electron-api-demos
3. npm install
4. npm test

 

Common Issues and Troubleshooting

When working with Spectron for testing Electron applications, developers may come across a variety of issues. This section aims to address some of the common problems and provide troubleshooting tips to help resolve them.

Application Does Not Start: Sometimes, Spectron may fail to launch the Electron application for testing. This issue could be due to an incorrect path specified for the Electron application.

Solution: Make sure the path to your Electron application is correct. Check for any typos or incorrect directory structures.

Time Out Errors: During testing, you might encounter timeout errors, possibly because the application takes too long to load or certain elements are slow to render.

Solution: You can try increasing the default timeout values in your test configuration. Be cautious with this approach as too generous timeouts may lead to inefficient tests.

Inconsistent Test Results: Sometimes, tests may pass on one machine but fail on another, or even yield different results between test runs on the same machine.

Solution: This might be a synchronization issue. Ensure that your tests wait for the elements or conditions to be ready before interacting with them. Utilize functions like waitForExist or waitForVisible in your tests.

Accessing Main Process Elements: Developers often face issues when trying to access elements or modules in the main process of Electron using Spectron.

Solution: Use spectron.Application.client for accessing renderer process elements and spectron.Application.electron for accessing main process elements. Ensure you’re using the correct one based on what you need to access.

Issues with Version Compatibility: Sometimes, the Spectron version you are using may not be compatible with the version of Electron your application is using.

Solution: Make sure that the versions of Spectron and Electron you are using are compatible with each other. Consult the Spectron documentation for compatibility information and consider upgrading or downgrading if necessary.

Error in Installing Spectron: If there’s an error in installing Spectron through npm, it may be related to network issues or npm configurations.

Solution: Try clearing the npm cache using npm cache clean -f and then install Spectron again. If you’re behind a proxy, make sure your npm proxy settings are configured correctly.

Unable to Interact with Custom Elements: Spectron might not be able to interact properly with custom web elements or components, especially if they are nested deep within the DOM.

Solution: Be explicit with your selectors and make sure they are unique. Using CSS or XPath selectors can help target specific elements more efficiently.

Remember, debugging is often an essential part of software development. Keeping your codebase clean, well-documented, and following best practices can also help reduce the occurrence of issues.

Additionally, don’t hesitate to consult Spectron’s documentation and seek help from the community through forums or GitHub issues if you encounter problems that are not listed here or require further assistance.

 

Comparison with Other Frameworks

While Spectron is a powerful tool for testing Electron applications, other frameworks may also suit your testing needs. Two of the popular alternatives are Jest and Cypress.

Jest is a comprehensive JavaScript testing framework that works out of the box for most JavaScript projects. Jest is known for its ‘zero-configuration’ philosophy. It is an excellent choice if you’re not only testing Electron behavior but also unit-testing your JavaScript functions. Jest, however, isn’t specifically tailored for Electron and doesn’t include some Electron-specific functionality that Spectron provides.

Cypress, on the other hand, is a next-generation front end testing tool built for the modern web. It provides a complete end-to-end testing experience and can be a good choice for testing the user interface of Electron applications. Like Jest, it’s not specifically designed for Electron apps but can be configured to work with them.

Spectron is a framework specifically developed for testing Electron applications, offering extensive support for Electron-specific APIs. It combines the strengths of ChromeDriver and WebDriverIO, providing the ability to simulate user inputs and test all aspects of the application, from the user interface to the core functional behavior.

Summary

Your choice of testing framework should depend on your specific needs. If you need a tool specifically tailored for Electron, Spectron would be an excellent choice. But if you’re looking for a more general JavaScript testing solution or a powerful front-end testing tool, Jest or Cypress might be more appropriate. Always consider your project requirements, team skills, and the nature of your Electron application before choosing a testing framework.