如何在Protractor Cucumber测试中获取浏览器及系统详情

我之前在使用Protractor Cucumber框架生成报告时，也碰到过这个头疼的问题——想在报告里展示浏览器和操作系统的详细信息，试了好几种方法都没搞定。后来摸索出一套可行的方案，核心是在Cucumber的生命周期钩子中正确捕获Protractor的浏览器能力，再把这些信息传递给protractor-multiple-cucumber-html-reporter-plugin的元数据配置。下面一步步来：

1. 从Protractor Browser Capabilities提取核心信息 #

Protractor启动浏览器后，browser.getCapabilities()会返回一个Promise，包含浏览器和运行环境的关键信息。我们需要在Cucumber的Before钩子中异步获取这些数据，因为此时浏览器实例已经初始化完成。

注意：不同浏览器驱动（比如ChromeDriver、GeckoDriver）返回的capability键可能略有差异，所以要做兼容处理：

// 在cucumber的hooks文件中（比如support/hooks.js）
const { Before } = require('cucumber');

// 全局存储元数据（单线程测试可用，多线程建议用World对象）
let testMetadata = {};

Before(async function() {
  const capabilities = await browser.getCapabilities();
  
  // 捕获浏览器名称和版本
  testMetadata.browser = {
    name: capabilities.get('browserName'),
    version: capabilities.get('browserVersion') || capabilities.get('version') // 兼容旧版驱动
  };
  
  // 捕获操作系统信息
  testMetadata.platform = {
    name: capabilities.get('platformName') || capabilities.get('platform'), // 兼容不同Selenium版本
    version: capabilities.get('platformVersion')
  };
});

2. 将元数据传递给报告插件 #

在Protractor配置文件（protractor.conf.js）中，配置报告插件时，通过metadata选项传入我们收集到的信息。如果是并行测试，建议用Cucumber的World对象存储元数据（避免线程冲突），具体如下：

并行测试的World对象方案： #

首先自定义World类来存储每个场景的元数据：

// support/world.js
const { setWorldConstructor } = require('cucumber');

class TestWorld {
  constructor() {
    this.metadata = {};
  }
}

setWorldConstructor(TestWorld);

然后在hooks中把数据存入当前场景的World对象：

// support/hooks.js
Before(async function() {
  const capabilities = await browser.getCapabilities();
  this.metadata.browser = {
    name: capabilities.get('browserName'),
    version: capabilities.get('browserVersion') || capabilities.get('version')
  };
  this.metadata.platform = {
    name: capabilities.get('platformName') || capabilities.get('platform'),
    version: capabilities.get('platformVersion')
  };
});

最后在Protractor配置中引用场景的元数据：

// protractor.conf.js
exports.config = {
  // 其他Protractor配置...
  plugins: [{
    package: 'protractor-multiple-cucumber-html-reporter-plugin',
    options: {
      // 报告的基础配置（比如输出路径、主题等）
      reportPath: './reports',
      theme: 'bootstrap',
      // 动态获取当前场景的元数据
      metadata: function(scenario) {
        return scenario.metadata;
      }
    }
  }]
};

3. 补充：获取更详细的本地系统信息 #

如果浏览器capabilities返回的平台信息不够详细（比如只显示windows而非Windows 10），可以结合Node.js的os模块获取本地系统的完整信息：

// 在hooks.js中添加
const os = require('os');

Before(async function() {
  // 原有代码...
  
  // 补充本地系统详情
  this.metadata.osDetails = {
    type: os.type(), // 比如Windows_NT、Linux
    release: os.release(), // 比如10.0.19045
    arch: os.arch() // 比如x64
  };
});

4. 处理远程浏览器/Headless模式的情况 #

如果是通过Selenium Grid运行远程浏览器，capabilities里的platformName和platformVersion会返回远程节点的操作系统信息；如果需要本地系统信息，就用os模块的内容。Headless模式下，浏览器的capabilities信息和正常模式一致，无需额外处理。

这样配置后，生成的HTML报告的元数据区域就会清晰展示浏览器名称、版本，以及操作系统的详细信息了。

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