Testing Pages With Multiple Zoom Levels

Applies to TestComplete 14.50, last modified on April 22, 2021

In TestComplete, you can work with pages at various zoom levels. You can simulate user actions on web page elements regardless of the page’s current zoom level. You can also check the page’s zoom level and change it in your tests.

This topic includes examples of how you can get the current zoom level of a page, how to zoom in or out a page and how to check the availability of an object on a page at different zoom levels.

Get the Current Scale

To find out the current zoom level of a page (its current scale), you can use the native properties of the Page object.

You get the zoom value as the value of the defaultView.devicePixelRatio property.

These properties provide the zoom value as a floating point number. To get a percent value, multiply it by 100, that is, 1.0 goes for the 100% zoom, 1.5 for 150%, and so on.

The following example demonstrates how to obtain the current zoom value of a page:

JavaScript, JScript

function getZoom()
{
  // Get the browser currently running in the system and open a page
  var browser = Sys.WaitBrowser();
  if (browser.Exists)
  {
    var page = browser.ToUrl("https://smartbear.com");

    var defaultView = page.contentDocument.defaultView;
      Log.Message("The scale is " + aqConvert.FloatToStr(defaultView.devicePixelRatio * 100) + "%.");
  }
  else
    Log.Warning("No browser is currently running.");
}

Python

def getZoom():
  # Get the browser currently running in the system and open a page
  browser = Sys.WaitBrowser()
  if browser.Exists:
    page = browser.ToUrl("https://smartbear.com")
    defaultView = page.contentDocument.defaultView
    Log.Message("The scale is " + aqConvert.FloatToStr(defaultView.devicePixelRatio * 100) + "%.")
  else:
    Log.Warning("No browser is currently running.")

VBScript

Sub getZoom
  Dim browser, page, defaultView
  
  ' Get the browser currently running in the system and open a page
  Set browser = Sys.WaitBrowser()
  If browser.Exists Then
    Set page = browser.ToUrl("https://smartbear.com")

    Set defaultView = page.contentDocument.defaultView
      Log.Message("The scale is " + aqConvert.FloatToStr(defaultView.devicePixelRatio * 100) + "%.")

  Else
    Log.Warning("No browser is currently running.")
  End If
End Sub

DelphiScript

function getZoom();
var browser, page, defaultView;
begin
  // Get the browser currently running in the system and open a page
  browser: = Sys.WaitBrowser();
  if browser.Exists then  begin
    page := browser.ToUrl('https://smartbear.com');

    defaultView := page.contentDocument.defaultView;
    Log.Message('The scale is ' + aqConvert.FloatToStr(defaultView.devicePixelRatio * 100) + '%.')
  else
    Log.Warning('No browser is currently running.');
end;

C++Script, C#Script

function getZoom()
{
  // Get the browser currently running in the system and open a page
  var browser = Sys["WaitBrowser"]()
  if (browser.Exists)
  {
    var page = browser["ToUrl"]("https://smartbear.com")

    var defaultView = page["contentDocument"]["defaultView"]
    Log["Message"]("The scale is " + aqConvert["FloatToStr"](defaultView["devicePixelRatio"] * 100) + "%.")
  }
  else
    Log["Warning"]("No browser is currently running.");
}

Change the Current Scale

The easiest way to change the current zoom level of a page is to simulate the appropriate user actions. In most browsers, the combination used to zoom in is Ctrl++, and to zoom out –Ctrl+-. You can command TestComplete to simulate these actions by using the Keys method:

JavaScript, JScript

function zoomInAndOut()
{
  // Run the default browser and open a page
  Browsers.Item(0).Run();
  var page = Sys.Browser().ToUrl("https://smartbear.com");
  
  // Specify the keys to use to simulate user actions
  var zoomIn = "^+";
  var zoomOut = "^-";
  
  // To zoom in:
  page.Keys(zoomIn);
  
  // To zoom out:
  page.Keys(zoomOut);
}

