Handling Browser Differences

Browser GUI Elements

Browser Messages and Dialogs

Non-Matching Sets of DOM Methods and Properties

Attribute Values

Only the Web page access API is cross-browser; the browser's GUI object model is not. Browser GUI elements are different for each browser – menus, Option dialogs, Home/Back buttons, informative and warning pop-ups and so on. Actions over the browser’s GUI elements are browser-specific.

TestComplete provides special test objects (Alert, Confirm, Prompt and Login) for automating some of the most frequently used browser and JavaScript dialogs. Actions over these test objects can be performed in any web browser. (See Handling JavaScript Popups and Browser Dialogs.) However, when a pop-up window or dialog cannot be recognized as one of these test objects, the corresponding window should be handled in a browser-specific manner.

For instance, when opening pages from local disks, Internet Explorer may ask you whether you want to allow active content on these pages. The other browsers do not display any warnings in the same case. Therefore, to make a test compatible with any browser, you should handle notifications in Internet Explorer:

Edge-specific note: In all the supported browsers, except for Edge, the Window object that correspond to standard dialogs like Open File, Select Folder and others belong to the browser’s main process. In the Edge browser, the Window objects that represent these dialogs belong to a separate helper process named PickerHost. Therefore, to make a test compatible with any browser, you should handle the standard dialogs invoked from Edge:

JavaScript, JScript

Python

VBScript

DelphiScript

C++Script, C#Script

JavaScript, JScript

...
   if (Browsers.CurrentBrowser.Family == Browsers.btEdge)
      var OpenDlg = Sys.Process("PickerHost").Window("#32770", "Open", 1);
   else
      var OpenDlg = Sys.Browser().Window("#32770", "Open", 1);
...

Python

...
  if (Browsers.CurrentBrowser.Family == Browsers.btEdge):
    OpenDlg = Sys.Process("PickerHost").Window("#32770", "Open", 1);
  else:
    OpenDlg = Sys.Browser().Window("#32770", "Open", 1);
...

VBScript

...
   If (Browsers.CurrentBrowser.Family = Browsers.btEdge) Then 
      Set OpenDlg = Sys.Process("PickerHost").Window("#32770", "Open", 1)
   Else
      Set OpenDlg = Sys.Browser().Window("#32770", "Open", 1)
   End If
...

DelphiScript

...
   if (Browsers.CurrentBrowser.Family = Browsers.btEdge) then
      OpenDlg := Sys.Process('PickerHost').Window('#32770', 'Open', 1);
   else
      OpenDlg := Sys.Browser().Window('#32770', 'Open', 1);
...

C++Script, C#Script

...
   if (Browsers["CurrentBrowser"]["Family"] == Browsers["btEdge"])
      var OpenDlg = Sys["Process"]("PickerHost")["Window"]("#32770", "Open", 1);
   else
      var OpenDlg = Sys["Browser"]()["Window"]("#32770", "Open", 1);
...

There can be several PickerHost processes in the system. In this case, you should use indexes to specify the process to which the needed dialog belongs:

JavaScript, JScript

Python

VBScript

DelphiScript

C++Script, C#Script

JavaScript, JScript

Sys.Process("PickerHost", 2).Window("#32770", "Open", 1)

Python

Sys.Process("PickerHost", 2).Window("#32770", "Open", 1)

VBScript

Sys.Process("PickerHost", 2).Window("#32770", "Open", 1)

DelphiScript

Sys.Process('PickerHost', 2).Window('#32770', 'Open', 1)

C++Script, C#Script

Sys["Process"]("PickerHost", 2)["Window"]("#32770", "Open", 1)

The layout engines (Trident, EdgeHTML, Blink, Gecko) used in web browsers to render web pages provide slightly dissimilar sets of methods and properties of web elements. The elements displayed in one of the layout engines do not always have the same set of methods and properties in other layout engines. Some members may have the same name and functionality, some members may have a similar functionality but different names, the other may have no analogs at all.

A typical example of non-matching properties is properties that provide access to a DOM document and to an element's text content. Any browser has these properties, however, their names do not coincide. To improve cross-browser compatibility, TestComplete adds special analogs:

• To access the DOM document object of a web page: Page.contentDocument syntax for Chrome, Edge, Firefox, and Internet Explorer 10 and later. You can also use the common Page.contentDocument syntax for all supported browsers. For more information, see Accessing DOM document Object.

• To get the textual content of a web page object and its child objects in Firefox and Chrome, the textContent property is used, whereas to get the same data in Internet Explorer or Edge you should use the innerText property. TestComplete introduces an analogous property, contentText, which is available in all browsers.

The above-mentioned properties are most frequently used. To deal with other non-matching properties, you should first check whether a property is available or not.

Verifying if the browser or page element supports certain method or property

Since the set of methods and properties provided by different browsers may vary (see above), you should check whether the desired member is available in the current browser before using this method or property. To perform such verification, you can use the aqObject.IsSupported method.

The following code gets the window object associated with the document. In Internet Explorer 10 and later, as well as in Chrome, Edge, and Firefox, the window object is returned by the document.defaultView property.

def GetDocWindow():
  document = Aliases.browser.myTestedPage.contentDocument;
  # Check if the document.parentWindow property is available
  if (aqObject.IsSupported(document, "parentWindow")):
    window = document.parentWindow;
  # Check if the document.defaultView property is available 
  else:
    if (aqObject.IsSupported(document, "defaultView")):
      window = document.defaultView;
    else:
      Log.Error("Unknown browser that doesn't support document.defaultView or document.parentWindow.");

Different browsers can report CSS style property values in different formats. For example, Internet Explorer can report colors as #ff0000 whereas Firefox and Chrome report them as rgb(255, 0, 0). You should take this into account when creating your tests.

For instance, when verifying element colors, you may check values in any notation, or convert one notation to another:

def CheckHeaderColor():
 # ...
 strColor = getStyle(header, "backgroundColor");
 
 # Compare the obtained color with two possible notations of the expected color 
 if ((strColor=="rgb(255, 0, 0)") or (strColor=="#ff0000")):
  Log.Message("The header is as Red, as expected");
 else:
  Log.Warning("The header is in another color."); 
 # ...

def CheckHeaderColor2():
  # ...
  strColor = getStyle(header, "backgroundColor");
  
  # Convert color notation for Internet Explorer and Opera 
  if (Browsers.CurrentBrowser.Family==btIExplorer): 
    strColor = html2rgb(strColor);
    # Compare the obtained color with the expected color 
  if (strColor=="rgb(255, 0, 0)"):
    Log.Message("The header is as Red, as expected");
  else:
    Log.Warning("The header is in another color.");
    
  # ...