Electron 应用自动化测试完全指南

# 使用 npm
npm create wdio@latest ./
 
# 或使用 yarn
yarn create wdio ./

npm install --save-dev wdio-electron-service

// wdio.conf.js
import { join } from "path"
 
// 动态计算应用程序路径
const getAppPath = () => {
  const platform = process.platform
  const arch = process.arch
  const appName = "Your-App-Name" // 替换为你的应用名称
 
  const pathMap = {
    darwin: join(__dirname, "build", `mac-${arch}`, `${appName}.app`, "Contents", "MacOS", appName),
    win32: join(__dirname, "build", "win-unpacked", `${appName}.exe`),
    linux: join(__dirname, "build", "linux-unpacked", appName.toLowerCase())
  }
 
  const appPath = pathMap[platform]
  if (!appPath) {
    throw new Error(`Unsupported platform: ${platform}`)
  }
  return appPath
}
 
export const config = {
  // 日志输出目录
  outputDir: "logs",
 
  // 启用 electron 服务
  services: ["electron"],
 
  // 测试能力配置
  capabilities: [
    {
      browserName: "electron",
      "wdio:electronServiceOptions": {
        appBinaryPath: getAppPath(),
        appArgs: ["--test-mode"] // 可选：命令行参数
      }
    }
  ],
 
  // 框架配置
  framework: "mocha",
  reporters: ["spec"],
  mochaOpts: {
    ui: "bdd",
    timeout: 60000
  }
}

// test/specs/app.e2e.js
import { expect } from "@wdio/globals"
 
describe("Electron 应用测试", () => {
  it("应该正确增加计数器", async () => {
    // 定位输入框并验证初始值
    const input = await $("#counter-input")
    await expect(input).toHaveValue("0")
 
    // 点击增加按钮
    const incrementBtn = await $("#increment-btn")
    await incrementBtn.click()
 
    // 验证更新后的值
    await expect(input).toHaveValue("1")
  })
 
  it("应该能获取应用名称", async () => {
    // 通过 browser.electron API 访问主进程
    const appName = await browser.electron.app("getName")
    expect(appName).toBe("Your-App-Name")
  })
})

// main.js (主进程入口)
if (process.env.NODE_ENV === "test") {
  require("wdio-electron-service/main")
}
 
// preload.js (预加载脚本)
if (process.env.NODE_ENV === "test") {
  require("wdio-electron-service/preload")
}

// test/specs/dialog.e2e.js
import { browser, expect } from "@wdio/globals"
 
describe("Dialog 测试", () => {
  it("应该能 mock showOpenDialog", async () => {
    const mockResponse = {
      canceled: false,
      filePaths: ["/path/to/mock/file.txt"]
    }
 
    // Mock dialog.showOpenDialog
    await browser.electron.mock("dialog", "showOpenDialog", mockResponse)
 
    // 验证 Mock 是否生效
    const result = await browser.electron.dialog("showOpenDialog", {
      properties: ["openFile"]
    })
 
    expect(result).toEqual(mockResponse)
  })
})

# Selenium Node.js 客户端
npm install --save-dev selenium-webdriver
 
# Electron 适配的 ChromeDriver
npm install --save-dev electron-chromedriver

./node_modules/.bin/chromedriver --port=9515
# 输出: Starting ChromeDriver on port 9515

{
  "devDependencies": {
    "electron-chromedriver": "^..."
  },
  "customChromeDriverVersion": "114.0.5735.289"
}

npm install

// selenium-test/test.js
const { Builder, By, until } = require("selenium-webdriver")
const { join } = require("path")
 
const getAppPath = () => {
  const appName = "Your-App-Name"
  return join(__dirname, "..", "build", "win-unpacked", `${appName}.exe`)
}
 
;(async function runTest() {
  let driver
 
  try {
    driver = await new Builder()
      .usingServer("http://localhost:9515")
      .withCapabilities({
        "goog:chromeOptions": {
          binary: getAppPath()
        }
      })
      .forBrowser("chrome")
      .build()
 
    // 等待窗口加载并验证标题
    await driver.wait(until.titleIs("Your App Title"), 5000)
    console.log("测试成功：应用标题正确！")
 
    // 执行其他操作
    const counter = await driver.findElement(By.id("counter-input"))
    console.log(await counter.getAttribute("value"))
  } catch (error) {
    console.error("测试失败:", error)
  } finally {
    if (driver) {
      await driver.quit()
    }
  }
})()