Python

def zoomInAndOut():
  
  # Run the default browser and open a page
  Browsers.Item[0].Run()
  page = Sys.Browser().ToUrl("https://smartbear.com")
  
  # Specify the keys to use to simulate user actions
  zoomIn = "^+"
  zoomOut = "^-"
  
  # To zoom in:
  page.Keys(zoomIn)
  
  # To zoom out:
  page.Keys(zoomOut)

VBScript

Sub zoomInAndOut
  Dim page, zoomIn, zoomOut

  ' Run the default browser and open a page
  Browsers.Item(0).Run
  Set page = Sys.Browser().ToUrl("https://smartbear.com")
  
  ' Specify the keys to use to simulate user actions
  zoomIn = "^+"
  zoomOut = "^-"
  
  ' To zoom in:
  page.Keys(zoomIn)
  
  ' To zoom out:
  page.Keys(zoomOut)
End Sub

DelphiScript

function zoomInAndOut();
var page, zoomIn, zoomOut;
begin
  // Run the default browser and open a page
  Browsers.Item[0].Run();
  page := Sys.Browser().ToUrl('https://smartbear.com');
  
  // Specify the keys to use to simulate user actions
  zoomIn := '^+';
  zoomOut := '^-';
  
  // To zoom in:
  page.Keys(zoomIn);
  
  // To zoom out:
  page.Keys(zoomOut);
end;

C++Script, C#Script

function zoomInAndOut()
{
  // Run the default browser and open a page
  Browsers["Item"](0).Run();
  var page = Sys["Browser"]()["ToUrl"]("https://smartbear.com");
  
  // Specify the keys to use to simulate user actions
  var zoomIn = "^+";
  var zoomOut = "^-";
  
  // To zoom in:
  page["Keys"](zoomIn);
  
  // To zoom out:
  page["Keys"](zoomOut);
}

Tip: The Keys method uses ^ as a constant to simulate a Ctrl keystroke.

Work With Zoom in Complex Tasks

The example below demonstrates how you can check whether the News link is available on the https://smartbear.com page at different zoom levels. It iterates through all the installed browsers and checks whether the link is available at different zoom levels: 100%, 150% and 200%.

The sample script includes the following subroutines:

  1. getCurrentZoomFactor function: Gets the current scale of the page.

  2. openpageWithZoom function: Opens the target page, then simulates user actions to open the page at the needed zoom level.

  3. performTesting function: Checks whether the link is available on the page, then clicks it.

JavaScript, JScript

function Test()
{
  var URL = "https://smartbear.com"; // The URL of the page to test
  var targetZooms = [1, 2, 1.5]; // Scales to test - 100%, 200%, 150%
   
  // Iterate through all the installed browsers
  for (var i = 0; i < Browsers.Count; i++)
  {
    browser = Browsers.Item(i)
    Log.PushLogFolder(Log.CreateFolder("Test for page '" + URL + "' against " + browser.Description)) ;
    browser.Run();
     
      // Iterate through all the specified scales
    for (var k = 0; k < targetZooms.length; k++)
    {
      targetZoom = targetZooms[k];
      Log.PushLogFolder(Log.CreateFolder("Test for page '" + URL + "' with zoom " + targetZoom * 100 + "%")) ;
      var page = openPageWithZoom(URL, targetZoom);
       
      performTesting(page); // Open the page at the specified zoom level
       
      Log.PopLogFolder();
    }
       
    Sys.Browser().Close();
    Log.PopLogFolder()
  }
}

// Get the scale of the specified page
function getCurrentZoomFactor(page)
{
  var browser = page.parent;
  var defaultView = page.contentDocument.defaultView;
  return defaultView.devicePixelRatio;
}


