Mobile Application Emulator options - angularjs

we are developing HTML5 Mobile application (with angular + kendo controls). we are looking for emulator options to test our application in different devices (mainly tablets - samsung/ipad/ms surface) and its browsers (chrome,safari,ie, and its native browsers). Got to know about saucelabs and browserstack in which we can test our application in different device / os combinations, but it looks like our application has to be hosted in cloud?..(it seems to me they are more of testing tool than a dev tool ). we are looking for emulator - which helps the developer (how the application will be rendered in that device, not just the resolution) to test in multiple os/device environments before moving it to 'test'. Any suggestion?

Related

Web Test framework for Mobile as well as Server browsers

Is there any framework available where I can write single set of test code for both Server browsers as well as Mobile browsers.
eg. test.py runs with Chrome on Android as well as Windows
I am planning to use browserstack for my testing until I figure out the infrastructure handling is possible with browserstack or not.
Please help me figure out a way for deciding over the infrastructure as well.
You can try TestCafe. It's an open source project.
TestCafe allows to run tests on desktop and mobile browsers without any additional installations and plugins.
Here you can see how easy to run tests on a mobile phone with TestCafe: https://twitter.com/DXTestCafe/status/804368394569052160.
Also it's easy to setup testing on mobile browsers in a cloud service (like BrowserStack or Saucelabs). For example you can find the "testcafe-browser-provider-saucelabs" plugin on GitHub to run tests on Saucelabs out-of-the box.
Selenium + Appium should be able to cover what you need to be done. To share code however, you'll need use a mobile browser (Chrome or Safari) or have an app that uses webviews that are the same as the browser version.
The Selenium bindings will handle driving the automation for the browsers. By itself, you could test the desktop browser with a normal size screen, as well as a mobile size, and test various browsers as well (Chrome, Firefox, etc).
Appium will allow you to open the browser (or app) on the mobile device or simulator, and if the web view is the same as the browser, the same locator strategies you used with the desktop browsers and Selenium will work with Appium as well (Appium extends the Selenium spec with browser capabilities).
If you code the framework using the Selenium Grid, you can then almost drop replace a remote managed grid setup (via Saucelabs or Browserstack) to run the browsers for you (otherwise you'd need to setup a local grid or run the tests with a local Selenium server set up)
All this is quite possible
framework available where I can write single set of test code for both Server browsers as well as Mobile browsers
We have build it in our company, since we have a vast diversity of different platforms and browsers to support.
We use combination of Selenium based frameworks on NodeJS
webdriverIO
cucumberJS
appium
... etc.
The main concept we try to follow is JAVA's WORA. To achieve all this you need a good understanding of DSLs, Application driver layer and design patterns (e.g. Strategy).
It is not that hard to put all this together, since Selenium supports pretty much every binding you need. Just pick the language you are most comfortable with and use it.

Ionic framework: Single code base for various mobile devices (iOS, Android, phones, tablets)?

I am planning to develop a mobile app that completely duplicates the features that my web app offers. The web app is running on AngularJS + Django + Django REST Framework. The backend is essentially an API server, so it is pretty much ready to support a mobile frontend.
Although I know my stuff in the web development space, mobile development is completely new to me. With no prior mobile development experience and the lack of resources (as always, fund and time), HTML5/SASS/AngularJS are my best friends, so Ionic Framework + AngularJS seems to be the most viable solution for my situation.
A major requirement of this Ionic app is that it needs to support various mobile devices, ranging from iOS to Android and from phones to tablets.
With different design guidelines for iOS and Android and the different screen sizes between phones and tablets, could this requirement be met with one single code base?
If yes, what are the cons or limitations? Is this a common approach?
If no, what's the common approach in the Ionic world in supporting various mobile devices?
I use the same codebase for my Ionic hybrid app deployed as a native Android and iOS via Cordova and additionally viewable as a mobile website.
Nearly every component/layout in Ionic scales nicely between mobile and tablet devices (in some cases, you may wish to make concessions for tablet - font scaling, content adjustments etc which can be achieved by using something like mobiledetect.js and CSS media query targeting), and between devices such as iOS and Android scales with no issues at all.
You even get some inherent coolness with Ionic components such as the modal popup whereby on iPad/desktop it displays as a modal popup in the center of the screen, but on phone it resizes to take up the scale of the entire screen, looking simply like a full screen page.
Hope that helps get you on your way.

Debugging VoiceOver application using Angular JS

I have this huge Web Application using Angular JS. This application run in almost every platform and browser configuration like WIn7/IE10, MAC, iPad iOS5,7 and many more.
But this application does not work well when VoiceOver is ON for accessibility and test on iPad iOS 7. The application turn blank on double tap. How to debug this application and anyone who face similar issue can guide, it will be helpful.
Thanks,
Rocky

Sencha Touch 2 Vs. Phonegap

We are in the process of analyzing the best platform for a Hybrid mobile application. The requirement will be an app that will be available on Android/iPhone/BB devices. On all other decvices, the mobile website can be accessed from the inbuilt browser.
I understand Sencha Touch does cover Android, iPhone and Blackberry devices - which means the mobile website will not be available from the browsers in the other devices (non-webkit browsers like Windows,Palm....)
While Phonegap has the compatibility across different browsers. I'm looking to see what advantages are of using Sencha over Phonegap considering all other features?
The main difference is that PhoneGap is a framework which does not include an inbuilt UI framework. Instead, it just acts as a cross-platform wrapper for the native APIs, exposing you a Javascript based API to access native capabilities. With PhoneGap, you have the option of using pure HTML5, or using a UI framework such as Sencha Touch 2 itself, jQueryMobile, jQTouch, Kendo UI, etc. Sencha Touch on the other hand, is a UI framework, but it does not have the out of the box capability to expose a cross platform JavaScript API for the native capabilities.
From the below statement from you, I suppose you do not plan to access any native APIs in your application, and what you will be writing is a pure mobile web application.
The requirement will be an app that will be available on
Android/iPhone/BB devices. On all other devices, the mobile website
can be accessed from the inbuilt browser.
If that is the case, I don't see any reason to use PhoneGap for your application. You could just write it entirely using Sencha Touch 2, and use it's build and packaging tools to package it for the target platforms.
However, if you are planning to use native APIs, then Sencha Touch 2 alone will not be able to provide you that capability, in which case you should wrap Sencha Touch 2 in a PhoneGap application. Have a look at this video from Sencha Docs regarding this http://docs.sencha.com/touch/2.2.0/#!/video/native-apis-from-touch

Mobile devices web browser simulator

I'm looking for iPhone, iPad, Android and other mobile and smartphones web browsers simulators on x86. I would like to check how my web application written for standard web browser will be displayed on these devices.
The dev kits for these platforms include platform emulators, in which you can run the browser for that platform and load your web site to see how it will look.
http://developer.android.com/guide/developing/tools/emulator.html
http://developer.apple.com/programs/ios/develop.html
I'm programming a web application for mobile and I use JQueryMobile.
You can have more informations here :
http://jquerymobile.com/gbs/
if you just want to quickly view how a webpage would render at various mobile device resolutions then synthphone.com is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!

Resources