With the iOS 6 and 6 Plus adding to the few but various screen dimensions of iOS devices the aspect of testing your layouts and GUI against multiple device types is becoming more important.
The multi screen testing aspect is being emphasized even more when you’re working on a hybrid mobile app using HTML based layouts as your GUI with tools like Apache’s Phonegap/Cordova.
Building the iOS target, opening up XCode and selecting different device types to target and running the instance on them can be a tedious and error prone process. Luckily, it’s quick and easy to check what device types are available and to build-n-run your Cordova iOS project on a specific device using the CLI.
In this post i’ll show you how you can use the CLI to do just that.
PLEASE NOTE: This post assumes that you’re working on a Mac development machine (since that’s my rig). Most commands are equal on a Windows machine but in order to build and run an iOS project you actually need a Mac (just like you need a Windows machine to add and build a Windows platform app).
What emulator images do you have installed?
In Cordova CLI a simulator device that you can run your iOS build on is called a target. To find out what targets are available on your development machine, Cordova has a nice utility script that you can execute. You’d need to run the script in its directory, so when your prompt is in the www directory of your project, the command is as following:
Please note that you need to have created your project and added the iOS target since the script lives in the iOS platform build directory
The script will generate an overview of the targets that you can use looking something like this:
iPhone-4s iPhone-5 iPhone-5s iPhone-6-Plus iPhone-6 iPad-2 iPad-Retina iPad-Air Resizable-iPhone Resizable-iPad
The last step is executing the iOS project and running it on one of the specified simulator targets.
Since there already is an emulate command for the Cordova CLI, all that remains is specifying the target by using the –target parameter. The syntax thus becomes:
$ cordova emulate ios --target="target_name_here"
Just copy-paste one of the target names from the list and add it between brackets after the –target parameter and you’re good to go!
Can I run a specific iOS version on the iOS simulator as well?
Yes you can, but you’d have to leave the realms of the Cordova CLI and use a npm installable tool called ios-sim. Check out its github page to find out how to install it. ios-sim uses the term devicetypeid to indicate the target machine to run your app on. DO NOTE that devicetypeid includes BOTH the device type AND the iOS version.
You can get a list of devicetypeid‘s using the following ios-sim command:
$ ios-sim showdevicetypes
This will output something similar to the following list (depending on what you’ve installed):
com.apple.CoreSimulator.SimDeviceType.iPhone-4s, 7.1 com.apple.CoreSimulator.SimDeviceType.iPhone-5, 7.1 com.apple.CoreSimulator.SimDeviceType.iPhone-5s, 7.1 com.apple.CoreSimulator.SimDeviceType.iPad-2, 7.1 com.apple.CoreSimulator.SimDeviceType.iPad-Retina, 7.1 com.apple.CoreSimulator.SimDeviceType.iPad-Air, 7.1 com.apple.CoreSimulator.SimDeviceType.iPhone-4s, 8.3 com.apple.CoreSimulator.SimDeviceType.iPhone-5, 8.3 com.apple.CoreSimulator.SimDeviceType.iPhone-5s, 8.3 com.apple.CoreSimulator.SimDeviceType.iPhone-6-Plus, 8.3 com.apple.CoreSimulator.SimDeviceType.iPhone-6, 8.3 com.apple.CoreSimulator.SimDeviceType.iPad-2, 8.3 com.apple.CoreSimulator.SimDeviceType.iPad-Retina, 8.3 com.apple.CoreSimulator.SimDeviceType.iPad-Air, 8.3 com.apple.CoreSimulator.SimDeviceType.Resizable-iPhone, 8.3 com.apple.CoreSimulator.SimDeviceType.Resizable-iPad, 8.3
As you can see I have the simulators installed for iOS 7.1 and 8.3 (the latest at the time of writing). Since the iPhone 6 series starts at iOS 8.0 they are not listed for the 7.1 iOS version.
Running the specific device type with a specific iOS version can be done using the following ios-sim command (still assuming you’re in the www dir of your project):
$ ios-sim launch "../platforms/ios/build/emulator/Hello World.app" --devicetypeid "com.apple.CoreSimulator.SimDeviceType.iPhone-6, 8.3"
This will run your app on the iPhone 6 simulator loaded with iOS 8.3. Be sure to check out ios-sim since it has some other cool functions like logging output to logfiles and more!
Installing more software versions – for testing and supporting older iOS versions for instance – is also possible.
When you run XCode and go to XCode > Preferences… > Tab “Downloads” you will see the components and the versions that you have installed.
On the moment of writing I have iOS 8.3 Simulator and 7.1 installed and can only see the options for iOS version 8.2, 8.1 in the download list as those platforms are still supported by Apple.
Once installed, running the showdevicetypes command on ios-sim will output you a larger list to choose from.
Now, go on and simulate the h*ll out of your project but don’t forget: no sim beats real-device testing!