// Simulate user actions to zoom the page to the specified scale
function openPageWithZoom(URL, targetZoom)
{
  Log.PushLogFolder(Log.CreateFolder("Zoom to " + targetZoom));
  var keysZoomIn = "^+";
  var keysZoomOut = "^-";
     
  var page = Sys.Browser().ToUrl(URL);
  var currentZoom = getCurrentZoomFactor(page);
    
  if (currentZoom < targetZoom)
  {
    while (currentZoom < targetZoom)
    {
      page.Keys(keysZoomIn);
      currentZoom = getCurrentZoomFactor(page);
    }
  }
  else
  {
    while (currentZoom > targetZoom)
    {
      page.Keys(keysZoomOut);
      currentZoom = getCurrentZoomFactor(page);
    }
  }
     
   
  Log.Event(aqString.Format("The new zoom factor for the page '" + page.URL + "' is %.2f", currentZoom));
  Log.PopLogFolder();
   
  return page;
}

// Check whether the link is available on the page and click it
function performTesting(page)
{
  link = page.FindChild(["contentText", "ObjectType"], ["News", "Link"], 10);
  if (link != null && link.Exists)
  {
    link.Click();
  }
  else
  {
    Log.Error("The specified link does not exist.")
  }
}

Python

def Test():
   URL = "https://smartbear.com" # The URL of the page to test
   targetZooms = [1, 2, 1.5] # Scales to test - 100%, 200%, 150%

   # Iterate through all the installed browsers
   for i in range (0, Browsers.Count):
     browser = Browsers.Item[i]
     Log.PushLogFolder(Log.CreateFolder("Test for page '"+URL+"' against "+browser.Description))
     browser.Run()
     
     # Iterate through all the specified zoom levels
     for targetZoom in targetZooms:
       Log.PushLogFolder(Log.CreateFolder("Test for page '+URL+' with zoom "+ str(targetZoom * 100) + "%"))
        
       page = openPageWithZoom(URL, targetZoom) # Open the page at the specified zoom level
       
       performTesting(page)
       Log.PopLogFolder()
      
     Sys.Browser().Close()
     Log.PopLogFolder()

# Get the scale of the specified page
def getCurrentZoomFactor(page):
   browser = page.parent
   defaultView = page.contentDocument.defaultView
   return defaultView.devicePixelRatio

# Simulate user actions to zoom the page to the specified scale
def openPageWithZoom(URL, targetZoom):
   Log.PushLogFolder(Log.CreateFolder("Zoom to "+str(targetZoom)))
   keysZoomIn = "^+"
   keysZoomOut = "^-"
     
   page = Sys.Browser().ToUrl(URL)
   currentZoom = getCurrentZoomFactor(page)
    
   if currentZoom < targetZoom:
     while currentZoom < targetZoom:
        page.Keys(keysZoomIn)
        currentZoom = getCurrentZoomFactor(page)
   else:
     while currentZoom > targetZoom:
        page.Keys(keysZoomOut)
        currentZoom = getCurrentZoomFactor(page)
   
   Log.Event(aqString.Format("The new zoom factor for the page '"+page.URL+"' is %.2f", currentZoom))
   Log.PopLogFolder()
   return page

# Check whether the link is available on the page and click it
def performTesting(page):
   link = page.FindChild(["contentText", "ObjectType"], ["News", "Link"], 10)
   if link != None:
     link.Click()
   else:
     Log.Error("The specified link does not exist.")

VBScript

Sub Test
   Dim URL, targetZooms, i, k, browser
   
   URL = "https://smartbear.com" ' The URL of the page to test
   targetZooms = Array(1, 2, 1.5) ' Scales to test - 100%, 200%, 150%
   
   ' Iterate through all the installed browsers
   For i = 0 To Browsers.Count
     Set browser = Browsers.Item(i)
     Log.PushLogFolder(Log.CreateFolder("Test for page '" + URL + "' against " + browser.Description))
     browser.Run()
     
     ' Iterate through all the specified zoom levels
     For k = 0 To UBound(targetZooms)
       targetZoom = targetZooms(k)
       Log.PushLogFolder(Log.CreateFolder("Test for page '" + URL + "' with zoom " + aqConvert.IntToStr(targetZoom * 100) + "%"))
       
       Set page = openPageWithZoom(URL, targetZoom) ' Open the page at the specified zoom level
       
       Call performTesting(page)
       Log.PopLogFolder()
     Next
     
     Sys.Browser().Close()
     Log.PopLogFolder()
   Next 

