Checking the Images' ALT Attribute

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 check the page elements and determine whether the web page matches the quality standards adopted in your organization.

You may need to check whether the ALT attribute is specified for all images incorporated in your page. Why is this attribute so important?

• The attribute is needed so that people who have low vision could work with the page.

• The text of the ALT attribute is used by text browsers for indicating an image.

• The text of the attribute is used by regular browsers and if the image indication option is disabled in browser settings.

• ALT is used by search engines for page indexing.

Microsoft recommends that the ALT attribute be used to create accessible web pages. In some companies, using this attribute is also required by internal standards for documentation and web pages. Many authors (for instance, http://www.xs4all.nl/~sbpoley/webmatters/checklist.html#access) suggest including the check for ALT tags into a web page checklist.

Since TestComplete provides access to web page elements, you can write script code that will check whether the ALT attribute is used for images in the tested pages. Alternatively, you can create and use a web accessibility checkpoint. By using script code you can create more specific testing procedures, for instance, you can exclude some images from the check. With checkpoints you can easily and quickly create typical tests. Note, however, that checkpoint analyzes not only the IMG elements, but also the APPLET, AREA and INPUT elements (these elements may also have the ALT attribute). The way of checking depends on where the check is done: from script or from a keyword test.

Checking the ALT Attributes from Scripts

To perform the check, you can either write script code or create the verification code with the Checkpoint wizard.

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 and then click Verify web page contents.

• 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.

• To specify that TestComplete should verify the ALT attribute, select the Check "alt" attribute check box.

• Press OK. TestComplete will generate and display the code for the check, which you can then insert into your script units.

Note that instead of creating a new checkpoint, you can also modify the Check "alt" attribute 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 About Web Accessibility Checkpoints.

Using Script Code

Below is a code snippet that verifies that all IMG elements of the tested web page have a non-empty ALT attribute. The sample routine uses the contentDocument.images property to obtain the collection of all IMG elements and then checks the alt property of each element.

# This sample script checks whether the ALT attribute is specified for
# all images on a Web page. The script routine obtains a collection of
# IMG elements and checks the ALT property of each IMG tag.

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

  images = page.contentDocument.images;

  for i in range (0, images.length-1):
    item = images.item(i);
    if (item.alt == ""):
      Log.Error("The \"alt\" property of the document.images[" + IntToStr(i) + "] object is empty.",
                "outerHTML: " + item.outerHTML);

Checking the ALT Attributes from a Keyword Test

To check the ALT attributes from a keyword test, you can use the Web Accessibility Checkpoint operation or call the script routine described above.

To add the Web Accessibility Checkpoint operation to your keyword test, drag the operation from the Operations list to the test area in the Keyword Test editor. After you drag the operation, TestComplete will invoke the Web Accessibility Checkpoint dialog where you 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 your keyword test, add the Run Script Routine operation to the test. After you drag the operation, TestComplete will display the Select Test dialog where you will be able to choose this script routine.

See Also

Testing Web Applications
Web Testing - Examples