In order to run protractor tests on multiple browsers, Protractor offers multiCapabilities configuration option. These options should be defined as an array of objects.

As we know we can run protractor specs on different browsers by setting the browser name property of the capabilities in the conf.js file. We can execute on chrome browser by specifying browserName as 'chrome' and 'firefox' to execute on Firefox browser or whichever browser we need like below :-

// Capabilities to be passed to the webdriver instance.
  capabilities: {
  'browserName': 'chrome',
},

Now let us see how to execute protractor tests on multiple browsers in parallel using multiCapabilities.

  multiCapabilities: [
    {'browserName': 'chrome'},
    {'browserName': 'firefox'},
  ],

If we add above parameter to conf.js file, your tests will run on chrome and Firefox browsers at the same time across browser. To use other browsers, simply set a different browser name in the capabilities object.

Please note that if multiCapabilities is defined in the conf.js, the runner will ignore the capabilities configuration if any.

We can also specify browser specific options in the chromeOptions/FirefoxOptions object.

For example, while invoking the chrome browser, there is an info bar appears under address bar, with information "Chrome is being controlled by automated test software". If you want to disbale this bar, we can pass argument to disable the information bar to ChromeOptions.

This is how we do using 'capabilities'

capabilities: {
  'browserName': 'chrome',
  'chromeOptions': {
    'args': ['disable-infobars']
  }
},

This is how we can do using multiCapabilities :-

multiCapabilities: [
    {'browserName': 'chrome',
	'chromeOptions': {
    'args': ['disable-infobars']
   }
  },
    {'browserName': 'firefox',
	'moz:firefoxOptions': {
    'args': ['--safe-mode']
  }
	}
  ],

Let us execute simple spec in parallel on multiple browsers (In chrome and firefox browsers)

First create a simple spec like below : -

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('https://material.angular.io/components/form-field/overview');

    element(by.id('mat-input-8')).sendKeys('sssss');
	
	element(by.id('mat-input-9')).sendKeys('sssss');

    element(by.id('mat-select-0')).click();
	
	element(by.className('mat-option-text')).click();
	expect(element(by.className('ng-tns-c22-6 ng-star-inserted')).isPresent());

  });
});

Now create a conf.js file like below : -

// An example configuration file.
exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  multiCapabilities: [
    {'browserName': 'chrome',
	'chromeOptions': {
    'args': ['disable-infobars']
   }
  },
    {'browserName': 'firefox',
	'moz:firefoxOptions': {
    'args': ['--safe-mode']
  }
	}
  ],

  // Framework to use. Jasmine is recommended.
  framework: 'jasmine',

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

  // Options to be passed to Jasmine.
  jasmineNodeOpts: {
	showColors: true,
    defaultTimeoutInterval: 20000
  }
};

Execute the above code using protractor conf.js command.

It should open two browser instances chrome and firefox and run your spec in parallel.

I hope you this example to execute protractor specs on multiple browsers using multiCapabilities. Please feel free to add your suggestions/questions in comments below.