Hybrid Application Testing with Protractor and Appium

Testing hybrid projects can be challenging. The number of mobile devices the product has to target adds layers of complexity. Nowadays browsers come with powerful device emulators, which brings up a great question: Why bother configuring and testing on real devices? Well, because emulation can’t match real device testing so checking on it is a must.
With ProtractorJS and Appium you’ll be able to test Angular Hybrid applications easily and quickly.

Hybrid applications testing with Protractor and Appium

“Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.” ¹

“Appium is an open source test automation framework for use with native, hybrid and mobile web apps. It drives iOS, Android, and Windows apps using the WebDriver protocol.” ²

Combining the two is not as hard as it may seem at first look. The steps needed to accomplish this are described below:

Pre-requisites:

• IDE
• NodeJS 6.x.x
• ProtractorJS
• Appium
• USB cable
• iOS / Android device

Configure Protractor for device testing:

   capabilities: {
        browserName: '',
        app: '[ABSOLUTE_PATH_TO_APK/ABSOLUTE_PATH_TO_APP]',
        bundleId: '[com..],
        deviceName: '[ACTUAL_DEVICE_NAME]',
        platformName: '[Android/iOS]',
        platformVersion: '[ANDROID_VERSION/iOS_VERSION]',
        udid: '[ONLY_FOR_iOS=THE_UDID_OF_DEVICE]'
        autoWebview : true,
        autoWebviewTimeout: 10000,
        autoAcceptAlerts: 'true'
    },

Configure the device for testing:

For iOS, you have to do the following:

• Enable Web Inspector. Here is a how-to article for this.
• Sign the application with a valid Certificate and Provisioning Profile
• Install the application using Xcode or let Appium install it using Fruitstrap
• Install libimobiledevice and ios-webkit-debug-proxy

For Android, you have to do the following:

• Enable USB Debugging. Here is a how to article.

Run tests on device:

• Connect the device to the PC
• Start appium server
  • appium
• Start ios-webkit-debug-proxy (for iOS only)
  • ios_webkit_debug_proxy -c[device_UDID]:27753
• Run protractor tests

Hooray! Tests are now running directly on the device.

Conclusion

Validating a hybrid application on a device may be a good idea and helps you get real data regarding hardware usage and application behaviour within its real environment.
It may not be easy but definitely is not hard to configure a test project to run on devices. Using the above configuration, you can easily set your test project to run your tests on devices and have feedback on how both the application and device behave.

Here is a repo with the configuration described above. Please note that there may be more solutions to this so feel free to choose the one that fits best for you or exercise a new one.

References: