Mobile WebApp User Agent Testing (Testing Mobile WebApps & Websites & through User Agents on the Desktop Browser)

Hi Guys

In this post we’ll take an in-depth look at mobile webapp user agent testing (or User Agent based mobile webapp/website testing) on desktop browsers. For those who don’t know, user agents are basically desktop web browser tools that allow you to emulate any mobile device’s browser (iPhone 4, iPhone 5/5s, Samsung Galaxy S5, Nokia Lumia 1320, etc.) within your desktop browser, so you can see how your mobile website/web application will look and behave, when viewed in that mobile device’s browser.

So by selecting the relevant user agent for any mobile device browser and then opening the mobile website/web page through this user agent, you can open and see the mobile version of that web page on your desktop. How does this work? It’s quite simple. Whenever you visit a mobile website/web application from the browser, your web browser sends a number of headers along with the user-agent string to website’s server. This string indicates:

• The browser you’re using and its version
• The OS you’re using and its version

Based on this info, the mobile website/webapp’s server automatically detects the device, OS and browser that the request is coming from and serves up content customized for that particular device’s browser. The content delivered to the browser however, depends on the type of content supported by the mobile website/ web application’s server. For example, for high end mobile devices like the iPhone, the mobile website/webapp server may provide rich application support while to other mobile devices that are less capable (in terms of JavaScript, CSS, XML, HTTP object support, etc.), the server may provide a lower version of the mobile website/web application.

A variety of User Agent strings are available on internet (in various browsers) for simulating different mobile device browsers. If the User Agent you require is not available in the list supported by your desktop browser by default, there are browser add-ons available that can provide you with a mechanism to add the User Agent String for the relevant mobile devices you wish to test for.

Apple’s Safari and Mozilla’s Firefox browsers provide some great extensions (User Agents) that you can use to test any mobile website / webapp on your desktop. In Firefox for example, there’s an extension called ‘User Agent Switcher’ which by default has the user agent installed for the iPhone browser. It also enables you to quickly switch between various device browser user agents (iPhone 4, 5 browser, various Android device browsers, etc.) from the FireFox toolbar, when checking a particular website to see how it will look on these various devices’ screens – hence the name User Agent Switcher. Firefox also offers another extension called “UserAgentUpdater”, which enables you to quickly change between various device browser user agents from the Firefox browser’s menu, when testing any website or web application.

The Safari browser on the other hand offers a user agent switcher by default, which you just need to enable, in order to use and display in the browser’s toolbar. In Chrome & Internet Explorer, you don’t need to add any extensions for selecting and changing between various device browsers’ user agents. You can easily do that via the Developer Tools option given in both browsers.

To identify the current user agent being used by your desktop browser, type the following in your web browser:

• javascript:alert(navigator.userAgent)
• http://www.whatsmyuseragent.com/

Why You Should Conduct Mobile Webapp User Agent Testing on Desktop Browsers

By conducting mobile webapp user agent testing on desktop browsers, you can basically spot any functionality or UI related bugs/errors in your mobile website or webapp early on, without needing to test it in the actual mobile device’s browser. As such you can fix any functionality related bugs before starting formal testing cycles on mobile devices.

Jumping directly to device based testing before conducting functional testing of your mobile website / web app on a desktop browser is not a good approach, since it can add more hours to your testing efforts and make the testing process much more tedious. The best approach for testing mobile websites / web applications is as follows:

• First conduct the mobile webapp user agent testing on the desktop browser to identify any potential functionality related bugs and ensure that the functionality of your mobile web application works as expected
• Once the entire mobile website/web app or a specific module (if you’re just testing a particular module’s functionality) has successfully cleared functional testing, you can then test it on either a device emulator (in case if you don’t have a real device available) or on an actual mobile device’s browser, in order to find any device specific bugs that may be there.

By using this mobile webapp user agent testing approach, for testing your mobile website / webapp, you can catch both functionality related bugs as well as any device specific bugs (such as rendering issues or potential functionality issues that are not reproduced during testing on the desktop browser). By conducting the functional testing first, you can also identify which bug/bugs are device specific and which ones are functionality/feature related, so you can take the necessary steps to fix them.

Some of the most commonly used user agent strings available for the Mozilla Firefox Desktop browser are given below:

• iPhone iOS 6 – Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
• iPad iOS 6 – Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
• Android Nexus S OS 4.1.1 – Mozilla/5.0 (Linux; U; Android 4.1.1; en-us; Nexus S Build/JRO03E) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
• Android OS 2.3 – Mozilla/5.0 (Linux; U; Android 2.3.3; zh-tw; HTC_Pyramid Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Hope you guys find this post useful!

About Folio3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 offers native app development services and cross platform mobile app development services (for both enterprise and consumer oriented apps). We also offer extensive software testing, mobile app testing and QA services including mobile webapp user agent testing. If you have a mobile app idea that you’d like to discuss please Contact Us or learn more about our iPhone, Android and Windows Phone app development services

Blog Post