Configuring Custom Virtual Browsers

TestComplete comes with a set of virtual browsers that make it easy to get started. To create one for a new device, navigate to the project’s properties, Open Applications > Web Testing > Virtual Browsers. Each virtual browser has a Name that identifies it in script, a user agent string that describes the characteristics of the device, and the dimensions of the device. Once added, virtual browsers are available in script from the VirtualBrowsers object, from the recording toolbar, and from keyword tests under Web operations.

Click the Add… button to start creating a new virtual browser.

Enter the user agent string that identifies the browser, operating systems, version numbers, device and other information (see below for more info on getting one of these user agent critters).

If you enter http://www.useragentstring.com/ in the device’s browser, you will get the user agent string of your browser along with a breakdown of its parts. Here’s the user agent string for my Samsung Note 4 that shows I’m running Android 5.0.1 (Lollipop) on a Samsung Model SM-910V.

Screen Size in CSS Pixels

The next page of the Add Virtual Browser wizard wants browser dimensions in CSS pixels. That’s CSS pixels, not the device display resolution from the manufacturers specifications. For example, the Samsung Galaxy Note 4 physical display resolution is 1440 x 2560. I can enter those dimensions without TestComplete complaining, but running the virtual browser with these dimensions certainly doesn’t look anything like my phone. The Samsung Note 4 uses 4 x 4 physical device pixels to show one CSS pixel. Google “css pixels” and the name of your device to look for the pixel ratio and resulting CSS pixel dimensions. http://viewportsizes.com/ or http://www.canbike.org/CSSpixels (below) both let you filter to get your device (css) width and height. The Samsung Galaxy Note 4 is 640 x 360 in CSS pixels.

Use the device width and height to fill in the CSS pixel Screen width and Screen height. If you want the virtual browser orientation to be Portrait, use the larger number for Screen height. I’ll set this one up for portrait by using 640 for the screen height.

On the last page of the wizard, enter the virtual browser name. This is the name you will use to run the browser from your script or keyword test.

Now you can refer to the virtual browser by name. The code example below kicks off the virtual browser with portrait dimensions, navigates to a page, closes down the browser, and then runs the landscape version.

var page; 

VirtualBrowsers.Item("Samsung Galaxy Note 4 Portrait").Run("falafel.com");

// screenshot of just the page in portrait
page = Sys.Browser("chrome").Page("*"); 
Log.Picture(page, "Page in portrait"); 
  
// shut the browser down before running a new virtual browser
Sys.Browser("chrome").BrowserWindow(0).Close();  
while ((Sys.WaitProcess("Browser(\"chrome\")"), 0).Exists){
  Delay(200);
}    
  
VirtualBrowsers.Item("Samsung Galaxy Note 4 Landscape").Run("falafel.com");

// screenshot of just the page in landscape
page = Sys.Browser("chrome").Page("*"); 
Log.Picture(page, "Page in landscape");

The screenshot of the page object for each orientation match my expectations for the device.

Wrap Up

Adding new virtual browsers lets you test responsive web designs of all sizes running on devices with any dimensions. When you need to support a new device, look up the user agent string, the CSS pixels dimensions, and you’re good to go.

Tomorrow I’ll shift from web-based testing to preparing mobile devices for image-based and open apps testing. See you then.

The post Web-Based Testing: Configuring Custom Virtual Browsers appeared first on Falafel Software Blog.