Testing of Mobile UI with the use of Toggle Device Mode(Chrome Browser)

As your mobile audience grows, responsive mobile-friendly web design becomes all the more important. Web content needs to look and feel great across a wide variety of devices and network conditions.AA

So for that purpose chrome browser provide the Toggle device mode option itself. So how we can test the Mobile UI with the use of this lets see with the use of below example.

1. First open the Chrome browser and go  to the  developer tools and click on the Toogle device mode option.








Short cut key to open device mode we can use Ctrl+Shift+M

After opening this mode you will get the below screen on your browser.

 

 Select the device and Network on which you want to test than application will open as lime mobile device.I have selected the device as Google Nexus 10





2. Now test the Height and width of the Google search box, so for this select the Search box line under the element section then you can check the width and height of the search box irrespective of the screen boundaries, in the below screen shot 1280px is width of search box and 39px is the width of the search box.

 

So this is the way which we can use to test the height and width of any element from the browser.AA

So in the next class will try to automate above verification with the use of QTP.