End Sub

' Get the zoom level of the specified page
Function getCurrentZoomFactor(page)
   Dim browser, defaultView
   Set browser = page.parent
   Set defaultView = page.contentDocument.defaultView
   getCurrentZoomFactor = defaultView.devicePixelRatio

   
End Function

' Simulate user actions to zoom the page to the specified scale
Function openPageWithZoom(URL, targetZoom)
   Log.PushLogFolder(Log.CreateFolder("Zoom to " + aqConvert.IntToStr(targetZoom)))
   Dim keysZoomIn, keysZoomOut
   keysZoomIn = "^+"
   keysZoomOut = "^-"
   
   Dim page, currentZoom
   Set page = Sys.Browser().ToUrl(URL)
   currentZoom = getCurrentZoomFactor(page)
    
   If (currentZoom < targetZoom) Then
     Do While (currentZoom < targetZoom)
        page.Keys(keysZoomIn)
        currentZoom = getCurrentZoomFactor(page)
     Loop
   Else
     Do While (currentZoom > targetZoom)
        page.Keys(keysZoomOut)
        currentZoom = getCurrentZoomFactor(page)
     Loop
   End If
   
   Log.Event(aqString.Format("The new zoom factor for the page '" + page.URL + "' is %.2f", currentZoom))
   Log.PopLogFolder()
   
   Set openPageWithZoom = page
End Function

Sub performTesting(page)
' Check whether the link is available on the page and click it
   Dim propArray, valArray, link
   propArray = Array("contentText", "ObjectType")
   valArray = Array("News", "Link")
   Set link = page.FindChild(propArray, valArray, 10)
   If link Is Not Nothing And link.Exists Then
      Log.Error("The specified link does not exist.")
   Else
      link.Click()
   End If
End Sub

DelphiScript

// Get the scale of the specified page
function getCurrentZoomFactor(page);
var browser, defaultView;
begin
   browser := page.parent;
   defaultView := page.contentDocument.defaultView;
   Result := defaultView.devicePixelRatio
     
end;

// Simulate user actions to zoom the page to the specified scale
function openPageWithZoom(URL, targetZoom);
var keysZoomIn, keysZoomOut, page, currentZoom;
begin
   Log.PushLogFolder(Log.CreateFolder('Zoom to ' + aqConvert.VarToStr(targetZoom)));
   keysZoomIn := '^+';
   keysZoomOut := '^-';
   page := Sys.Browser().ToUrl(URL);
   currentZoom := getCurrentZoomFactor(page);
   
   if (currentZoom < targetZoom) then 
     while currentZoom < targetZoom do
     begin 
       page.Keys(keysZoomIn);
        currentZoom := getCurrentZoomFactor(page);
     end
   else
     while currentZoom > targetZoom do
     begin
        page.Keys(keysZoomOut);
        currentZoom := getCurrentZoomFactor(page);
     end;
       
   Log.Event(aqString.Format('The new zoom factor for the page "' + page.URL + '" is %.2f', currentZoom));
   Log.PopLogFolder();
   
   Result := page;
end;

// Check whether the link is available on the page and click it
function performTesting(page);
var link;
var propArray : array [0..1];
var valArray : array [0..1];
begin
   propArray[0] := 'contentText';
   propArray[1] := 'ObjectType';
   valArray[0] := 'News';
   valArray[1] := 'Link';
   link := page.FindChild(propArray, valArray, 10);
   if link <> nil and link.Exists then
      link.Click()
   else
      Log.Error('The specified link does not exist.');
