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

## Introduction

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

By default, some of the electron-based applications that supports DEV mode and are not automatable 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, you 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**.

## Run Electron Application in DEV Mode

In Electron, the process that runs package.json's main script is called the main process. The script can display a GUI by creating web pages.

Electron uses Chromium for displaying web pages, based on Chromium's multi-process architecture. Each web page in Electron runs with renderer process.

To start an electron application,

1. Create a javascript file that will be used to start main process by electron. The file includes code to launch the main process.
2. Define a var in the `start` script:

```json
   "scripts": {
       "start": "APP_DEV=true electron ."
   }
   ```

3. Read it in `main.js`:

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

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

4. For applications like MS Teams, click your profile picture to enable Development preview and developer features.
5. Click **About** > **Developer Preview**. Teams will restart in Developer Preview mode. If you still cannot see Developer Preview on the About menu, they might have **Allow sideloading of external apps** enabled for the Office 365 tenant users, see [Prepare your Microsoft 365 tenant](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant).

## Automating Electron application with Leapwork

1. Find the version of the Chromium used in the specific Electron application.
2. Open Developer Tools, in console tab, type **process.versions.electron**.
3. The [Electron releases page](https://www.electronjs.org/releases/stable) has a note every time the Chromium version is updated. The electron application hosts the browser inside. Different applications can be based on different Chromium browsers. You need to find the exact version of the browser used in each specific Electron application. To achieve that, ensure you have all the major chrome driver versions downloaded and saved in Leapwork Directory with the path: **C:\Program Files\LEAPWORK\Studio\driver\chrome**.

You can automate Electron applications using Leapwork with following options:

- Start Recorder
- Building Blocks

## Start Recorder

1. To use Smart recorder, click **(+)** and select **Start Electron Application** in the recorder menu. You can automate the web browser or any desktop application using the recorder.

2. 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.

**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.

## 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**”.

If the issue continues, contact our [Priority Support](mailto:prioritysupport@leapwork.com).