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, Common Tasks for Web Testing.
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 —
- the entire web page (via the
Page.PagePicturemethod); - the visible part of the web page (via the Page.Picture method);
- the particular element of the web page (via the Page.ElementName.Picture method).
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
Common Tasks for Web Testing
Finding an Image Within Another Image