Finding an Image on a Web Page

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

When testing web pages, you may need to check whether a web page displays certain images. This may be necessary, for example, to check if the previous operation was completed successfully, or you may need to search for an image and simulate a mouse click or key press over it.

Searching for an HTML element displaying the desired image

To determine if a web page contains an image, you can search for the IMG element, whose SRC attribute contains the file name of the desired image. To perform the search, you can use the Page.NativeWebObject.Find method. See, How To.

The following code snippet demonstrates the described approach.

JavaScript, JScript

function Test1()
{

  var url = "www.smartbear.com";
  Browsers.Item(btIExplorer).Run(url);
  var page = Sys.Browser("*").Page("*");

  var imgName = "my_image.png";
  var img = page.NativeWebObject.Find("src", "*" + imgName, "img");

  if (img.Exists)
    img.Click();
  else
    Log.Warning("The image was not found.");

}

Python

def Test1():
  url = "www.smartbear.com";
  Browsers.Item[btIExplorer].Run(url);
  page = Sys.Browser("*").Page("*");

  imgName = "my_image.png";
  img = page.NativeWebObject.Find("src", "*" + imgName, "img");

  if (img.Exists):
    img.Click();
  else:
    Log.Warning("The image was not found.");

VBScript

Sub Test1

  Dim url, page, imgName, img
  url = "www.smartbear.com"
  Browsers.Item(btIExplorer).Run url
  Set page = Sys.Browser("*").Page("*")

  imgName = "my_image.png"
  Set img = page.NativeWebObject.Find("src", "*" & imgName, "img")

  If img.Exists Then
    img.Click
  Else
    Log.Warning("The image was not found.")
  End If

End Sub

DelphiScript

procedure Test1();
var url, page, imgName, img;
begin

  url := 'www.smartbear.com';
  Browsers.Item(btIExplorer).Run(url);
  page := Sys.Browser('*').Page('*');

  imgName := 'my_image.png';
  img := page.NativeWebObject.Find('src', '*' + imgName, 'img');

  if img.Exists then
    img.Click
  else
    Log.Warning('The image was not found.');

end;

C++Script, C#Script

function Test1()
{

  var url = "www.smartbear.com";
  Browsers["Item"](btIExplorer)["Run"](url);
  var page = Sys["Browser"]("*")["Page"]("*");
  var imgName = "my_image.png";
  var img = page["NativeWebObject"]["Find"]("src", "*" + imgName, "img");

  if (img["Exists"])
    img["Click"]();
  else
    Log["Warning"]("The image was not found.");

}

The string passed to the Page.NativeWebPage.Find method contains the file name of the desired image and the leading asterisk wildcard. The wildcard makes the method ignore a part of the file path.

Searching for the desired image using picture comparison

An alternative approach to searching for an image is to use the image-search capabilities provided by TestComplete. To learn more about searching for images, see Finding an Image Within Another Image.

You can capture an image of —

Having obtained the Picture object from any of these methods, you can now check whether it contains the sought-for image using the Find method of the returned object. The following code demonstrates this approach:

JavaScript

function Test2()
{

  // Obtains the Page object
  let url = "www.smartbear.com";
  Browsers.Item(btIExplorer).Run(url);
  let page = Sys.Browser("*").Page("*");

  // Obtains the image of the entire web page
  let pagePicture = page.PagePicture();

  // Loads the sought-for image
  let pict = Utils.Picture;
  pict.LoadFromFile("c:\\my_image.bmp");

  // Searches for the desired image within the web page image
  let rect = pagePicture.Find(pict);
  if (!strictEqual(rect, null))
  {
    Log.Message("The image was found.");
    // Obtaining a scripting object corresponding to the found image and simulating user actions over it
    …

  }
  else
    Log.Warning("The image was not found on the page.");

}

JScript

