如何在Browserstack等云测试平台运行Mocha编写的HTML格式DOM测试？

你之前的Karma配置失效的核心原因是：Karma默认会自动生成测试执行页面，不会直接加载你编写的自定义test.html，也不会识别你在HTML内引入的Mocha、Chai及测试脚本。你可以选择以下两种方案实现需求，均兼容BrowserStack及所有Selenium类云测试平台。

方案一：Selenium 直接驱动（轻量方案，无需改造现有测试逻辑） #

步骤1：修改测试页面导出结果 #

调整test.html中Mocha执行的代码段，将测试结果挂载到全局变量，方便Selenium读取：

<script class="mocha-exec">
  // 全局存储测试结果
  window.mochaTestResults = {
    completed: false,
    passed: false,
    total: 0,
    passedCount: 0,
    failedCount: 0
  }
  const runner = mocha.run()
  runner.on('end', () => {
    window.mochaTestResults.completed = true
    window.mochaTestResults.total = runner.stats.total
    window.mochaTestResults.passedCount = runner.stats.passes
    window.mochaTestResults.failedCount = runner.stats.failures
    window.mochaTestResults.passed = runner.stats.failures === 0
  })
</script>

步骤2：启动本地静态服务 #

在项目根目录启动静态文件服务，确保test.html可通过本地地址访问，比如用npx serve启动，默认访问地址为http://localhost:3000/tests/test.html。
如果使用BrowserStack，需要启动BrowserStack Local本地隧道，让云平台节点可以访问到本地服务。

步骤3：编写Selenium执行脚本 #

示例使用Node.js版Selenium SDK，配置后直接运行即可：

const { Builder } = require('selenium-webdriver')
const BROWSERSTACK_USER = '你的平台用户名'
const BROWSERSTACK_KEY = '你的平台密钥'

async function runMochaTest() {
  const driver = await new Builder()
    .usingServer(`https://${BROWSERSTACK_USER}:${BROWSERSTACK_KEY}@hub.browserstack.com/wd/hub`)
    .withCapabilities({
      'bstack:options': {
        os: 'Windows',
        osVersion: '11',
        sessionName: 'Mocha HTML测试',
        local: true // 开启本地隧道访问权限
      },
      browserName: 'Chrome',
      browserVersion: 'latest'
    })
    .build()

  try {
    // 访问测试页面
    await driver.get('http://localhost:3000/tests/test.html')
    // 等待测试执行完成，超时时间可根据测试规模调整
    await driver.wait(async () => {
      return await driver.executeScript('return window.mochaTestResults?.completed')
    }, 30000)
    // 读取测试结果
    const results = await driver.executeScript('return window.mochaTestResults')
    console.log('测试结果：', results)
    if (!results.passed) {
      throw new Error(`测试失败：${results.failedCount}条用例未通过`)
    }
  } finally {
    await driver.quit()
  }
}

runMochaTest()

方案二：调整Karma配置适配（适合多测试文件扩展场景） #

核心修改点 #

通过Karma的customContextFile配置项指定你编写的test.html作为测试执行页面，替换Karma默认生成的页面，调整后的karma.conf.js如下：

module.exports = function (config) {
  config.set({
    // 不需要引入Karma的mocha、chai框架，已在自定义HTML中引入
    frameworks: [],
    files: [
      // 所有测试依赖的静态资源都需要在这里声明，served表示Karma托管该文件，included表示不自动注入到页面
      { pattern: './MY_DOM_TESTS.js', served: true, included: false },
      // 其他依赖的CSS、图片、JS文件都按上述格式添加
    ],
    // 关键配置：指定自定义测试HTML作为执行页面
    customContextFile: './tests/test.html',
    // BrowserStack 相关配置
    browserStack: {
      username: '你的平台用户名',
      accessKey: '你的平台密钥'
    },
    customLaunchers: {
      BS_Chrome: {
        base: 'BrowserStack',
        browser: 'Chrome',
        browser_version: 'latest',
        os: 'Windows',
        os_version: '11'
      }
    },
    browsers: ['BS_Chrome'],
    reporters: ['mocha'],
    singleRun: true
  })
}

路径适配 #

因为Karma会将所有files中声明的资源托管在/base/路径下，需要将test.html中引入MY_DOM_TESTS.js的代码修改为：

<script src="/base/MY_DOM_TESTS.js"></script>

直接运行karma start即可执行测试。

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