node selenium-test/test.js

# 跳过默认浏览器下载，直接测试 Electron
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --save-dev playwright
 
# 安装测试运行器
npm install --save-dev @playwright/test

// playwright-test/test.spec.js
const { _electron: electron } = require("playwright")
const { test, expect } = require("@playwright/test")
const { join } = require("path")
 
const mainProcessEntry = join(__dirname, "..", "dist", "electron", "main.js")
 
test.describe("Playwright Electron 测试", () => {
  let electronApp
 
  test.beforeAll(async () => {
    electronApp = await electron.launch({ args: [mainProcessEntry] })
  })
 
  test.afterAll(async () => {
    await electronApp.close()
  })
 
  test("应用启动后应显示正确的窗口标题", async () => {
    const window = await electronApp.firstWindow()
    await expect(window).toHaveTitle("Your App Title")
  })
 
  test("与主进程交互，获取应用路径", async () => {
    const appPath = await electronApp.evaluate(async ({ app }) => {
      return app.getAppPath()
    })
    console.log("App Path:", appPath)
    expect(appPath).not.toBeNull()
  })
 
  test("与渲染器进程交互并截图", async () => {
    const window = await electronApp.firstWindow()
 
    // 监听 console 事件
    window.on("console", console.log)
 
    // 操作窗口内容
    await window.locator("#increment-btn").click()
    const inputValue = await window.locator("#counter-input").inputValue()
    expect(inputValue).toBe("1")
 
    // 截图
    await window.screenshot({ path: "screenshot.png" })
  })
})

// package.json
{
  "scripts": {
    "test:playwright": "npx playwright test"
  }
}

npm run test:playwright

// custom-driver/driver.js
const childProcess = require("child_process")
 
class TestDriver {
  constructor({ path, args = [], env = {} }) {
    this.rpcCalls = []
 
    // 注入测试环境变量
    const testEnv = { ...env, APP_TEST_DRIVER: "1" }
 
    // 启动 Electron 应用并建立 IPC 通道
    this.process = childProcess.spawn(path, args, {
      stdio: ["inherit", "inherit", "inherit", "ipc"],
      env: testEnv
    })
 
    // 监听 RPC 回复
    this.process.on("message", (message) => {
      const rpcCall = this.rpcCalls[message.msgId]
      if (!rpcCall) return
 
      this.rpcCalls[message.msgId] = null
 
      if (message.reject) {
        rpcCall.reject(message.reject)
      } else {
        rpcCall.resolve(message.resolve)
      }
    })
 
    // 等待应用准备就绪
    this.isReady = this.rpc("isReady").catch((err) => {
      console.error("Application failed to start:", err)
      this.stop()
      process.exit(1)
    })
  }
 
  /**
   * 发送 RPC 请求
   * @param {string} cmd - 远程方法名称
   * @param  {...any} args - 方法参数
   * @returns {Promise<any>}
   */
  async rpc(cmd, ...args) {
    const msgId = this.rpcCalls.length
    this.process.send({ msgId, cmd, args })
 
    return new Promise((resolve, reject) => {
      this.rpcCalls.push({ resolve, reject })
    })
  }
 
  stop() {
    this.process.kill()
  }
}
 
module.exports = { TestDriver }

// main.js
const { app } = require("electron")
 
if (process.env.APP_TEST_DRIVER) {
  const METHODS = {
    isReady() {
      return true
    },
    getAppName() {
      return app.getName()
    },
    getVersion() {
      return app.getVersion()
    },
    async getMemoryInfo() {
      return await process.getProcessMemoryInfo()
    },
    getCPUUsage() {
      return process.getCPUUsage()
    }
  }
 
  process.on("message", async (message) => {
    const { msgId, cmd, args } = message
    const method = METHODS[cmd]
 
    if (!method) {
      process.send({ msgId, reject: `Invalid method: ${cmd}` })
      return
    }
 
    try {
      const resolve = await method(...args)
      process.send({ msgId, resolve })
    } catch (err) {
      process.send({ msgId, reject: { message: err.message, stack: err.stack } })
    }
  })
}

