如何在Mocha+Playwright的Vue项目中配置测试前置全局根钩子插件

问题排查与解决方案 #

1. 先修正hooks.js的代码错误 #

你的原始钩子代码存在3个直接导致无法运行的问题：

• beforeAll内部用了await但没有声明async
• 未初始化page变量直接调用
• Node默认CommonJS模块环境下不兼容export导出语法，需要调整导出方式
  修正后的代码：

// tests/e2e/hooks.js
const playwright = require("playwright");

module.exports.mochaHooks = {
  async beforeAll() {
    const browser = await playwright["chromium"].launch({
      headless: false
    });
    const context = await browser.newContext();
    // 初始化page实例
    const page = await context.newPage();

    await page.goto("https://localhost:44392/");
    await page.fill("#Username", "demokitchenadmin");
    await page.fill("#Password", "Test1234)");
    await page.click("button.btn-primary");

    await context.storageState({ path: 'tests/e2e/state.json' });

    await page.close();
    await context.close();
    await browser.close();
  }
};

2. 调整Mocha参数传递方式 #

你直接在命令后加--require的方式无法生效，因为vue-cli-service test:e2e会先消费自身参数，需要确保参数正确传递给底层的Mocha，两种可选方案：

方案A：调整package.json脚本

{
  "scripts": {
    "test:e2e": "vue-cli-service test:e2e --require tests/e2e/hooks.js"
  }
}

注意去掉路径外层的单引号，Windows环境下单引号会被识别为路径的一部分导致文件找不到

方案B：新增Mocha配置文件（更稳定）

在项目根目录新建.mocharc.js文件，内容如下：

module.exports = {
  require: [
    './tests/e2e/hooks.js'
  ]
}

这种方式不需要修改scripts命令，Mocha会自动读取根目录的配置文件。

3. 额外注意事项 #

如果后续测试需要复用登录态，在测试用例初始化context的时候要加载保存的state.json：

const context = await browser.newContext({
  storageState: 'tests/e2e/state.json'
})

如果测试启动的前端服务是动态端口，不要写死地址，可通过环境变量读取测试服务地址。

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