Mobile Web Application Testing on Desktop Browser

Why testing mobile application on desktop browser ?

Before you start testing your mobile site to determine how it works on mobile device, you should make sure the functionality of the site is working as expected by testing it on desktop browser. We can find functional bug that are going to be reproduce irrespective of mobile devices and get fixed from Developer at early stage before testing cycles starts on the real mobile devices. Starting testing on the mobile devices before testing on the desktop browser is not a good practice which can lead to the more testing effort. The best testing approach for the mobile application should be following.

• First test on the desktop browser to find the functional bugs and make sure that functionality of the site is as expected.
• Once site or one of its module functionality is complete then test on the device emulator to get the browser/platform coverage in case if you don't have the device.
• If device is already available then test on the device itself to find the device specific bugs instead of testing on the emulator

This testing process will help us to find the functional bugs at early stage using desktop browser and then tester can focus on the real device testing to find the device specific bugs like any rendering issues or any functional issues that do not reproduce on the desktop browser but reproduce on the device being tested, this will help developer to get better idea that it is a device specific bugs or not so they can get the right direction to fix it.

Safari and Mozilla Firefox supports some great extensions that can make testing your mobile sites on desktop browser.This post explains how to set Firefox and safari to test your mobile site.

Installation Guide for User Agent Switcher on Firefox.

1. Download and install the Firefox is not already.

2. Launch the Firefox browser and open the Tools->Add-ons to launch the Add-ons window

3. Click on the Get Add-ons button in Add-ons window.

4. Enter 'User agent switcher' in search text box and click on the search button as displayed in below image.It will display search result as displayed in below image.

5. Click on the Add to Firefox.. button of the search result displayed in above screen. This will install

display below screen.Click on the Install Now button of the software installation screen. This will install the plug-in to firefox.

6. Click on the Restart Firebox button displayed in the screen which will restart the Firefox and you can locate the installed plug-in as Tools->Default User Agent as displayed in below screen. This is how plug-in gets installed.

Mobile application Testing on Firefox using User Agent switcher plug-in.

You have now got User agent switcher plug-in installed so you can start testing you application as below.

1. On installing User agent switcher it has by default user agent installed for iPhone as displayed below so we don't have to do anything new to start testing unless there is specific requirement for the another device (N95) user agent.

2. Now navigate to any site like http://www.gmail.com then you will see the PC version of the site as displayed below since we haven't do anything with user agent switcher.

3. Now Select iPhone 3.0 from the Default User Agent menu as below.

4. Now press refresh button of the browser window and you will find the mobile version of the gmail site as you have set the iPhone user agent , server will recognize the request made from iPhone ad will serve the mobile pages of the site to the browser. Now you are ready to test the mobile application of your site. if you still see the pc version of the site then restart the firefox ,make sure that proper user agent is selected (e.g.iPhone3.0 in this case) and try navigating to your site.

5. To switch back to desktop version of the website , Select Default User Agent in user agent switcher as displayed below and refresh the page.You will be able to view the PC version of the site as usual from now.

How to Add New User Agent String ?

If there is need arise to test the mobile application by setting the particular device user agent string then you can add the user agent string as below.

1. Go to Tools->Default User Agent->User Agent Switcher->Options.. to open the User Agent Switcher Options dialog as displayed in below screen:

2. Click on the New button and select the New User Agent..menu item to open the New User Agent dialog as displayed in below screen.

3. If you need a user agent string for Nokia N95 then do a google search by 'Nokia N95 user agent string' or you can find some from here: http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones

4. Fill the New User Agent filed as below and click on the ok button of the dialog.

Description: Provide the name for which user agent string is being added.In our case provide 'N95'

User Agent: Copy the user agent value found from the google search and paste it here .For N95 user agent string is :Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/11.0.026; Profile MIDP-2.0 Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413

5. Now you can see the N95 entry in the User Agent Switcher options dialog. Click ok button of this dialog to close it. Now Go to Tools -> Default User Agent. you can see that newly added user agent entry for N95 is appears now as displayed in below screen.

6. Now Select the N95 from User Agent switcher and then you can start testing of your application. That's it ! For example: navigate to http://www.gmail.com and you will find the mobile version of gmail as displayed in the below screen. you can notice that mobile version of gmail displayed is different in look and feel then the mobile version served to iPhone above. It depends on the server which detects the mobile devices from the user agent string and server the pages designed for those devices. It doesn't mean that for each and every mobile devices there are different set of mobile page, but it depends on the application support the include provide rich application support for the rich devices like iPhone and provide lower version of the application to the remaining device that are not so much capable in terms of javascipt, CSS ,XML HTTP object etc.

Installation Guide for User Agent Switcher on Safari.

1. Download and install the Safari if not already.

2. Safari has default User agent switcher, we just need to enable it to display in the toolbar.

3. Open the Preferences windows as displayed below.

4. Navigate to Advanced tab in the Preferences window and check the 'Show developer menu in toolbar.' check box displayed as bottom of the page and close the window.

5. After closing the Preference window observe that Developer menus is displayed with some default user agent set. This is how user agent switcher gets enabled in safari.

Mobile application Testing on Safari using User Agent switcher plug-in.

You have now got User agent switcher plug-in enabled in safari so you can start testing you application as below.

1. User agent switcher has by default user agent installed for iPhone as displayed below so we don't have to do anything new to start testing unless there is specific requirement for the another device (N95) user agent.

2. Now Select iPhone from the Default User Agent menu as below.

3. Now navigate to http://www.gmail.com and you will find the mobile version of the gmail site as you have set the iPhone user agent , server will recognize the request made from iPhone and will serve the mobile pages of the site to the browser. Now you are ready to test the mobile application of your site. If you still display the pc version of the site then restart the safari,make sure that proper user agent is selected (e.g.iPhone in this case) and try navigating to your site.

4. To switch back to desktop version of the website , Select Default User Agent for safari in user agent switcher as displayed below and refresh the page.You will be able to view the PC version of the site as usual from now.

How to Add New User Agent String ?

If there is need arise to test the mobile application by setting the particular device user agent string then you can add the user agent string as below.

1. Go to Developer->User Agent->Options to open the the dialog to enter the custom user agent strings as displayed in below screen:

2. Now copy the user agent string for the desired device to the text field displayed in above dialog, in our case copy the user agent string for N95 and click on the ok button of the dialog.

3. Now Go to Developer ->User Agent. you can see that newly added user agent entry for N95 appears as displayed in below screen.

4. Now Select the User Agent string for N95 and then you can start testing of your application. That's it ! For example: navigate to http://www.gmail.com and you will find the mobile version of gmail as displayed in the below screen.