So I’m sitting around and waiting for a challenge, dreaming of having a project where I won’t see all these boring aspects like Webdriver, BrowserStack, Web pages, etc. And then… Finally, it appeared. It was a desktop application for Mac based on the Electron framework. If you are not aware — . I was a bit upset because it seemed very easy. However, after starting the development, I was surprised… the Electron application is a browser wrapped inside Electron elements and API What is Electron and how can I work with it? First of all, I want to describe what the Electron is, and how to use it. Also, I’d like to add a few words about the approaches on how to automate these types of applications. is a framework developed by . This framework is based on JavaScript, which means it can be easily used for different platforms (Windows, Mac, Linux OSs). The as the backend and . Through using these technologies, it becomes possible to create a native application using HTML, CSS, and JavaScript, and this approach is the right solution for building native apps with such Web technologies. Electron GitHub framework uses NodeJS Chromium as the frontend What test framework should I choose for automation and why? So, the question is what test framework to choose to automate such apps. On the one hand, we can use general frameworks for web testing, and, on the other, we have Spectron. If we go with the general frameworks, we won’t be able to use internal methods to have access to the Electron app, such as app, dialog, menu, clipboard, and so on. Therefore, it definitely should be Spectron. It is built upon WebdriverIO (WDIO). WDIO is an implementation for selenium’s W3C Webdriver API that allows communication with the browser, in our case, with the Electron application. Moreover, Spectron supports full Electron APIs, which is a valuable benefit. My journey started with creating a folder named ‘ ’ SpectronTestSuite JavaScript? No! Typescript. I understand that I should choose JavaScript as a programming language for automated test development, but I actually prefer to use TypeScript. TypeScript has static typing that can help me to avoid mistakes with types and arguments transferred to my methods. This advantage makes the code clean with full transparency and understanding of what the current piece of code is doing. Moreover, it will help me during the refactoring. One of the most significant benefits of TypeScript is the ability to compile the code to ES5, which can be easily understood by our browser/application. Sometimes new features are not supported by old browsers, but we can leave this hard work to our compiler without requiring any interventions. Test Structure Development Following this, I created a typical structure; pages to page folder, specs to spec folder, etc. It’s fairly common to set up an automation test suite and thus I won’t be paying attention to it in this article. I want to show some insights that can help you to avoid unpredictable issues in developing automated tests for Electron apps. Creating a config file I suggest to create a config file (in my case it is config.ts) with all the needed parameters for your application. In my case, it looks like this: { : { : users.firstUser.username, : [ , , ], : ,
   }, : { : users.secondUser.username, : [ , , , ], : ,
   }, : , : , : , : , : , : ,
} export default userOne name startParameters '--require' '../src/test/core/mock-dialog/preload.js' './dist/main.js' chromeDriverPort '9515' userTwo name startParameters '--require' '../src/test/core/mock-dialog/preload.js' './dist/main.js' '--second' chromeDriverPort '9516' testFilesStorage 'src/test/test_files/' testDataFileName 'TestData.csv' testDataFilePath 'src/test/test_data/' defaultWaitTime 30000 waitTimeForElementExist 10000 waitBetweenStates 1000 Add the constructor Now add the following constructor to your wrapper file that contains all core methods like etc. My constructor has the following parameters. The ` ` attribute — to run the application via dist (this will be covered in the next part of the article) and the ` ` — to set up/run configuration for the app. In my case it’s path to ` ` file, as well as some of the required files needed before the application start. The third parameter is a port for ChromeDriver. click, waitForElement , path args main.js app: Application;
user: ;
dialog: ;
name: ;
fs: ; ( ) { .user = user; .name = user.name; .app = Application({
        path: path.join( , , , ),
        args: .user.startParameters,
        port: .user.chromeDriverPort
    }); .dialog = fakeDialog( .app);
} any any string any constructor user this this this new './' './node_modules' '.bin' 'electron' this this this this Adding a new instance Please note that you need to add new instance creation (in my setup, I need two instances) to your test specs in hooks to start a separate instance of your AUT. A code line related to the new instance creation is placed in the ` ` file. After that, you can start applications using these instances. before/beforeEach config.ts firstUser: Sp, secondUser: Sp;

