Hybrid Application Testing with Protractor and Appium


March 24, 2017
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.” 1

“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.” 2

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:


  1. Source: http://www.protractortest.org/#/ 

  2. Source: http://appium.io/ 


Popescu_Sergiu square
Sergiu Popescu is a QA Engineer at Modus Create. He specializes in automating test processes for web and hybrid apps using Java, JS, and a wide range of tools and libraries like TestNG, jUnit, Webdriver, WebdriverJS, Protractor and Siesta. When he is not hunting bugs in apps, he enjoys spending time with his lovely wife and son.

  • meenakshi 1

    Hi Sergiu Popescu,
    I have a requirement to use Appium with Protractor, but this isn’t working for me for some reason. Can you please help me with the issue?

    Regards,
    Meenakshi

    • Popescu Sergiu-Nicolae

      We can connect on FB Messenger

    • jeya prakash

      can you share logs which you got an error

  • jeya prakash

    i m getting the error . what is this issue ?
    E/launcher – The best matching driver provider org.openqa.selenium.ie.InternetExplorerDriver can’t create a new driver instance for Capabilities [{app=C:/wamp/www/Automation/juliemr/protractor-demo/assets/tSMA_PHONE-release.apk, autoWebviewTimeout=10000000, appium-version=1.6, platformVersion=5.0.2, bundleId=com.ryzmedia.tatasky, count=1, browserName=, autoWebview=true, platformName=Android, deviceName=4fb361af, autoAcceptAlerts=true}]

    • Popescu Sergiu-Nicolae

      If I am right, you are trying to create an Android emulator using InternetExplorerDriver. Change with ChromeDriver and it will work

      • jeya prakash

        Thanks, I found root cause of this issue was chromedriver version. Earlier used 2.31 version. after i changed in appium chormedriver version 2.25 it’s working

  • Washington Catalan

    Hi, when I try to run the test , i recived the error code 100 Log : https://pastebin.com/dLX8idCQ. I have this configuration :

    exports.config = {
    seleniumAddress: ‘http://localhost:4723/wd/hub’,
    capabilities: {
    platformName: ‘android’,
    autowebview: true,
    platformVersion: ‘4.4.4’,
    deviceName: ‘CAS33809’,
    app: ‘C:/Users/xx/Documents/clinica/Nucleo Movil/0.1/AppMovilMemoria/tools/Visual Studio Code/NucleoMovil/platforms/android/build/outputs/apk/android-debug.apk’,
    browserName: ”,
    autoWebviewTimeout: 20000,
    autoAcceptAlerts: ‘true’,
    bundleId: ‘cl.alemana.m’,
    },
    baseUrl: ‘localhost:5554’,
    specs: [‘spec-2.js’],
    onPrepare: function () {
    var wd = require(‘wd’),
    protractor = require(‘protractor’),
    wdBridge = require(‘wd-bridge’)(protractor, wd);
    wdBridge.initFromProtractor(exports.config);
    }
    };


What We Do

We’ll work closely with your team to instill Lean practices for ideation, strategy, design and delivery — practices that are adaptable to every part of your business.

See what Modus can do for you.

LET'S GET STARTED

We're Hiring!

Join our awesome team of dedicated engineers.

Loading...

APPLY NOW