// custom-driver/app.test.js
const assert = require("assert")
const { TestDriver } = require("./driver")
const { join } = require("path")
 
const getAppPath = () => {
  return join(__dirname, "..", "build", "win-unpacked", "Your-App-Name.exe")
}
 
const app = new TestDriver({
  path: getAppPath(),
  args: [],
  env: { NODE_ENV: "test" }
})
 
describe("自定义驱动测试", function () {
  this.timeout(10000)
 
  before(async () => {
    await app.isReady
  })
 
  after(() => {
    app.stop()
  })
 
  it("应该能获取正确的应用名称", async () => {
    const name = await app.rpc("getAppName")
    assert.strictEqual(name, "Your-App-Name")
  })
 
  it("应该能获取应用版本", async () => {
    const version = await app.rpc("getVersion")
    assert.ok(/^\d+\.\d+\.\d+$/.test(version))
  })
 
  it("内存占用应低于 200MB", async () => {
    const memoryInfo = await app.rpc("getMemoryInfo")
    const residentSetMB = memoryInfo.residentSet / 1024
    console.log(`当前内存占用: ${residentSetMB.toFixed(2)} MB`)
    assert.ok(residentSetMB < 200, `内存占用过高: ${residentSetMB}MB`)
  })
})

// package.json
{
  "scripts": {
    "test:custom": "mocha custom-driver/app.test.js"
  }
}

npm install --save-dev jest @babel/preset-env @babel/preset-typescript

// jest.config.js
module.exports = {
  testEnvironment: "node",
  roots: ["<rootDir>/src"],
  testMatch: ["**/__tests__/**/*.test.js", "**/*.spec.js"],
  collectCoverageFrom: [
    "src/**/*.js",
    "!src/**/*.test.js",
    "!**/node_modules/**"
  ],
  coverageDirectory: "coverage",
  coverageReporters: ["text", "lcov", "html"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

// src/main/utils/__tests__/fileHelper.test.js
const fs = require("fs")
const path = require("path")
const { readFile, writeFile } = require("../fileHelper")
 
// Mock fs 模块
jest.mock("fs")
 
describe("FileHelper", () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })
 
  describe("readFile", () => {
    it("应该成功读取文件内容", async () => {
      const mockContent = "test content"
      fs.promises.readFile.mockResolvedValue(mockContent)
 
      const result = await readFile("/path/to/file.txt")
 
      expect(fs.promises.readFile).toHaveBeenCalledWith("/path/to/file.txt", "utf-8")
      expect(result).toBe(mockContent)
    })
 
    it("应该在文件不存在时抛出错误", async () => {
      const error = new Error("ENOENT: no such file")
      error.code = "ENOENT"
      fs.promises.readFile.mockRejectedValue(error)
 
      await expect(readFile("/nonexistent.txt")).rejects.toThrow("文件不存在")
    })
  })
 
  describe("writeFile", () => {
    it("应该成功写入文件", async () => {
      fs.promises.writeFile.mockResolvedValue(undefined)
 
      await writeFile("/path/to/file.txt", "content")
 
      expect(fs.promises.writeFile).toHaveBeenCalledWith(
        "/path/to/file.txt",
        "content",
        "utf-8"
      )
    })
  })
})

// src/renderer/store/__tests__/counter.test.js
import { counterStore } from "../counter"
 
describe("Counter Store", () => {
  beforeEach(() => {
    counterStore.reset()
  })
 
  it("应该正确初始化计数器", () => {
    expect(counterStore.count).toBe(0)
  })
 
  it("应该正确增加计数", () => {
    counterStore.increment()
    expect(counterStore.count).toBe(1)
 
    counterStore.increment()
    expect(counterStore.count).toBe(2)
  })
 
  it("应该正确减少计数", () => {
    counterStore.count = 5
    counterStore.decrement()
    expect(counterStore.count).toBe(4)
  })
 
  it("计数不应低于零", () => {
    counterStore.count = 0
    counterStore.decrement()
    expect(counterStore.count).toBe(0)
  })
})

