Exploring Google Chrome Dev Tools for Mobile Web Testing
If the Web Applications are Mobile enabled, then we can test by browsing them in the different supported Mobile Devices.
Instead of using the Real Devices for testing the Mobile Enabled Web Applications which are costly, we can use the Simulation solution provided by the Google Chrome Browser Dev Tool for testing.
In this article, I am going to practically show the Simulation Solution provided by the Google Chrome Browser Dev Tools for performing Mobile Web Testing and the various options provided by the Google Chrome Dev Tools for performing the Mobile Web Testing effectively.
Let’s get started.
Google Chrome Dev Tools for Mobile Web Simulation
Follow the below steps for Simulating the Mobile Web using Google Chrome Dev Tools:
1) Open any Web Application say QAFox.com in the Google Chrome Browser available in your Laptop
2) Press F12 Key on your keyboard and observe that the Chrome Dev Tool Options will be displayed as shown below:
3) Now select the ‘Three Dots’ on the Chrome Dev Tool Options and select ‘Dock to Right’ option as shown below:
4) Observe that the Dev Tool Options will be displayed on the right and select ‘Toggle Device Tool Bar’ option as shown below:
5) Observe that Mobile Web Simulation will be displayed as shown below:
6) Now select the Device List Drop-down and select any Mobile Device option say ‘iPhone 6/7/8’ as shown below:
7) Observe that the Mobile Simulation View has changed to ‘iPhone 6/7/8’ Mobile Device as shown below:
Adding more Mobile Device Simulators and customized Device Simulators using Google Chrome Dev Tools options
Follow the below steps for adding more Mobile Device Simulators and customized Device Simulators using Google Chrome Dev Tools options:
1) Click on the ‘Rotate’ option as shown below:
2) Observe that the Screen of the Mobile Simulator got rotated and changed from Portrait mode to Landscape mode as shown below:
3) Again rotate the screen back to the Portrait mode using the same Rotate option shown in the above steps.
4) Click on the Device List and observe that there are 9 Device Options displayed for selection by default as shown below:
5) Now click on the ‘Edit’ option in the Device List as shown below:
6) Observe that the More Devices are displayed for adding to the default Device List as shown below:
7) Select the devices that you want to be part of the default Device List from the displayed list as shown below:
8) Observe that the selected devices got added to the default device list as shown below:
9) Apart from the possible devices that can be added to the default device list, we can also add the Custom Device. Select ‘Edit’ option from the default device list as shown below:
10) Click on the ‘Add Custom Device’ button as shown below:
11) Observe that the below details will be displayed for adding the Custom Device with customized options as shown below:
Note: I am not adding the customized device from the above screen and will be moving to other options in the next step.
Network Throttling using Google Chrome Dev Tools options
Apart from simulating the Mobile Devices using the Google Chrome Dev Tool options, we can also simulate the network speed (i.e. internet speed) using the Network Throttling options in the Google Chrome Dev Tool options.
Using these Network Throttling options, we can slow down the internet and also turn off the internet to mimic the internet speed. By mimicking the different internet speeds, we can test the real cases like testing the Mobile Web on a Mobile Device having the slow internet etc.
Follow the below steps for simulating the internet speed using the Network Throttling options available in the Google Chrome Dev Tool options:
1) Click on the ‘Network’ tab in the Google Chrome Dev Tools Options as shown below:
2) Select the Network Throttling options and select ‘Offline’ option as shown below:
3) Now refresh the page and observe that ‘No Internet’ message will be displayed as shown below:
4) Similarly we can use the above same Network Throttling options to set the simulated low internet speed.
Select ‘Custom’ -> ‘Add’ option from the Network Throttling options as shown below:
5) Select ‘Add Custom Profile’ option as shown below:
6) Provide the Profile Name as Slow Test, Download speed as 5, Upload speed as 2 and Latency as 100 as shown below and click on Save button to save the profile:
7) Observe that the profile will be saved with the given name ‘Slow Test’ as shown below:
8) Now select the ‘Slow Test’ option from the Throttling options as shown below:
9) Click on the Web Page refresh option and observe that the Web Page will be loaded slowly as shown below:
As you can see from the above steps, we can simulate the Network (i.e. different internet speed) using the Network Throttling options of the Google Chrome Dev Tools options.
Note: Change the Network Throttling options to ‘Online’ mode to go back to the original speed settings.
Google Chrome Dev Tools for Emulated Mobile Sensors
Apart from the above explained Mobile Device Simulation and Network simulations using the Google Chrome Dev Tools, we can also simulate the GPS location and Device Orientation using the Google Chrome Dev Tools.
Follow the below steps for Simulating the GPS location and customized Device Orientation using Google Chrome Dev Tools:
1) Select ‘Three Dots’ on the Google Chrome Dev Tools options, and select More Tools > Sensors option as shown below:
2) ‘Sensors’ tab will be displayed to the Google Chrome Dev Tools options as shown below:
3) Now lets simulate the GPS location by selecting any location say ‘San Francisco’ from the Geo Location drop-down as shown below:
Note: The Mobile Web will work as if it is in the San Francisco location.
4) Similarly we can simulate the Device Orientation by selecting the Orientation options from the Orientation drop-down as shown below:
Taking Screenshots using Google Chrome Dev Tools options
We can also take screenshots of the Mobile Web View using the options available in the Google Chrome Dev Tools.
Follow the below steps for taking screenshots using the options available in the Google Chrome Dev Tools:
1) Select ‘Three Dots’ in the Simulator options and select ‘Capture Screenshot’ option as shown below:
2) Observed that the screenshot of the Mobile Web View got captured and downloaded as shown below:
3) Open the downloaded screenshot and it will be displayed as shown below:
Hence we are able to simulate the Mobile Devices, Network Speed, Device GPS, Orientation and take screenshots using the above specified options in the Google Chrome Dev Tools Options.
Here end this article.
Hope your enjoyed it.
Kindly provide your valuable feedback which will motivate us to write more this kind of articles.
Please leave your questions/comments/feedback below.
Happy Learning 🙂
On a mission to contribute to the Software Testing Community in all possible ways.
Superb article Arun! Recently i came across mobile simulating, and i had to struggle to found appropriate content with proper steps! But your article has each and every small detail covered so perfectly! Thanks for sharing👍
Thank you Riddhi.