Automating Electron Applications with Selenium: Setup, Packaging, and Remote Debugging

The article records a practical workflow for automating an internal IM communication Electron app using Selenium, starting with a brief background on why Electron is chosen for cross‑platform desktop development.

Electron Overview – Electron combines Chromium and Node.js, allowing developers to build desktop apps with HTML, CSS, and JavaScript. Although the resulting binaries are large because they bundle Chromium, they run on macOS, Windows, and Linux.

Using Selenium with Chrome – First, determine the Chrome version installed on the system, download the matching ChromeDriver (or use a mirror if needed), and place it in the PATH or specify its location in code.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time

driver = webdriver.Chrome()
# driver = webdriver.Chrome(executable_path="/path/to/chromedriver")
driver.get("https://www.google.com")
assert "Google" in driver.title
elem = driver.find_element_by_name("q")
elem.clear()
elem.send_keys("360")
elem.send_keys(Keys.RETURN)
assert "No results found." not in driver.page_source
driver.close()

Using Selenium to Control an Electron App – To drive an Electron app, you must know the Chromium version it embeds. You can inspect it via Chrome DevTools (option+command+i) and run process.versions in the console, or let Selenium report a version mismatch error.

selenium.common.exceptions.SessionNotCreatedException: Message: session not created:
This version of ChromeDriver only supports Chrome version 94
Current browser version is 80.0.3987.86 with binary path /Applications/360家.app/Contents/MacOS/360家

After identifying the required ChromeDriver, create a new Electron project:

mkdir electrontest
cd electrontest
npm init -y

Install Electron and packaging tools:

npm install electron electron-packager electron-installer-dmg --save

Update package.json to add start, build, and dmg scripts, then create the main files.

// package.json excerpt
{
  "name": "electrontest",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-packager .",
    "dmg": "electron-installer-dmg ./electrontest-darwin-x64/electrontest.app/electrontest"
  },
  "dependencies": {
    "electron": "^15.1.2",
    "electron-installer-dmg": "^3.0.0",
    "electron-packager": "^15.4.0"
  }
}

Sample main.js creates a BrowserWindow and loads index.html:

const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { preload: path.join(__dirname, 'preload.js') }
  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() })
})
app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })

Provide a simple index.html and preload.js that expose Node, Chrome, and Electron versions to the page.

Package the app with: npm run build # runs electron-packager Generate a macOS DMG installer: npm run dmg # runs electron-installer-dmg Now write a Selenium test that launches the packaged Electron binary via the binary_location option:

# -*- coding: utf-8 -*-
"""
-------------------------------------------------
    File Name：eletest
    Description : electron automation test
    Author : qihoo
    date：2021/10/14
-------------------------------------------------
"""
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
options = webdriver.ChromeOptions()
options.binary_location = "/Applications/electrontest.app/Contents/MacOS/electrontest"
driver = webdriver.Chrome(chrome_options=options)
time.sleep(3)
print(driver.page_source)
driver.get("http://www.google.com")
elem = driver.find_element_by_name("q")
elem.clear()
elem.send_keys("360")
elem.send_keys(Keys.RETURN)
driver.close()
driver.quit()

For testing an already‑running Electron app, start the app with the remote‑debugging flag:

/Applications/electrontest.app/Contents/MacOS/electrontest --remote-debugging-port=9222

Then configure Selenium to connect to that debugging address:

options = webdriver.ChromeOptions()
options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")
driver = webdriver.Chrome(chrome_options=options)

Summary – The key take‑aways are: locate the correct ChromeDriver version, set binary_location to point to the Electron executable, and use the --remote-debugging-port flag for testing already‑opened apps without relaunching.