The TestComplete test engine has access to web page elements as well as to their attributes, methods and events. So, you can do more than just functional testing of a web page. With TestComplete, you can check different characteristics of a web page and its elements. This lets you easily check the page elements and determine whether the web page matches the quality standards adopted in your organization.
A typical requirement is that every image on a web page has the width and height attributes specified. These attributes specify the image size and if they are not specified or if they are incorrect, an image may be invisible or it may display incorrectly (for more information on why this check is important, see http://www.xs4all.nl/~sbpoley/webmatters/checklist.html#imagesize).
To perform the check, you can either write script code or use the web accessibility checkpoints. By writing script code you can create more flexible checking procedures (for instance, you can exclude some images from comparison), while by using checkpoints you can quickly perform typical checking actions. The way of checking depends on where the check is done: from script or from a keyword test.
Checking the Image Size from Scripts
To check whether the IMG elements have the size attributes specified, you can write script code that will retrieve and check the attributes’ values, or use the Web Accessibility checkpoint.
Using a Checkpoint
You can create a web accessibility checkpoint during test recording, or at design time:
-
To create a checkpoint during the test recording, click
Add Check on the Recording toolbar. Click Web page in the resulting Checkpoint wizard. -
To create a new checkpoint at design time, on the Code Editor toolbar, click
and then click Web page.
In the wizard:
-
Select the web page you want to check and click Accessibility.
-
Specify that TestComplete should check image attributes, select the Check image sizes check box.
-
Press OK. TestComplete will generate and display the code, which you can then insert into your script units.
Note that instead of creating a new checkpoint, you can also modify the Check image sizes property of an existing Web Accessibility project element and then use this element to perform the check.
For more information on creating and using web accessibility checkpoints, see Web Accessibility Checkpoints.
Using Script Code
To verify that all the IMG elements of the tested web page have the WIDTH and HEIGHT attributes, you need to check every IMG element. One possible way to do this is to obtain a collection of IMG elements and then iterate through the collection’s elements. The sample routine below demonstrates this approach. It uses the contentDocument.images property to obtain the collection of all IMG elements and then checks the WIDTH and HEIGHT attributes of each element.
JavaScript, JScript
/*
The following routine checks the width and height attributes of
IMG elements located on a web page.
*/
function Test()
{
// Obtains the page object
var url = "www.smartbear.com";
Browsers.Item(btIExplorer).Run(url);
var page = Sys.Browser("*").Page("*");
// Obtains the page's images
var images = page.contentDocument.images;
for (var i = 0; i < images.length; i++)
{
var img = images.item(i);
attrWidth = aqConvert.VarToStr(img.getAttribute("width"));
attrHeight = aqConvert.VarToStr(img.getAttribute("height"));
if ((attrWidth == "" ) && (attrHeight == ""))
Log.Error("The \"width\" and \"height\" attributes are not specified for the element 'document.images[" + i + "]'", "Image outerHTML: " + img.outerHTML);
else if (attrWidth == "")
{
Log.Message("Image document.images[" + i + "] " +
"Height: " + attrHeight,
"outerHTML: " + img.outerHTML);
Log.Warning("The \"width\" attribute is not specified for the element 'document.images[" + i + "]'",
"The image's width should be changed in accordance with the image's height.");
}
else if (attrHeight == "")
{
Log.Message("Image document.images[" + i + "] " +
"Width: " + attrWidth,
"outerHTML: " + img.outerHTML);
Log.Warning("The \"height\" attribute is not specified for the element 'document.images[" + i + "]'",
"The image's height should be changed in accordance with the image's width.");
}
else
Log.Message("Image document.images[" + i + "] " +
"Width: " + attrWidth + "; " +
"Height: " + attrHeight,
"outerHTML: " + img.outerHTML);
}
}
Python
# The following routine checks the width and height attributes of
# IMG elements located on a web page.
def Test():
# Obtains the page object
url = "http://smartbear.com";
Browsers.Item[btIExplorer].Run(url);
page = Sys.Browser("*").Page("*");
# Obtains the page's images
images = page.contentDocument.images;
for i in range (0, images.length-1):
img = images.item[i];
attrWidth = aqConvert.VarToStr(img.getAttribute("width"));
attrHeight = aqConvert.VarToStr(img.getAttribute("height"));
if ((attrWidth == "" ) and (attrHeight == "")):
Log.Error("The \"width\" and \"height\" attributes are not specified for the element 'document.images[" + IntToStr(i) + "]'", "Image outerHTML: " + img.outerHTML);
elif (attrWidth == ""):
Log.Message("Image document.images[" + IntToStr(i) + "] " + \
"Height: " + IntToStr(attrHeight),
"outerHTML: " + img.outerHTML);
Log.Warning("The \"width\" attribute is not specified for the element 'document.images[" + IntToStr(i) + "]'",
"The image's width should be changed in accordance with the image's height.");
elif (attrHeight == ""):
Log.Message("Image document.images[" + IntToStr(i) + "] " + \
"Width: " + IntToStr(attrWidth),
"outerHTML: " + img.outerHTML);
Log.Warning("The \"height\" attribute is not specified for the element 'document.images[" + IntToStr(i) + "]'",
"The image's height should be changed in accordance with the image's width.");
else:
Log.Message("Image document.images[" + IntToStr(i) + "] " + \
"Width: " + IntToStr(attrWidth) + "; " + \
"Height: " + IntToStr(attrHeight),
"outerHTML: " + img.outerHTML);VBScript
' The following routine checks the width and height attributes of
' IMG elements located on a web page.
Sub Test
Dim url, page, images, img, i, attrWidth, attrHeight
' Obtains the page object
url = "www.smartbear.com"
Browsers.Item(btIExplorer).Run url
Set page = Sys.Browser("*").Page("*")
' Obtains the page's images
Set images = page.contentDocument.images
For i = 0 To images.length - 1
Set img = images.item(i)
attrWidth = aqConvert.VarToStr(img.getAttribute("width"))
attrHeight = aqConvert.VarToStr(img.getAttribute("height"))
If attrWidth = "" And attrHeight = "" Then
Log.Error "The 'width' and 'height' attributes are not specified for the element 'document.images[" & i & "]'", "Image outerHTML: " & img.outerHTML
ElseIf attrWidth = "" Then
Call Log.Message("Image document.images[" & i & "] " & _
"Height: " & attrHeight, _
"outerHTML: " & img.outerHTML)
Call Log.Warning("The 'width' attribute is not specified for the element 'document.images[" & i & "]'", _
"The image's width should be changed in accordance with the image's height.")
ElseIf attrHeight = "" Then
Call Log.Message("Image document.images[" & i & "] " & _
"Width: " & attrWidth, _
"outerHTML: " & img.outerHTML)
Call Log.Warning("The 'height' attribute is not specified for the element 'document.images[" & i & "]'", _
"The image's height should be changed in accordance with the image's width.")
Else
Call Log.Message("Image document.images[" & i & "] " & _
"Width: " & attrWidth & "; " & _
"Height: " & attrHeight, _
"outerHTML: " & img.outerHTML)
End If
Next
End Sub
DelphiScript
{*
The following routine checks the width and height attributes of
IMG elements located on a web page.
*}
procedure Test();
var url, page, images, img, i, attrWidth, attrHeight;
begin
// Obtains the page object
url := 'www.smartbear.com';
Browsers.Item(btIExplorer).Run(url);
page := Sys.Browser('*').Page('*');
// Obtains the page's images
images := page.contentDocument.images;
for i := 0 to images.length - 1 do
begin
img := images.item[i];
attrWidth := aqConvert.VarToStr(img.getAttribute('width'));
attrHeight := aqConvert.VarToStr(img.getAttribute('height'));
if ((attrWidth = '') and (attrHeight = '')) then
Log.Error('The "width" and "height" attributes are not specified for the element ''document.images['
+ aqConvert.VarToStr(i) + ']''', 'Image outerHTML: ' + img.outerHTML)
else if attrWidth = ''then
begin
Log.Message('Image document.images[' + aqConvert.VarToStr(i) + '] ' +
'Height: ' + aqConvert.VarToStr(attrHeight),
'outerHTML: ' + img.outerHTML);
Log.Warning('The "width" attribute is not specified for the element ''document.images['
+ aqConvert.VarToStr(i) + ']''',
'The image''s width should be changed in accordance with the image''s height.')
end
else if attrHeight = '' then
begin
Log.Message('Image document.images[' + aqConvert.VarToStr(i) + '] ' +
'Width: ' + attrWidth,
'outerHTML: ' + img.outerHTML);
Log.Warning('The "height" attribute is not specified for the element ''document.images['
+ aqConvert.VarToStr(i) + ']''',
'The image''s height should be changed in accordance with the image''s width.');
end
else
Log.Message('Image document.images[' + aqConvert.VarToStr(i) + '] ' +
'Width: ' + attrWidth + '; ' +
'Height: ' + attrHeight,
'outerHTML: ' + img.outerHTML);
end;
end;
C++Script, C#Script
/*
The following routine checks the width and height attributes of
IMG elements located on a web page.
*/
function Test()
{
var url = "www.smartbear.com";
Browsers["Item"](btIExplorer)["Run"](url);
var page = Sys["Browser"]("*")["Page"]("*");
// Obtains the page's images
var images = page["contentDocument"]["images"];
for (var i = 0; i < images["length"]; i++)
{
var img = images["item"](i);
attrWidth = aqConvert["VarToStr"](img["getAttribute"]("width"));
attrHeight = aqConvert["VarToStr"](img["getAttribute"]("height"));
if ((attrWidth == "" ) && (attrHeight == ""))
Log["Error"]("The \"width\" and \"height\" attributes are not specified for the element 'document.images[" + i + "]'", "Image outerHTML: " + img["outerHTML"]);
else if (attrWidth == "")
{
Log["Message"]("Image document.images[" + i + "] " +
"Height: " + attrHeight,
"outerHTML: " + img["outerHTML"]);
Log.Warning("The \"width\" attribute is not specified for the element 'document.images[" + i + "]'",
"The image's width should be changed in accordance with the image's height.");
}
else if (attrHeight == "")
{
Log["Message"]("Image document.images[" + i + "] " +
"Width: " + attrWidth,
"outerHTML: " + img["outerHTML"]);
Log["Warning"]("The \"height\" attribute is not specified for the element 'document.images[" + i + "]'",
"The image's height should be changed in accordance with the image's width.");
}
else
Log["Message"]("Image document.images[" + i + "] " +
"Width: " + attrWidth + "; " +
"Height: " + attrHeight,
"outerHTML: " + img["outerHTML"]);
}
}
Checking the Image Size from a Keyword Test
To check whether images on a tested web page have the width and height attributes specified, you can use the Web Accessibility Checkpoint operation or call the script routine described above.
To add a checkpoint operation, drag it from the Operations list to the test area in the Keyword Test editor. TestComplete will invoke a dialog where you can specify the tested web page, verification settings and the name of the Web Accessibility project element that will be used for verification.
To call the described script routine from a keyword test, add the Run Script Routine operation to your test. When adding the operation, TestComplete will display the Select Test dialog, where you can choose this script routine.