npm install --save-dev vitest @vitest/coverage-v8

// vitest.config.ts
import { defineConfig } from "vitest/config"
 
export default defineConfig({
  test: {
    globals: true,
    environment: "node",
    include: ["src/**/*.{test,spec}.{js,ts}"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html"],
      exclude: ["node_modules/", "src/**/*.test.ts"]
    }
  }
})

// __mocks__/electron.js
module.exports = {
  app: {
    getName: jest.fn(() => "Test App"),
    getVersion: jest.fn(() => "1.0.0"),
    getPath: jest.fn((name) => `/mock/${name}`),
    quit: jest.fn()
  },
  BrowserWindow: jest.fn().mockImplementation(() => ({
    loadURL: jest.fn(),
    loadFile: jest.fn(),
    on: jest.fn(),
    webContents: {
      send: jest.fn(),
      on: jest.fn()
    }
  })),
  ipcMain: {
    on: jest.fn(),
    handle: jest.fn(),
    removeHandler: jest.fn()
  },
  ipcRenderer: {
    send: jest.fn(),
    invoke: jest.fn(),
    on: jest.fn(),
    removeListener: jest.fn()
  },
  dialog: {
    showOpenDialog: jest.fn(),
    showSaveDialog: jest.fn(),
    showMessage: jest.fn()
  }
}

// package.json
{
  "scripts": {
    "test:unit": "jest",
    "test:unit:watch": "jest --watch",
    "test:unit:coverage": "jest --coverage"
  }
}

// WebdriverIO 无头配置
capabilities: [{
  browserName: "electron",
  "goog:chromeOptions": {
    args: ["--headless", "--disable-gpu", "--no-sandbox"]
  }
}]

# .github/workflows/test.yml
name: Electron CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [macos-latest, ubuntu-latest, windows-latest]
        node-version: [18.x, 20.x]
 
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
 
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
 
      - name: Install dependencies
        run: npm ci
 
      - name: Build application
        run: npm run build
 
      - name: Run tests on Linux
        if: runner.os == 'Linux'
        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" npm test
 
      - name: Run tests on macOS/Windows
        if: runner.os != 'Linux'
        run: npm test
 
      - name: Upload test results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: test-results-${{ matrix.os }}
          path: |
            test-results/
            screenshots/
            logs/

// .nycrc.json
{
  "all": true,
  "include": ["src/main/**/*.js", "src/renderer/**/*.js"],
  "exclude": ["**/*.spec.js", "**/*.test.js", "**/__tests__/**"],
  "reporter": ["lcov", "text", "html"],
  "sourceMap": true,
  "instrument": true
}

// package.json
{
  "scripts": {
    "test:coverage": "nyc npm test"
  }
}

- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v4
  with:
    token: ${{ secrets.CODECOV_TOKEN }}
    files: ./coverage/lcov.info
    fail_ci_if_error: true

// performance.test.js
const { TestDriver } = require("./driver")
 
describe("应用性能测试", function () {
  let driver
  this.timeout(30000)
 
  before(async () => {
    driver = new TestDriver({ path: getAppPath() })
    await driver.isReady
  })
 
  after(() => driver?.stop())
 
  it("启动时间应小于 3 秒", async () => {
    const start = Date.now()
    const newDriver = new TestDriver({ path: getAppPath() })
    await newDriver.isReady
    const elapsed = Date.now() - start
 
    console.log(`启动时间: ${elapsed}ms`)
    expect(elapsed).toBeLessThan(3000)
    newDriver.stop()
  })
 
  it("空闲时内存占用应低于 150MB", async () => {
    const memoryInfo = await driver.rpc("getMemoryInfo")
    const memoryMB = memoryInfo.residentSet / 1024
 
    console.log(`内存占用: ${memoryMB.toFixed(2)} MB`)
    expect(memoryMB).toBeLessThan(150)
  })
})