Angular 4 如何在 BrowserStack 中运行 Protactor

Question

我找不到如何在 Angular 4 中配置 browserStack。

这是我在 protactor.conf 中的实际配置

本地运行命令

ng e2e --serve false --port 4200 --host dev.fastshop.com.br

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    browserName: 'chrome',
    'chromeOptions': {
      'args': [
        // here disable crome visual
        // '--headless',
        // '--disable-gpu',
        '--user-data-dir=~/e2e-chrome-profile',
        '--disable-web-security',
        '--window-size=1920,1080',
      ],
    }
  },

  directConnect: true,
  baseUrl: 'http://localhost: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 } }));
  }
};

强文本

Answer 1

这是与您最新的 Angular 内联的示例

/* eslint-disable */
const basePath = __dirname;
const { SpecReporter } = require('jasmine-spec-reporter');

const getSpecs = (listSpec) => {
  if (listSpec) {
    return listSpec.split(',');
  }

  return ['samples/**/*.e2e-spec.js', 'sample-test.e2e-spec.js'];
};

const theme = 'light'

exports.config = {
  params: {
    theme
  },
  allScriptsTimeout: 12000,
  logLevel: 'INFO',
  specs: getSpecs(process.env.PROTRACTOR_SPECS),
  seleniumAddress: 'http://hub-cloud.browserstack.com/wd/hub',
  SELENIUM_PROMISE_MANAGER: false,
  baseUrl: 'http://localhost:8080/',
  jasmineNodeOpt: {
    defaultTimeoutInterval: 10000,
    showColors: true,
    random: false
  },
  commonCapabilities: {
    'browserstack.user': process.env.BROWSER_STACK_USERNAME,
    'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
    'browserstack.debug': false,
    'browserstack.video' : 'false',
    'browserstack.local': false,
    'browserstack.selenium_version': '3.11.0',
    'browserstack.networkLogs' : false,
    build: `${theme} theme: ci e2e`,
    name: `${theme} theme ci e2e tests`
  },
  multiCapabilities: [
    {
      browserName: 'Chrome',
      browser_version: '66.0',
      resolution: '1280x800',
      os_version: '10',
      os: 'Windows'
    },
    {
     browserName: 'Chrome',
     browser_version : '66.0',
     os: 'OS X',
     os_version: 'High Sierra',
     resolution: '1280x960'
    }
  ],
  onPrepare: () => {
    global.requireHelper = (filename) => require(`${basePath}/helpers/${filename}.js`);
    browser.ignoreSynchronization = true;

    jasmine.getEnv().addReporter(new SpecReporter({
      spec: { displayStacktrace: true }
    }));

    return browser.getProcessedConfig().then((cap) => {
      browser.browserName = cap.capabilities.browserName.toLowerCase();
      if (browser.browserName === 'chrome') {
        return browser.driver.manage().window().setSize(1200, 800);
      }
    });
  }
};

exports.config.multiCapabilities.forEach((caps) => {
  for (const i in exports.config.commonCapabilities) {
    caps[i] = caps[i] || exports.config.commonCapabilities[i];
  }
});

配置使用 2 个浏览器实例，Windows 上的 Chrome 和 OS X 上的 Chrome