How to automate Electron Apps running in development mode with Leapwork?

Description:

Electron is a free and open-source software framework to develop the Desktop GUI applications that host a chromium browser inside i.e. it combines the Chromium rendering engine and the Node.js runtime. Running Electron application in Development mode can be really useful for enabling debug features for building and running the application locally as well as on production environment.

Some of the electron based applications that supports DEV mode and are not automatable by default are:

• Discord
• Microsoft Teams
• Mailspring

In order to automate such applications using Leapwork, the application is required to run under DEV mode so that the respective chromium driver is compatible to read the elements under dev mode, otherwise the user will get an error message "This version of the Electron application does not support automation. Try to run the Electron application in the developer mode to enable automation".

Running Electron application in DEV mode :

In Electron, the process that runs package.json's main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has one main process, but never more.

Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.

According to above, to start an electron application, we have create a javascript file that will be used to start main process by electron. The file will contain necessary code to launch the main process,

Define a var in the start script:

 "scripts": {
    "start": "APP_DEV=true electron .",
  },

Then read it in main.js:

var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == 'true') : false;

if (isDev) {
    require('electron-reload')(__dirname);
}

Note: For applications like MS Teams, user can enable Development preview to enable developer features, which user access by clicking on your profile picture, then clicking on About > Developer Preview. Teams will restart in Developer Preview mode, and there will be a new command available. (If users still cant see “Developer Preview” on the About menu, it’s because they might have Allow sideloading of external apps enabled for the Office 365 tenant users are using, as described here.)

Automating Electron application with Leapwork:

As a first step, user needs to find the version of the Chromium used in the specific Electron application. This could be easily asked to either the developer of the application or checked in the Developer Tools.

Open the Developer Tools, in the console tab, type

process.versions.electron

The Electron releases page has a note every time the Chromium version is updated. Once the Chromium version is known, user can download any minor version that matches the corresponding major version. e.g. for version 85.0 85.0.4183.87 or 85.0.4183.83 both will work. However, we recommend downloading the latest version.

Once the driver has been downloaded, please follow the below steps:

• Navigate to the folder path: C:\Program Files\LEAPWORK\Studio
• Create a folder with the name, driver, if it doesn't exist already
• Create a sub-folder with the name, chrome
• Create another sub-folder with the major version number. For example, 85
• The overall path should look like this:
  • C:\Program Files\LEAPWORK\Studio\driver\chrome\85
• Unzip the downloaded chromedriver_win32, and place the chromedriver.exe file at the above path. Refer to below screenshot:

Once the user is done with the pre-requisites, the User can start automating the electron-based applications.

Ways to automate Electron applications using Leapwork:

1. Using Start Recorder

 The user can make use of the Smart recorder to start the electron-based application by choosing the “Start Electron Application” by clicking on (+) icon on the recorder menu palette. Users can perform the rest of the operations same as automating the web browser or any desktop application using the recorder. 

After clicking on “Start Electron Application”, A prompt will show up in which the user needs to specify the path/name of the Electron-based application. 

(see the screenshot)

Note: Leapwork would show a prompt when the application selected is an electron-based application or not. If the user wants to keep using the desktop blocks to automate the application, the user needs to select "Continue" and if the user wants to use the Electron blocks, the user needs to "restart" the application.

(See the screenshot)

2. Building Blocks:

The user can automate the Electron application by using the building blocks as well. Leapwork has created the building blocks specifically to automate Electron-based applications. The user can find all the blocks under the “Electron” menu in “Add building blocks”.

(See the screenshot below)

If the issue continues, please contact our Priority Support.