end;

function Test;
var URL, i, k, browser, targetZoom, page;
var targetZooms : array [0..2];
begin 
   URL := 'https://smartbear.com'; // A URL of the page to test
   targetZooms := [1, 2, 1.5]; // Scales to test - 100%, 200%, 150%
   
   // Iterate through all the installed browsers
   for i := 0 to Browsers.Count do
     begin
     browser := Browsers.Item[i];
     Log.PushLogFolder(Log.CreateFolder('Test for page "' + URL +'" against ' + browser.Description));
     browser.Run();
     
     // Iterate through all the specified scales
     for k := 0 to VarArrayHighBound(targetZooms, 1) do
       begin
       targetZoom := targetZooms[k];
       Log.PushLogFolder(Log.CreateFolder('Test for page "' + URL + '" with zoom '+ aqConvert.VarToStr(targetZoom * 100) + '%'));
       
       page := openPageWithZoom(URL, targetZoom); // Open the page at the specified zoom level
       
       performTesting(page);
       Log.PopLogFolder();
       end;
     end;
     
     Sys.Browser().Close();
     Log.PopLogFolder();
end;

C++Script, C#Script

function Test()
{
  var URL = "https://smartbear.com"; // The URL of the page to test
  var targetZooms = [1, 2, 1.5]; // Scales to test - 100%, 200%, 150%
   
  // Iterate through all the installed browsers
  for (var i = 0; i < Browsers["Count"]; i++)
  {
    var browser = Browsers["Item"](i);
    Log["PushLogFolder"](Log["CreateFolder"]("Test for page '" + URL + "' against " + browser["Description"]));
     browser["Run"]();
     
    // Iterate through all the specified scales
    for (k = 0; k < targetZooms["length"]; k++)
    {
      targetZoom = targetZooms[k];
      Log["PushLogFolder"](Log["CreateFolder"]("Test for page '" + URL + "' with zoom "+ targetZoom * 100 + "%"));
       
      var page = openPageWithZoom(URL, targetZoom); // Open the page at the specified zoom level
       
      performTesting(page);
      Log["PopLogFolder"]();
    }
     
    Sys["Browser"]()["Close"]();
    Log["PopLogFolder"]();
  }
}

// Get the scale of the specified page
function getCurrentZoomFactor(page)
{
  var browser = page["parent"];
  var defaultView = page["contentDocument"]["defaultView"];
  return defaultView["devicePixelRatio"];
}

// Simulate user actions to zoom the page to the specified scale
function openPageWithZoom(URL, targetZoom)
{
  Log["PushLogFolder"](Log["CreateFolder"]("Zoom to "+targetZoom));
  var keysZoomIn = "^+";
  var keysZoomOut = "^-";
  var currentZoom;
  var page = Sys["Browser"]()["ToUrl"](URL);
  currentZoom = getCurrentZoomFactor(page);
   
  if (currentZoom < targetZoom)
  {
    while (currentZoom < targetZoom)
    {
      page["Keys"](keysZoomIn);
      currentZoom = getCurrentZoomFactor(page);
    }
  }
  else
  {
    while (currentZoom > targetZoom)
    {
      page["Keys"](keysZoomOut);
      currentZoom = getCurrentZoomFactor(page);
    }
  }
   
  Log["Event"](aqString["Format"]("The new zoom factor for the page '" + page["URL"] + "' is %.2f", currentZoom));
  Log["PopLogFolder"]();
   
  return page;
}

// Check whether the link is available on the page and click it
function performTesting(page)
{
  link = page["FindChild"](["contentText", "ObjectType"], ["News", "Link"], 10);
  if (link != null && link.Exists)
  {
    link["Click"]();
  }
  else
  {
    Log["Error"]("The specified link does not exist.");
  }
}

See Also

Default Web Testing
Web Testing - Examples

Highlight search results