|Secondary properties / anchor pos property|
Using anchor and anchor pos properties to map a control.
The following example illustrates how to map a control using the anchor / anchor pos pair of properties, and how to use it in a test.
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Today's News</title> </head> <body> <div id="flag">New York Times</div> <div id="date">Friday, January 16, 2015</div> <div id="table_of_contents"> <a href="#international_section">International news</a> <a href="#national_section">National news</a> <a href="#sports_section">Sports</a> </div> <div id="national_section"> <strong>National News</strong> <div class="article"> <a>LogiGear Rally Drives Dow to All-time High</a> <div class="content">Shares in LogiGear Corporation soared today when...</div> </div> <div class="article"> <a>Dog Bites Man</a> <div class="content">In an act unbecoming of Man's Best Friend, a local chihuahua...</div> </div> <div class="article"> <a>Man Bites Dog</a> <div class="content">In an act of senseless vengeance, a local man...</div> </div> </div> <div id="international_section"> <strong>International News</strong> <div class="article">1st international article...</div> <div class="article">2nd international article...</div> </div> <div id="sports_section"> <strong>Sports News</strong> <div class="article">1st sports article...</div> <div class="article">2nd sports article...</div> </div> </body> </html>
The front page has sections (divs) for national news, international news, and sports. Within each section are articles (divs with class="article"), each consisting of a headline and the article content. For this exercise, we will limit ourselves to capturing only the first three headlines from the National News section of the web page.
When TestArchitect intakes HTML elements, such as you
would do with the Interface Viewer, attributes such as
id or class get mapped to TA properties. For
example, the element <div id="sports_section"> produces a control of TA
class div, with a TA property of id which is set to a
value of sports_section:
These properties are typically the means by which TestArchitect can easily identify particular elements. But as you can see, the headlines that we are interested in are enclosed in <a> tags (e.g., <a>Dog Bites Man</a>), which have no attributes specified for them.
Since we have no such attributes for the headlines, our best bet for identifying these
controls is to find a suitable anchor. And, indeed, it appears that a good,
easily-identifiable anchor does exist:
The div element with id="national_section" is a good candidate as an anchor for the headline elements, because a), it is an ancestor to all of them (an essential requirement), and b), it is uniquely identifiable, thanks to its id attribute.
The Anchor Selection window presents a hierarchical path consisting of only the parentage (the ancestor controls) of the current control. Ancestor controls are all candidates for the role of anchor of the control of interest, and they are the only possible candidates. We will use the previously mapped control, div_national-news, as the anchor.
Now we're ready to write our test procedure. Its job is to access each of the three link elements that we have mapped, get their respective text contents, and write them to a file.