Web-Based Testing: Scripting and Handling Page Differences

Scripting Virtual Browsers

In our last episode, we recorded a web-based test using the drop down list of Virtual Browsers from the Record button. If you want to just script up front, use the TestComplete VirtualBrowsers
Item() to get a virtual browser info object, then call Run() to kick off the virtual browser. You can pass a URL to Run() if you want to navigate in the same step.

VirtualBrowsers.Item("Nokia Lumia 800").Run("falafel.com");

Note: VirtualBrowsers.Item() and its big cousin Browsers.Item() don’t return browsers, but objects that allow you to run and navigate browsers.

Here’s another example that runs a virtual browser for iPhone 6, clicks the hamburger menu button, takes a screenshot of the drop down menu, and closes the browser. Once you navigate the virtual browser, the mechanics are similar to testing any web application.

// start the virtual browser
var lumia = VirtualBrowsers.Item("iPhone 6"); 
lumia.Run();
lumia.Navigate("falafel.com"); 
  
// test your web elements here
Aliases.FalafelPage.HamburgerMenu.Click(); 
Log.Picture(Aliases.FalafelPage.DropDownMenuPanel, "Falafel Menu"); 
  
// close the browser window
Sys.Browser("chrome").BrowserWindow(0).Close();

Handling Page Differences

The page we’re testing is built with responsive design principles in mind, so elements like the hamburger menu show when the page is narrow, but hide on wider devices like the iPad. If you’re iterating all your virtual browsers, clicking the hamburger menu fails on the Apple iPad and any device wider. I like to use the VirtualBrowser ScreenWidth here because we already have it available. There’s no need to find the object or reference the hamburger menu alias and slow the test down.

The example code below uses the VirtualBrowers Count and Item() to iterate virtual browsers. Once you run a virtual browser, you can refer to it as VirtualBrowsers.CurrentBrowser. After running the browser, the script checks that the current browser’s screen width is smaller than the iPad. If the width is narrow enough to show the hamburger menu, the element is clicked.

var 
  url = "falafel.com", 
  maxWidth = VirtualBrowsers.Item("Apple iPad").ScreenWidth; 
  
for (var i = 0; i < VirtualBrowsers.Count; i++){
  Log.AppendFolder(VirtualBrowsers.Item(i).Name); 

  VirtualBrowsers.Item(i).Run(url);
  
  // click the hamburger menu if the browser is narrow enough to show it    
  if (VirtualBrowsers.CurrentBrowser.ScreenWidth < maxWidth){
    Aliases.FalafelPage.HamburgerMenu.Click(); 
    Log.Picture(Aliases.FalafelPage.DropDownMenuPanel, 
      "Falafel Menu"); 
  }

  // wait for the browser process to close  
  Sys.Browser("chrome").BrowserWindow(0).Close();
  while (Aliases.WaitAliasChild("BrowserProcess", 0).Exists){
    Delay(200);
  } 
    
  Log.PopLogFolder(); 
}

TestComplete complains if you attempt to run a virtual browser when Chrome is already running. The last lines in the while loop verify that the browser process is gone before trying to spin up another instance. The output looks like this:

Wrap Up

The VirtualBrowsers object Count, Item and CurrentBrowser members let you cycle through the same test using different browser dimensions. While looping through virtual browsers, pages that present differently based on browser dimension require your script to adapt. Be sure to wait for the Chrome process to shut down between iterations – only one Chrome instance per customer.

Tomorrow we’ll create a custom virtual browser and compare device physical dimensions vs. CSS pixels. See you then.

The post Web-Based Testing: Scripting and Handling Page Differences appeared first on Falafel Software Blog.