如何在Mocha的describe块外定义含browser的全局变量？

我完全懂你现在的困扰——每次在describe块里重复定义元素变量真的很繁琐，而直接在describe外定义又碰到browser is not defined的错误。这其实是因为WebdriverIO的browser对象是在测试运行时才注入到Mocha的测试上下文里的，全局作用域在测试初始化前根本找不到它。下面给你几个实用的解决方案，按推荐程度排序：

1. 推荐：使用Page Object（PO）模式（最适合长期维护） #

这是前端自动化测试的最佳实践之一，把页面的元素定位和操作封装成独立的类，既避免重复代码，又让测试用例更清晰。

// 新建pages/LoginPage.js文件
class LoginPage {
  // 定义页面元素的getter，每次调用时才会去查找元素
  get usernameInput() { return browser.$('#username'); }
  get passwordInput() { return browser.$('#password'); }
  get loginButton() { return browser.$('#login-btn'); }

  // 封装页面操作方法
  fillLoginForm(username, password) {
    this.usernameInput.setValue(username);
    this.passwordInput.setValue(password);
  }

  submitLogin() {
    this.loginButton.click();
  }
}

// 导出单例，避免每次实例化
export default new LoginPage();

然后在测试文件里直接导入使用：

import loginPage from '../pages/LoginPage';

describe('登录模块测试', function() {
  it('验证正常登录流程', function() {
    browser.url('/login');
    loginPage.fillLoginForm('test_user', 'test_pass');
    loginPage.submitLogin();
    // 后续断言逻辑
    expect(browser.getTitle()).to.equal('首页');
  });
});

2. 封装共享工具函数（轻量快速方案） #

如果项目还比较小，不想马上引入PO模式，可以把常用的元素定位封装成函数，在测试钩子中初始化：

// 新建utils/testElements.js
export function getCommonElements() {
  return {
    headerLogo: browser.$('#header-logo'),
    logoutBtn: browser.$('#logout-btn'),
    // 其他需要复用的元素
  };
}

在测试文件中：

import { getCommonElements } from '../utils/testElements';

describe('通用页面元素测试', function() {
  let commonElements;

  // 在每个测试用例前初始化元素（确保此时browser已存在）
  beforeEach(function() {
    commonElements = getCommonElements();
  });

  it('验证页面加载后logo可见', function() {
    expect(commonElements.headerLogo.isDisplayed()).to.be.true;
  });

  it('验证 logout 按钮可点击', function() {
    expect(commonElements.logoutBtn.isEnabled()).to.be.true;
  });
});

3. 利用Mocha根级别钩子挂载到测试上下文 #

Mocha允许在所有describe块之外定义全局钩子，把共享变量挂载到测试上下文的this上（注意不要用箭头函数，否则会丢失上下文）：

// 在所有测试文件的最外层（比如test/setup.js，确保被Mocha加载）
beforeEach(function() {
  // 把共享元素挂载到当前测试上下文
  this.sharedElements = {
    loginBtn: browser.$('#login-btn'),
    usernameInput: browser.$('#username')
  };
});

然后在任意describe块里使用：

describe('登录功能', function() {
  it('输入用户名后按钮状态变化', function() {
    this.sharedElements.usernameInput.setValue('test');
    expect(this.sharedElements.loginBtn.isEnabled()).to.be.true;
  });
});

关键注意点 #

• 永远不要在describe块外直接执行browser.$()这类操作——此时测试环境还未初始化，browser对象还不存在，必然报错。
• 所有依赖browser的代码，都要放在before/beforeEach/it这些Mocha的测试钩子或用例块内部。

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