function Test2()
{

  // Obtains the Page object
  var url = "www.smartbear.com";
  Browsers.Item(btIExplorer).Run(url);
  var page = Sys.Browser("*").Page("*");

  // Obtains the image of the entire web page
  var pagePicture = page.PagePicture();

  // Loads the sought-for image
  var pict = Utils.Picture;
  pict.LoadFromFile("c:\\my_image.bmp");

  // Searches for the desired image within the web page image
  var rect = pagePicture.Find(pict);
  if (rect != null)
  {
    Log.Message("The image was found.");
    // Obtaining a scripting object corresponding to the found image and simulating user actions over it
    …

  }
  else
    Log.Warning("The image was not found on the page.");

}

Python

def Test2():
  # Obtains the Page object
  url = "www.smartbear.com";
  Browsers.Item[btIExplorer].Run(url);
  page = Sys.Browser("*").Page("*");

  # Obtains the image of the entire web page
  pagePicture = page.PagePicture();

  # Loads the sought-for image
  pict = Utils.Picture;
  pict.LoadFromFile("c:\\my_image.bmp");

  # Searches for the desired image within the web page image 
  rect = pagePicture.Find(pict);
  if (rect is not None):
    Log.Message("The image was found.");
    # Obtaining a scripting object corresponding to the found image and simulating user actions over it
    # ...
  
  else:
    Log.Warning("The image was not found on the page.");

VBScript

Sub Test2

  Dim url, page, pagePicture, pict, rect

  ' Obtains the Page object
  url = "www.smartbear.com"
  Browsers.Item(btIExplorer).Run url
  Set page = Sys.Browser("*").Page("*")

  ' Obtains the image of the entire web page
  Set pagePicture = page.PagePicture()

  ' Loads the sought-for image
  Set pict = Utils.Picture
  pict.LoadFromFile("c:\my_image.bmp")

  ' Searches for the desired image within the web page image
  Set rect = pagePicture.Find(pict)
  If Not rect Is Nothing Then

    Log.Message "The image was found."
    ' Obtaining a scripting object corresponding to the found image and simulating user actions over it
    …

  Else
    Log.Warning "The image was not found on the page."
  End If
End Sub

DelphiScript

procedure Test2();
var url, page, pagePicture, pict, rect;
begin

  // Obtains the Page object
  url := 'www.smartbear.com';
  Browsers.Item(btIExplorer).Run(url);
  page := Sys.Browser('*').Page('*');

  // Obtains the image of the entire web page
  pagePicture := page.PagePicture;

  // Loads the sought-for image
  pict := Utils.Picture;
  pict.LoadFromFile('c:\my_image.bmp');

  // Searches for the desired image within the web page image
  rect := pagePicture.Find(pict);
  if rect <> nil then
  begin
    Log.Message('The image was found.');
    // Obtaining a scripting object corresponding to the found image and simulating user actions over it
    …

    end
  else
    Log.Warning('The image was not found on the page.');

end;

C++Script, C#Script

function Test2()
{

  // Obtains the Page object
  var url = "www.smartbear.com";
  Browsers["Item"](btIExplorer)["Run"](url);
  var page = Sys["Browser"]("*")["Page"]("*");
  // Obtains the image of the entire web page
  var pagePicture = page["PagePicture"]();

  // Loads the sought-for image
  var pict = Utils["Picture"];
  pict["LoadFromFile"](":\\my_image.bmp");

  // Searches for the desired image within the web page image
  var rect = pagePicture["Find"](pict);
  if (rect != null)
  {
    Log["Message"]("The image was found.");
    // Obtaining a scripting object corresponding to the found image and simulating user actions over it
    …

  }
  else
    Log["Warning"]("The image was not found on the page.");

}

The Picture.Find method returns a rectangle that specifies coordinates of the image within the web browser window. To obtain the scripting object corresponding to the found image, you can use the Sys.Desktop.ObjectFromPoint method.

You can call these script routines from a keyword test by using the Run Script Routine operation. Prepare the script code and then add the operation to your test. TestComplete will display the Select Test dialog where you will be able to choose the desired script routine.

See Also

Web Testing - Examples
How To
Finding an Image Within Another Image

Highlight search results