Using Tabbed Browsing in Automated Web Tests

Requirements
Files

Applies to: TestComplete 9-9.30, 10

Contents

Introduction

Modern web browsers provide tabbed browsing to enable users view and work with several web pages within the same browser window. Users can open web sites in additional tabs and then switch between the tabs by clicking tab buttons.

When testing web applications, you may want to use tabbed browsing in your automated web tests to better simulate user behavior. However, tab handling presents challenges to automated testing because of different GUI implementations of tab bars and tab buttons in different web browsers.

In this article, we will cover the most frequently used operations related to tabbed browsing and explain how to automate them using SmartBear TestComplete. We will also provide sample JScript test scripts that you can reuse in your automated testing projects.

Before you proceed, please take note of the following:

  • To test web applications, you need TestComplete with the Web module installed.

  • TestComplete 10 supports Internet Explorer, Firefox, Chrome, Opera and Safari for automated web testing. However, the information in this article applies to Internet Explorer and Firefox only. Chrome, Opera and Safari do not provide GUI automation access to browser window elements, such as menus and toolbars, so they are not covered.

  • The code provided in this article is just an example and not necessarily the best or the only approach. For example, for simplicity, the code does not take the following into account:

    • Tab groups in Internet Explorer,
    • Multiple browser windows,
    • Full-screen browsing,
    • And so on.

    We recommend that you experiment with these examples to meet your own needs.

  • The scripts in this article are written without using Name Mapping (the object repository). It is done this way so they can work regardless of whether the test project uses Name Mapping.

Understanding the Test Object Model of Tabbed Browsing

Before we start, we would like to briefly explain the test object model behind tabbed browsing.

A browser tab is a combination of a web page and tab buttons for selecting that tab.

In TestComplete, web pages inside tabs are identified as Page objects. A Page object provides further access to web page elements.

Browser tab buttons, in their turn, are part of the browser’s toolbar, called TabBand. They are identified as TabButton objects.

The correspondence between test objects of web pages and their tab buttons is shown in the following images.

Page and TabButton objects in Internet Explorer
Figure 1. Page and TabButton objects in Internet Explorer

Page and TabButton objects in Firefox
Figure 2. Page and TabButton objects in Mozilla Firefox

Because of the differences in the browser GUI, the TabButton objects have different parent hierarchy and slightly different identification properties, as you can see in the images above. There are several ways to handle these differences, such as the FindChild search method, the switch statement, and so on. Both approaches are shown in code samples in this article.

You can also notice that Page objects are identified by URLs, whereas TabButton objects are identified using web page titles. To determine a TabButton object corresponding to a Page object, you can get the page title and use it to identify the matching TabButton object. This approach is shown in the “Selecting a tab” section below.

Opening Tabs

Even though different web browsers provide similar interfaces for opening tabs, the GUI implementation of browser menus and toolbars is different.

A simple cross-browser way to open tabs is to send the Ctrl+T shortcut to the browser’s main window. You can automate this using the Keys action, as follows:

Browsers.Item(btIexplorer).Run("http://smartbear.com/");
Sys.Browser().BrowserWindow(0).Keys("^t");
Sys.Browser().ToUrl("http://www.facebook.com/smartbear");

We can wrap these operations into the OpenNewTab function, as follows.

// Opens a new browser tab and navigates it to the specified URL
function OpenNewTab(URL)
{
  var browser = Sys.Browser();
  if ((browser.ProcessName == "iexplore") && (browser.FileVersionInfo.MajorPart == 6))
  {
    Log.Error("The OpenNewTab operation is not supported in Internet Explorer 6.");
  }
  else
  {
    browser.BrowserWindow(0).Keys("^t");
    browser.ToUrl(URL);
  }
}

Navigating a Tab to a URL

To navigate a tab to a URL, use the Page.ToUrl method. You need to apply this method to the Page object which is currently in the tab.

Browsers.Item(btIexplorer).Run("http://smartbear.com/");
Sys.Browser().Page("http://smartbear.com/").ToUrl("http://www.facebook.com/smartbear");

Closing Tabs

To close a browser tab, use the Page.Close method. You need to apply this method to the Page object in the tab you want to close.

Sys.Browser().Page("http://www.example.com/").Close();

We can wrap this operation into the CloseTab function, as follows.

// Closes the browser tab with the specified URL
function CloseTab(URL)
{
  Sys.Browser().Page(URL).Close();
}

Checking if a Tab Exists

To check if a specific tab is opened in the web browser, you can check the existence of the corresponding Page object. The following script shows how it can be done. Note that since the example does not use Name Mapping, it uses the WaitPage syntax to address the page object in order to properly handle situations when the specified page does not exist.

if (Sys.Browser().WaitPage("http://smartbear.com/", 0).Exists)
{
  . . .
}

We can wrap the tab existence check into the TabExists function as follows.

