Launching mobile browser emulator

This feature is on-demand support

How to start a mobile browser emulator to allow TestArchitect to open and interact with mobile web applications.

To start an emulator, do the following in your test:

  1. Close all Google Chrome instances, if running.

  2. Use the use browser built-in setting to launch Google Chrome, since Chrome’s Device Mode is an integral part of DevTools.

                 setting          value
    setting      use browser      Chrome
    
  3. Use the navigate built-in action to navigate to a web page.

                 location
    navigate     https://www.google.com/
    
  4. Use the send command to browser built-in action to invoke your selected emulator in Chrome’s Device Mode (learn more). For example, the following JSON string defines:

    • the user agent,
    • whether to emulate a mobile device,
    • screen width,
    • screen height,
    • device pixel ratio,
    • whether a view that exceeds the available browser window area should be scaled down to fit,
    • enabling of touch event emulation
                               window      command                                                                                                                                                                                                                  variable            
    send command to browser    google      [{"method":"Network.setUserAgentOverride","params":{"userAgent":"Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.114 Mobile Safari/537.36"}},       >>emulator
                                           {"method":"Emulation.setDeviceMetricsOverride","params":{"mobile":true,"width":260,"height":640,"deviceScaleFactor":2,"fitWindow":false}},
                                           {"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true}}]
    
  5. Refresh the page by using the refresh built-in action to ensure the newly-invoked emulator take effect properly.

    Important:
    It should be noted that, upon conclusion of an automated run on the emulator, the Chrome browser automatically switches out of Device Mode and returns to Desktop Mode.

  6. Now you’re ready to begin performing your automated web-based tests on the emulator.

    Your snippet of test should resemble the following.

    //Launch Google Chrome   
                                setting                    value
    setting                     use browser                Chrome
    
    //Navigate to a URL in Chrome
    
                                location
    navigate                    https://www.google.com/
    
    //Invoke a specified emulator in Chrome's Device Mode
    
                                window                    command                                                                                                                                                                                                              variable            
    send command to browser     google                    [{"method":"Network.setUserAgentOverride","params":{"userAgent":"Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.114 Mobile Safari/537.36"}},       >>emulator
                                                          {"method":"Emulation.setDeviceMetricsOverride","params":{"mobile":true,"width":260,"height":640,"deviceScaleFactor":2,"fitWindow":false}},
                                                          {"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true}}]
    
    //Refresh the page to ensure the emulator takes effect
    
                                window
    refresh                     google
    
    //Do something
    
  7. You may wish to change the environment for the emulator to customize its behaviors. When the mobile browser emulator has been invoked, use the send command to browser built-in action again.

    Technically, send command to browser sends a JSON string request to Google Chrome to customize the emulator behaviors on-the-fly. Note that you can change as many behaviors as you want, as long as those behaviors are supported by Chrome debugging protocol.

    Tip:
    You may want to validate your JSON string with the free resource jsoneditoronline.org/, to ensure that its syntax and format are accurate.

    Suppose that you’d like to change the following behaviors:

    • Configure network:

      • User agent (UA): Allows you to set a specific UA string override by using the setUserAgentOverride method. The following JSON string overrides the current UA.

      • Network throttling: Emulate network connectivity to test your site on a variety of network connections, including Edge, 3G, and even offline, through the emulateNetworkConditions method. The following JSON string defines a Regular 3G network, including:

        • Additional latency (ms)
        • Maximal aggregated download throughput
        • Maximal aggregated upload throughput
    • Emulate geolocation data: Unlike desktops, mobile devices commonly use GPS hardware to detect location. You can simulate geolocation coordinates by using the setGeolocationOverride method. The following JSON string enables the geolocation emulation including:

      • Latitude

      • Longitude

      • Accuracy

    • Emulate accelerometer (device orientation): To test accelerometer data, enable the accelerometer emulator by using the setDeviceOrientationOverride method. The following JSON string manipulates the following orientation parameters:

      • Alpha: Rotation around the z-axis.

      • Beta: Left-to-right tilt.

      • Gamma: Front-to-back tilt.

  8. Since you change the emulator behaviors on-the-fly, it is highly recommended that you refresh the page by using the refresh built-in action to ensure all new behaviors take effect properly.

    Your snippet of test should resemble the following.

    //Launch Google Chrome   
                                setting                    value
    setting                     use browser                Chrome
    
    //Navigate to a URL in Chrome
    
                                location
    navigate                    https://www.google.com/
    
    //Invoke a specified emulator in Chrome's Device Mode
    
                                window                    command                                                                                                                                                                                                           variable             
    send command to browser     google                    [{"method":"Network.setUserAgentOverride","params":{"userAgent":"Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.114 Mobile Safari/537.36"}},    >>emulator
                                                          {"method":"Emulation.setDeviceMetricsOverride","params":{"mobile":true,"width":260,"height":640,"deviceScaleFactor":2,"fitWindow":false}},
                                                          {"method":"Emulation.setTouchEmulationEnabled","params":{"enabled":true}}]
    
    //Refresh the page to ensure the emulator takes effect
    
                                window
    refresh                     google
    
    //Develop web automation here
    
    //Change environment to customize emulator behaviors on-the-fly
    
                                window                    command                                                                                                                                                                                                          variable
    send command to browser     google                    [{"method":"Network.setUserAgentOverride","params":{"userAgent":"Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36"}},     >>new_behavior
                                                          {"method":"Network.emulateNetworkConditions","params":{"offline":false,"latency":100,"downloadThroughput":750,"uploadThroughput":250}},
                                                          {"method":"Emulation.setGeolocationOverride","params":{"latitude":16,"longitude":108,"accuracy":1}},
                                                          {"method":"DeviceOrientation.setDeviceOrientationOverride","params":{"alpha":32,"beta":26,"gamma":7}}]
    
    //Refresh the page to ensure all new behaviors take effect
    
                                window
    refresh                     google
    

    Important:
    It should be noted that, upon conclusion of an automated run on the emulator, the Chrome browser automatically switches out of Device Mode and returns to Desktop Mode.


Copyright © 2024 LogiGear Corporation. All rights reserved. LogiGear is a registered trademark, and Action Based Testing and TestArchitect are trademarks of LogiGear Corporation. All other trademarks contained herein are the property of their respective owners.

LogiGear Corporation

1730 S. Amphlett Blvd. Suite 200, San Mateo, CA 94402

Tel: +1 (650) 572-1400