Angular 4中如何配置BrowserStack以运行Protractor？

我来帮你搞定在Angular 4里配置BrowserStack的问题，结合你给出的现有配置和本地运行命令，下面是具体的修改步骤：

第一步：安装BrowserStack依赖 #

首先需要安装Protractor的BrowserStack报告器和本地隧道工具，在项目根目录运行：

npm install protractor-browserstack-reporter browserstack-local --save-dev

第二步：修改你的Protractor配置文件 #

接下来咱们调整protractor.conf.js，替换掉你现有的配置，下面是整合了BrowserStack设置的完整版本：

// Protractor configuration file
const { SpecReporter } = require('jasmine-spec-reporter');
const BrowserStackReporter = require('protractor-browserstack-reporter');
const browserstack = require('browserstack-local');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  // 移除directConnect，改用BrowserStack的远程连接
  // directConnect: true,
  seleniumAddress: 'http://hub-cloud.browserstack.com/wd/hub',
  // 配置BrowserStack的设备/浏览器参数，可根据需求调整
  capabilities: {
    'browserName': 'chrome',
    'browser_version': 'latest',
    'os': 'Windows',
    'os_version': '10',
    'project': '你的项目名称',
    'build': 'v1.0',
    'name': 'E2E自动化测试',
    // 替换成你自己的BrowserStack账户信息（在账户设置里可查看）
    'browserstack.user': '你的BrowserStack用户名',
    'browserstack.key': '你的BrowserStack密钥',
    // 如果测试的是本地服务（无公网访问），开启这个选项
    // 'browserstack.local': true,
    'chromeOptions': {
      'args': [
        '--user-data-dir=~/e2e-chrome-profile',
        '--disable-web-security',
        '--window-size=1920,1080',
      ],
    }
  },
  // 替换成你的测试应用地址（和本地运行的host一致）
  baseUrl: 'http://dev.fastshop.com.br:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 60000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({ project: 'e2e/tsconfig.e2e.json' });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    
    // 添加BrowserStack报告器，用于生成测试结果
    jasmine.getEnv().addReporter(new BrowserStackReporter({
      outputDir: './e2e-browserstack-results',
      screenshotOnFailure: true
    }));

    // 启动BrowserStack Local隧道（仅当开启browserstack.local时生效）
    if (exports.config.capabilities['browserstack.local']) {
      const browserstackLocal = new browserstack.Local();
      browserstackLocal.start({ 'key': exports.config.capabilities['browserstack.key'] }, function(error) {
        if (error) throw error;
        console.log('BrowserStack Local隧道已启动');
      });
    }
  },
  // 测试完成后停止本地隧道
  onComplete: function () {
    if (exports.config.capabilities['browserstack.local']) {
      browserstack.Local.stop();
    }
  }
};

第三步：运行测试 #

因为你本地运行命令是ng e2e --serve false --port 4200 --host dev.fastshop.com.br，说明你的应用已经部署在dev.fastshop.com.br:4200（或已手动启动服务），现在直接运行：

ng e2e

如果你的应用是本地私有服务（无公网访问权限），记得：

1. 在配置里打开'browserstack.local': true
2. 确保已经安装了browserstack-local依赖
3. 测试启动时会自动开启本地隧道，测试结束后自动关闭

注意事项 #

• 务必替换配置里的browserstack.user和browserstack.key，这两个信息可在你的BrowserStack账户设置页面获取
• 可以根据测试需求调整capabilities里的浏览器、操作系统版本等参数，比如换成Firefox、Safari或者不同的OS版本
• 如果遇到连接问题，检查网络是否能访问BrowserStack的hub地址，或确认本地隧道是否正常启动

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