Applies to TestComplete 14.20, last modified on September 11, 2019

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 Add Checkpoint via Wizard 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.

See Also

Testing Web Applications
Web Testing - Examples

Highlight search results