Using Protractor to Test Mobile Safari with Appium

Man: [00:00] Now that we have Protractor set up to run tests on Chrome and Firefox as needed, a nice next step would be to be able to run them on mobile browsers, like the iOS Mobile Safari.

[00:15] To do that, we're going to use a tool called "Appium." Appium is an open-source tool sponsored by Sauce Labs, and it makes testing angular applications on Mobile Safari really pretty easy.

[00:32] The first thing that we're going to want to do is go in and add the Mobile Safari browser to the list of browsers that we have configured here in our Protractor configuration.

[00:43] You'll see here that this one has a few more properties than the other ones. In this case, we have to specify the platform name and platform version. Appium also supports Android, which we're not going to look at right now, so we have to specify that we want iOS.

[01:00] We're going to specify iOS 7.1, and then we're going to tell it that we actually want it to use the iPad simulator. You can also set up Appium to use real devices. In this case, we're going to specify the simulator.

[01:14] Lastly, the browser name, which we've seen before. In this case, we're just going to tell it to use Safari, which is really the only choice. Then we're also going to include the orientation property, so that we can specify that our test should run in landscape mode.

[01:30] The next thing we'll do is set up our configuration so that we can pass in an iOS flag, the same way that we are currently passing in a Chrome flag, at times.

[01:40] The way we're going to do that is just by adding an extra else/if block here, and so we're checking for the "--iOS" flag. In that case, we're going to tell it to use the capabilities of our new iOS browser that we just added. The important part is adding this Selenium address property, which tells it to use the Selenium server that Appium is going to start up for us.

[02:05] What we'll do now is actually switch over to the Appium desktop app, which I have already installed, and go ahead and turn on that server. You can see here that I have the "iOS" option selected, and now I'm just going to click "Launch."

[02:22] You'll see a little bit of setup info, and see that it's running. Now we know that we're ready to go ahead and run our tests, so we'll switch back to WebStorm.

[02:31] The last thing that we need to do for setup is to go into our package JSON and add a "Run" script. Just like we have for testing in dev mode, we're going to add one that is named "test-e2e-iOS," and that will run Protractor with the iOS flag, like we configured previously.

[02:55] Now we can switch over to the terminal, go ahead and run that command, and it didn't work because I didn't save the file. If I save the file, switch back, run that command, and now we can see that our tests are actually running. You can see that it started up the Selenium server, you can see some action going on in the background. If we actually switch over to the iOS simulator, we can see our tests running. We can see there they are, and now they're finished.

[03:27] We have successfully run our tests on Mobile Safari on the iOS simulator. There is a bunch of output here in the Appium UI as well, but that's generally only going to be important if you have an error of some sort.

[03:43] If you're like me, and tend to try and avoid GUIs whenever possible, there is one other primary way to run Appium, which is going to be to install it as a dev dependency. We're going to use "-D" here, and install Appium from NPM. It will then be available as any other module from NPM would be, and we can just run it directly.

[04:11] Actually, Protractor should be a dev dependency as well. Anything that has to do with testing or developing your app should be a dev dependency. We've got our package JSON fixed up there, and we can actually now just run Appium right there, in the terminal.

[04:26] You can see that we, again, get a little bit of startup output. We can switch back to the main tab and actually run our tests, and this time we'll see all that output in our terminal that was in the UI last time. You can see both things going on now. The tests running in the simulator, all the output in the terminal. Again, if we go back to our main testing tab, we can see that our tests did, indeed, pass.

[04:50] That is essentially the two ways that you can run those tests locally on Mobile Safari.