// Returns True if the specified URL is opened in one of the browser tabs; False otherwise
function TabExists(URL)
{
  return Sys.Browser().WaitPage(URL, 0).Exists;
}

Counting Tabs

To count the number of tabs opened in a browser window, we could count the number of tab buttons. For this purpose, we will use the FindAllChildren method to find all existing tab button objects by their class names (see above).

// Returns the number of tabs opened in the browser
function GetTabCount()
{
  var browser = Sys.Browser();
  var cnt = 0;

  switch (browser.ProcessName)
  {
    case "iexplore":
      var strWndClass = browser.FileVersionInfo.MajorPart == 7 ? "TabWindowClass" : "Frame Tab";
      cnt = browser.BrowserWindow(0).FindAllChildren("WndClass", strWndClass).toArray().length;
      break;
    case "firefox":
      var uiPage = browser.UIPage("chrome://browser/content/browser.xul", browserWindow.ObjectIdentifier);
      cnt = uiPage.TabBand.FindAllChildren("className", "tabbrowser-tab").toArray().length;
      break;
    default:
      Log.Error("The GetTabCount operation is not supported in \"" + browser.ProcessName + "\".");
      break;
  }
  return cnt;
}

Selecting Tabs

To select a browser tab, the user typically clicks the tab button.

We will specify the tab by URL and then convert it to the page title to use for identifying the corresponding TabButton object. Also, since the parent hierarchy of TabButton objects is slightly different in different browsers, we will use the switch statement to handle possible options.

// Activates the browser tab where the specified URL is opened
function SelectTab(URL)
{
  var browser = Sys.Browser();
  var tabBand;

  switch (browser.ProcessName)
  {
    case "iexplore":
      if (browser.FileVersionInfo.MajorPart == 6)
      {
        Log.Error("The SelectTab operation is not supported in Internet Explorer 6 because it does not have tabbed browsing.");
        return;
      }
      tabBand = browser.BrowserWindow(0).CommandBar.TabBand;
      break;
    case "firefox":
      tabBand = browser.UIPage("chrome://browser/content/browser.xul").TabBand;
      break;
    default:
      Log.Error("The SelectTab operation is not supported in " + browser.ProcessName + ".");
      return;
  }

  var page = browser.WaitPage(URL, 0);
  if (! page.Exists)
  {
    Log.Error("Browser tab \"" + URL + "\" was not found.");
  }
  else
  {
    tabBand.TabButton(page.contentDocument.title).Click();
  }
}

Getting the Selected Tab

The selected tab is the one currently displayed in the browser window. So, you can identify the selected tab as a Page object whose Visible property is True.

// Returns the Page object which is in the currently selected tab
function GetSelectedTab()
{
  // The Page object with Visible = True corresponds to the active tab
  return Sys.Browser().FindChild(["ObjectType", "Visible"], ["Page", true]);
}

Once you have obtained the Page object, you can get the page URL, title and other properties:

// Returns the URL of the page in the currently selected tab
function GetSelectedTabURL()
{
  return GetSelectedTab().URL;
}

// Returns the title of the page in the currently selected tab
function GetSelectedTabTitle()
{
  return GetSelectedTab().contentDocument.title;
}

Example

Below is a sample web test that uses the tabbed browsing operations described above. It opens several browser tabs, logs information about these tabs, switches between the tabs and closes them.

function Test()
{
  // Launch the browser and open two tabs
  Browsers.Item(btIExplorer).Run("http://smartbear.com/");
  OpenNewTab("http://www.facebook.com/smartbear");
  Log.Message("Number of opened tabs: " + GetTabCount());

  // Switch between the tabs
  SelectTab("http://smartbear.com/");
  Log.Message("Selected tab: " + GetSelectedTabURL() + " (" + GetSelectedTabTitle() + ").");

  SelectTab("http://www.facebook.com/smartbear");
  Log.Message("Selected tab: " + GetSelectedTabURL() + " (" + GetSelectedTabTitle() + ").");

  // Close one tab
  if (TabExists("http://www.facebook.com/smartbear"))
    CloseTab("http://www.facebook.com/smartbear");

  Sys.Browser().Close();
}

You can download a ready test project containing all script code included in this article using the following link:

» TabbedBrowsing.zip

Tabbed Browsing Automation Using Keyword Tests

If you are using keyword tests for web testing automation, you can also make use of the functions provided in this article. You can call these functions from your keyword tests using the Run Script Routine operation. The following image shows how to do it.

A keyword test using operations for tabbed browsing
Figure 3. A keyword test using operations for tabbed browsing

Conclusion

TestComplete is an ultimate tool for automated web testing with support for cross-browser testing across major web browsers, HTML5 tests and RIA testing. It enables you to create automated web tests that accurately emulate end-user behavior, including tabbed browsing, to verify the work of your web applications. Download and try it today.