Protractor: Running tests on multiple browsers

Man 1: [00:00] One of the main reasons to use a tool like Protractor is so that you can test your application in multiple browsers. Today we're going to take a look at how to do that. Just to refresh where we're at, we can run our tests here on the Selenium standalone server. That's going to run those on Chrome. Everything passes, and we're good.

[00:23] We probably want to check out some other browsers as well besides Chrome. Let's see how we do that. Before we actually get into that, though, I want to show you an easier way to run these tests. It won't be terribly beneficial right now, but as we start to add more browsers and ways to run our tests, this sort of approach will pay off.

[00:46] We're going to add this item to the scripts field here called test-E2E. Now we can run that same command by just doing NPM run test- E2E. You can see that it's going to start the Selenium server again, run the tests. We're back to where we started.

[01:04] The way that you tell Protractor to use a different browser is using a property called capabilities. If we put in capabilities and then give it an object, we can then give it a name. That's really just a name for our own purposes. Then what Protractor is really interested in is this property called browser name.

[01:27] Here we're going to say the browser name is Firefox. If we save this, go back and run our test again, you see that they actually run on Firefox this time. This is all now well and good, but we're now running on Firefox instead of Chrome, not in addition to it.

[01:51] In order to specify multiple browsers, we're going to use a property called multi-capabilities. Let's change this property name to multi-capabilities. Now we need to actually give it an array. We're going to say we've got our Firefox there. We'll change this one to Chrome. Now we can run our test on both browsers.

[02:21] You can see that it says it's running two instances of web driver. Now we get some nice output here that shows us it was running two instances. The Chrome tests all passed. We get a little bit of output as well as our test results. Then we've got Firefox and the test results for that.

[02:43] Running your end to end tests across multiple browsers is great and most likely what you want to do as part of your continuous integration process, but when you're just developing and trying to get your end to end tests set up, it's sometimes nice to be able to run them on one browser, probably Chrome, and iterate quickly.

[03:04] To do that what we're going to do, I'm going to copy this test-E2E script that we have. I'm going to give it a new name of test end to end-div. Here I'm going to say - - Chrome. What we're then going to be able to do is go back over here to our Protractor config.

[03:27] You'll notice that the config file is just a regular Node.JS module. It's exporting a property called config. Protractor is going to look at that config property that gets exported and use whatever it finds in there. We can use a little bit of logic to actually control what we have in there.

[03:49] The first thing I actually am going to do is create an object called browsers here. We're going to move our browsers up here. We're going to give them each a name. The first one will be Firefox. Then we need to give this one a name. We'll say Chrome. Let's format our code here. Now we have a browsers object that has a Firefox property and a Chrome property. Each of those points to the respective browser.

[04:22] By default we've got our config object here with this multi-capabilities property. What we actually want to do is let's get rid of this. We'll save that property name and get rid of that. By default our exports.config is just going to have the patterns for the specs and the base URL.

[04:52] What we're actually going to do down here is we are going to check the process.argv array. We're going to grab the third object out of hit. Process.argv is what you use in a Node.JS script to read command line properties.

[05:14] They all come in as an array. The first item in the array is going to be the name of the program being run, so generally Node. The second argument is going to be name of the script being run. The third object is going to be the first argument and then so on and so forth.

[05:40] In the case of running Protractor, this actually gets converted into a call to Node itself and then references the Protractor executable. Then our second property here becomes the third property. The first thing that we are actually interested in, this Chrome property that we're passing in, is going to be the fourth item in the array, so we're going to use the index of three.

[06:06] We're going to say if that item is equal to - - Chrome, then we know that we just want to use Chrome for testing. We're then going to say exports.config.capabilities equals browsers.Chrome. Otherwise we're going to use the multi-capabilities like we had before, so exports.config.multicapabilities equals an array. Then browsers.Firefox and browsers.Chrome.

[06:59] Let's test this out. If we go over here, and, again, just run our plain NPM run test-E2E, it should run both of the browsers, which we can see that it is. It told us that it's running two instances. We can see that it was run in both Chrome and Firefox.

[07:20] Now if we go down here and run test-E2E-div it should...oh, we've got an error there. It looks like we accidentally have a space between our dashes and our Chrome there. Let's try that again. Now you can see that it's just running the one instance of Chrome and shutting down directly.

[07:48] Now we have an easy way to switch between just running on Chrome and running both browsers in sort of our default case. I just noticed here, this actually was misspelled. It was still working, because Chrome is the default. If it doesn't find a valid capabilities object, it's just going to default to Chrome. We'll fix that there, and there we go.