如何在独立JavaScript文件中编写Electron与Spectron测试用例？

嘿，我帮你搞定把Spectron测试用例拆分成独立文件的事儿，这样你的测试代码会清爽很多！下面是具体的实现方案，完全适配你用的Electron、Spectron、Chai和chai-as-promised技术栈：

第一步：规划测试目录结构 #

先把测试文件按功能模块拆分，比如登录相关的测试都放在login目录下，全局的初始化逻辑抽出来单独放，示例结构如下：

your-project/
├── tests/
│   ├── utils/
│   │   └── setup-teardown.js  # 全局应用启动/关闭逻辑
│   ├── login/
│   │   ├── open-window.test.js       # 窗口打开的测试用例
│   │   └── empty-credentials.test.js # 空账号密码登录的测试用例
│   └── mocha.opts  # Mocha测试框架配置（如果用Mocha的话）

第二步：编写全局初始化/清理逻辑 #

每个测试用例都需要启动和关闭Electron应用，把这部分重复代码抽出来放在setup-teardown.js里，避免每个测试文件重复写：

// tests/utils/setup-teardown.js
const { Application } = require('spectron');
const path = require('path');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');

// 全局挂载app实例，让所有测试文件都能访问
global.app = null;

// 启用chai-as-promised插件，支持异步断言
chai.use(chaiAsPromised);
chai.should();

// 所有测试执行前启动Electron应用
before(async function() {
  this.timeout(10000); // 给足启动时间
  global.app = new Application({
    // 替换成你项目中Electron的实际路径
    path: path.join(__dirname, '../../node_modules/.bin/electron'),
    // 替换成你Electron主入口文件的目录（比如主文件是main.js就填它所在的根目录）
    args: [path.join(__dirname, '../../')]
  });
  await global.app.start();
});

// 所有测试执行完毕后关闭应用
after(async function() {
  this.timeout(10000);
  if (global.app && global.app.isRunning()) {
    await global.app.stop();
  }
});

第三步：拆分单个测试用例文件 #

现在把你原来的测试用例拆成独立文件，每个文件只负责一个测试场景：

1. 窗口打开测试（open-window.test.js）

// tests/login/open-window.test.js
describe('Login - Window Initialization', function() {
  this.timeout(10000);

  it('should open exactly one Electron window', async function() {
    await global.app.client.waitUntilWindowLoaded();
    const windowCount = await global.app.client.getWindowCount();
    windowCount.should.equal(1);
  });
});

2. 空凭证登录测试（empty-credentials.test.js）

// tests/login/empty-credentials.test.js
describe('Login - Empty Credentials', function() {
  this.timeout(10000);

  it('should trigger error when clicking login without username/password', async function() {
    // 这里替换成你实际的登录按钮选择器
    await global.app.client.click('#login-button');
    // 替换成你实际的错误提示元素选择器和预期文本
    const errorMsg = await global.app.client.getText('#error-message');
    errorMsg.should.equal('Please enter your username and password');
  });
});

第四步：配置Mocha自动加载测试 #

如果用Mocha作为测试运行器，创建mocha.opts文件让它自动加载全局setup并遍历所有测试文件：

// tests/mocha.opts
--require ./utils/setup-teardown.js
--recursive
--timeout 10000

最后：运行测试 #

在package.json里加个测试脚本：

{
  "scripts": {
    "test": "mocha tests/"
  }
}

然后运行npm test就能自动执行所有拆分后的测试用例啦！

这样拆分后，每个测试文件职责单一，维护起来更方便，全局逻辑也不会重复，完全符合模块化的最佳实践~

内容的提问来源于stack exchange，提问作者vishwa9247