beforeEach( {

    firstUser = Sp(config.userOne);
    secondUser = Sp(config.userTwo);
…… firstUser.startApp(); secondUser.startApp(); let async ( ) function new new await await The approach will simplify the code refactoring in the future. You will place all core methods in files that refer to the page classes and specs. Creating pageFactory class As I previously mentioned, I’ve used pattern and to decrease imports in my files with scenarios I’ve created class with all pages. One important thing is that has a constructor that is waiting for my app instance to use those locators/methods regardless of another instance of the application. Page Object pageFactory pageFactory spectron: Sp; ( ) { .spectron = spectron;
}

loadPages() { {
        loginPage: LoginPage( .spectron),
        messagesPage: MessagesPage( .spectron),
…..
    }
} constructor spectron: Sp this return new this new this And next snip of code is part of the ‘ ’ hook that is placed before starting the app to load pages: before .pages = [
    firstUser,
    secondUser
]; this And following snip to link all page objects to specific instance: firstInstance = PageFactory(firstUser).loadPages(); secondInstance = PageFactory(secondUser).loadPages(); let new let new The next part is, to be honest, boring because I was adding locators, collecting these locators and methods under them in complex methods, and developing my test scenarios. Before I faced file uploading, I thought I’d slain that particular dragon, and everything else will be straightforward for me like Web automation testing… Now let’s take a step back, and I will describe some sweets that I found on my way. I will start from the entry point of our application. I’ve already said that we have Chromium under the Electron wrapper, but we should check the ways how to start the app. My example is for macOS, but it should be the same on Windows and Linux. Therefore, we can use installed applications under the system and set the following path as an entry point: ` ` /Applications/Application.app/Contents/MacOS/AUT. In this case, we will use the provided *dmg file. From the other side, if we have access to source files or to application dist that was built, we can easily use the path to ` ` file. It can be used as an entry point, like in case of installing the app. main.js How to run two separate applications The first requirement to start two separate applications and configure interacting between them without hardcore sleep methods :) To run two instances, we just need to install two applications and set paths to them with different ChromeDriver ports. The same thing for generated application dist — just set the paths with different ChromeDriver ports. Make sure that it’s possible to run two applications that will look at the same local database. You can try to run a second instance of an application by using ` ` or ` ` line, it should look like ` ` in the path to the application. — second — secondary ./dist/main.js — second How to upload without <input> So my team provided me the sources, and I’ve started using the approach with generated dist to have actual application version… then I’ve faced ` ` an issue #2. By security assumptions application doesn’t have <input> tag for uploading files within it. I would say and tried ` ` and ` ` WDIO methods. But I failed. So Google helped, and I found an amazing library called . It has a simple tutorial. I need to use: uploadFile chooseFile spectron-fake-dialog fakeDialog.mock([ { : ‘showOpenDialog’, : [‘file_for_uploading’] } ]) method value command and click on the upload button to make us happy. Unfortunately, this awesome library is good only if you use a single instance of your application. It doesn’t help in my case as I have two applications. The apps start freezing and become unresponsive. “ ”. OK Google, what should I do? My Google research doesn’t, however, give any results. So let’s look underneath the hood. I reviewed the library files and investigated why I was able to mock uploading for a single application but was unable to do it for two instances of the application. The library contains two files ` ` and ` `. The ` ` generates a mock object. index.js preload.js preload.js The ` ` is used for sending this mock file by clicking on the ‘ ’ button. Let’s try to upgrade these two files. index.js upload_file I see that ` ` file exports ` ` and ` ` functions, but to mock, I need to add the return value for my ` ` function. index.js apply mock mock To make it happen, I need to copy the ` ` and ` ` to our mock folder and modify the ` ` file to ensure that we return mock. I’ve updated the ` ` line to ` `. index.js preload.js index.js module.exports = { apply, mock }; return { mock } So, now we can use the ` ` method for two instances, and each instance will see this method as its own. This will avoid inconsistencies between calls of the ` ` method. mock mock One more thing that should be updated is a method ` .` This method contains a call for loading ` ,` but I would suggest removing this method. apply preload.js Here is updated ` `: index.js { { app.electron.ipcRenderer.sendSync( , options);
  } {
    mock
  }
} export default ( ) function createMock app async ( ) function mock options return 'SPECTRON_FAKE_DIALOG/SEND' return We need to remove it because after executing the single test, you won’t face any problems, but if you’ll try to run multiple tests you will see that start parameter contains `’ ’, ‘ ’` values as many times as you have executed scenarios. — require ../src/test/core/mock-dialog/preload.js Conclusion The conclusion is obvious… There are a lot of applications with different architecture implementations, but each app can be automated. To make it happen, you need to find a driver that can communicate with your type of application. These drivers might not be ideal. But you can always create your own solution for the challenges. In my case, I rewrote the library, but the solution will work for the apps which act in pairs. I believe that only a small number of issues will be relevant in the future, because the desktop apps are coming back in a new form, and the automation industry is evolving very quickly. As automation engineers, we should be ready to automate such cases. We should move with the times, to find and resolve new issues that occur while developing new frameworks. This article is a practical guide written by software testing automation specialist. DeviQA

Software Testing of Electron Based Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Using Kubernetes Network Policies

10 Best Practices for Every React Developer

12 Essential Coding Standards for Quality Web Development

12 Essential Django Programming Tips for Developers

13 Tools To Try On Your Next Javascript Based Project

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Using Kubernetes Network Policies

10 Best Practices for Every React Developer

12 Essential Coding Standards for Quality Web Development

12 Essential Django Programming Tips for Developers

13 Tools To Try On Your Next Javascript Based Project

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps