Running multiCapabilities on browserstack using browserstack-local
<p>I'm working on an angular project where we have end to end tests using protractor.  We use <code>gulp-protractor</code> to run these tests. Every thing works fine on local. Now we want to increase the number of browsers and devices under tests, so I started to change <code>protractor.conf.js</code> to work with browserstack.</p>

<p>The web application under tests is running locally, so I use <code>browserstack-local</code> as well.</p>

<p>I have a configuration working well for one browser, which test website running on local (inspired from <a href="https://github.com/browserstack/protractor-browserstack/blob/master/conf/local.conf.js" rel="nofollow">https://github.com/browserstack/protractor-browserstack/blob/master/conf/local.conf.js</a>).</p>

<p>Now, I'm trying to adapt it to run on multi-browsers (following <a href="https://github.com/browserstack/protractor-browserstack/blob/master/conf/parallel.conf.js" rel="nofollow">https://github.com/browserstack/protractor-browserstack/blob/master/conf/parallel.conf.js</a>). I end up with that configuration:</p>

<pre><code>exports.config = {
  framework: 'jasmine2',
  onPrepare: common.onPrepare,

  // The address of a running selenium server.
  seleniumAddress: 'http://hub-cloud.browserstack.com/wd/hub',

  commonCapabilities: {
    'browserstack.user': 'OUR_USER',
    'browserstack.key': 'OUR_KEY',
    name: 'Taylor Wimpey e2e tests',
    'browserstack.debug': 'true',
    'browserName': 'chrome',
    'browserstack.local': true
  },

  multiCapabilities: [{
    browserName: 'Chrome'
  },{
    browserName: 'Safari'
  },{
    browserName: 'Firefox'
  },{
    browserName: 'IE'
  }],

  baseUrl: 'http://localhost:3000',

  // Spec patterns are relative to the current working directory when
  // protractor is called.
  specs: [paths.e2e + '/**/*.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },

  // Code to start browserstack local before start of test
  beforeLaunch: function(){
    console.log("Connecting local");
    return new Promise(function(resolve, reject){
      exports.bs_local_args = {
        key: exports.config.commonCapabilities['browserstack.key'],
        force: true
      };
      exports.bs_local = new browserstack.Local();
      exports.bs_local.start(exports.bs_local_args, function(error) {
        if (error) return reject(error);
        console.log('Connected. Now testing...');

        resolve();
      });
    });
  },

  // Code to stop browserstack local after end of test
  onComplete: function(){
    console.log('Stop browserstack local');
    return new Promise(function(resolve){
      exports.bs_local.stop(resolve);
    });
  }
};

// Code to support common capabilities
exports.config.multiCapabilities.forEach(function(caps){
  for(var i in exports.config.commonCapabilities) {
    caps[i] = caps[i] || exports.config.commonCapabilities[i];
  }
});
</code></pre>

<p>Tests are launched and worked (my reports are generated for each browsers), but it never stop. Here the end of console logs:</p>

<pre><code>...
[BS] Serving files from: .tmp/serve
[BS] Serving files from: src
Connecting local
Connected. Now testing...
[09:05:39] I/launcher - Running 4 instances of WebDriver
......F......FFF^C
</code></pre>

<p>so I have to kill them manually, which is not an option as at the end, tests will be running in a continuous integration server.</p>

<p>Does anyone knows how to get e2e tests working on multi-browsers using browserstack with the web application under test running on local?</p>

<p><strong>UPDATE</strong>: browserstack support has added an example for multi-capabilities running on local on their github repo: <a href="https://github.com/browserstack/protractor-browserstack/blob/master/conf/parallel_local.conf.js" rel="nofollow">https://github.com/browserstack/protractor-browserstack/blob/master/conf/parallel_local.conf.js</a></p>

<p>The only difference is to use <code>afterLaunch</code> instead of <code>onComplete</code></p>

<p>Thanks</p>