WebdriverIO桌面测试指南：Electron应用自动化测试详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00331/article/details/148418593

WebdriverIO桌面测试指南：Electron应用自动化测试详解

webdriverio Next-gen browser and mobile automation test framework for Node.js 项目地址: https://gitcode.com/gh_mirrors/we/webdriverio

前言

在现代前端开发中，Electron框架因其跨平台特性和Web技术栈的便利性，已成为构建桌面应用的热门选择。然而，随着应用复杂度的提升，如何确保Electron应用的稳定性和可靠性成为开发者面临的重要挑战。本文将深入探讨如何使用WebdriverIO这一强大的自动化测试工具来测试Electron应用。

Electron测试概述

Electron是一个基于Chromium和Node.js的框架，允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用。它通过将Chromium和Node.js嵌入二进制文件中，使得开发者无需原生开发经验就能创建Windows、macOS和Linux应用。

WebdriverIO为Electron应用测试提供了专门的服务模块，极大地简化了测试流程。其核心优势包括：

自动配置所需的Chromedriver
自动检测Electron应用路径（支持Electron Forge和Electron Builder）
测试中可直接访问Electron API
提供类似Vitest的API来调用Electron API

快速开始

初始化项目

要开始测试Electron应用，首先需要初始化一个WebdriverIO项目：

npm create wdio@latest ./

在安装向导中，选择"Desktop Testing - of Electron Applications"选项，然后提供编译后的Electron应用路径（如./dist）。其余选项可根据需求保持默认或进行调整。

初始化完成后，向导会自动安装所有必需的包并创建wdio.conf.js或wdio.conf.ts配置文件。如果选择了自动生成测试文件，可以直接运行npm run wdio执行第一个测试。

手动配置

对于已有WebdriverIO项目，只需添加Electron服务依赖：

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

然后在配置文件中添加服务配置：

// wdio.conf.ts
export const config: WebdriverIO.Config = {
    // ...
    services: [['electron', {
        appEntryPoint: './path/to/bundled/electron/main.bundle.js',
        appArgs: [/** 可选参数 */],
    }]]
}

核心功能详解

1. 自动路径检测

WebdriverIO的Electron服务能够智能识别常见的Electron构建工具（如Electron Forge和Electron Builder）生成的应用路径，无需手动指定完整路径。

2. Electron API访问

测试中可以直接调用Electron API，例如：

describe('Electron API测试', () => {
    it('应能访问app模块', async () => {
        const appName = await browser.electron.app('getName')
        expect(appName).toBe('你的应用名称')
    })
})

3. API调用

WebdriverIO提供了强大的API调用功能，可以轻松操作Electron模块：

beforeEach(async () => {
    await browser.electron.call('dialog', 'showOpenDialog', (result) => {
        result.returns(['/path/to/file'])
    })
})