HomeSoftware Testing

Exploring Google Chrome Dev Tools for Mobile Web Testing

Exploring Google Chrome Dev Tools for Mobile Web Testing

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

Opening Web Application in Google Chrome Browser

2) Press F12 Key on your keyboard and observe that the Chrome Dev Tool Options will be displayed as shown below:

Google Chrome Dev Tool Options

3) Now select the ‘Three Dots’ on the Chrome Dev Tool Options and select ‘Dock to Right’ option as shown below:

Dock to Right Option

4) Observe that the Dev Tool Options will be displayed on the right and select ‘Toggle Device Tool Bar’ option as shown below:

Toggle Device Tool Bar Option

5) Observe that Mobile Web Simulation will be displayed as shown below:

Mobile Web Simulation

6) Now select the Device List Drop-down and select any Mobile Device option say ‘iPhone 6/7/8’ as shown below:

Selecting Mobile Device Option

7) Observe that the Mobile Simulation View has changed to ‘iPhone 6/7/8’ Mobile Device as shown below:

iPhone Simulation View


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:

Screen Rotation

2) Observe that the Screen of the Mobile Simulator got rotated and changed from Portrait mode to Landscape mode as shown below:

Landscape Mode

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:

Nine Device Options Displayed

5) Now click on the ‘Edit’ option in the Device List as shown below:

Edit Option Device List

6) Observe that the More Devices are displayed for adding to the default Device List as shown below:

Other Devices List

7) Select the devices that you want to be part of the default Device List from the displayed list as shown below:

Select Other Devices

8) Observe that the selected devices got added to the default device list as shown below:

Selected Devices in Default Device Options

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:

Edit Option To Add Custom Deviced

10) Click on the ‘Add Custom Device’ button as shown below:

Add Custom Device

11) Observe that the below details will be displayed for adding the Custom Device with customized options as shown below:

Emulated Cusotmized Device Options

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:

Selecting Network Tab

2) Select the Network Throttling options and select ‘Offline’ option as shown below:

Selecting Offline Option

3) Now refresh the page and observe that ‘No Internet’ message will be displayed as shown below:

No Internet

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:

Select Custom Add Network Throttling Option

5) Select ‘Add Custom Profile’ option as shown below:

Add Custom Profile

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:

Network Throttling Profile

7) Observe that  the profile will be saved with the given name ‘Slow  Test’ as shown below:

Slow Test Profile Created

8) Now select the ‘Slow Test’ option from the Throttling options as shown below:

Slow Test Option Selected

9) Click on the Web Page refresh option and observe that the Web Page will be loaded slowly as shown below:

Web Page Loading Slowly

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:

Sensors Option

 

2) ‘Sensors’ tab will be displayed to the Google Chrome Dev Tools options as shown below:

Sensors Tab displayed

3) Now lets simulate the GPS location by selecting any location say ‘San Francisco’ from the Geo Location drop-down as shown below:

Geo Location

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:

Orientation Simulation


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:

Capture Screenshot

2) Observed that the screenshot of the Mobile Web View got captured and downloaded as shown below:

Screenshot Got Downloaded

3) Open the downloaded screenshot and it will be displayed as shown below:

Actual Screenshot

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 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

Comments (2)

  • 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👍

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *