|Secondary properties / anchor pos property|
Using anchor and anchor pos properties within multilevel dynamic identifiers is often essential to ensure that you are targeting the right controls.
In the last example, we relied on a single anchor to identify all the headlines of the National News section of our newspaper web page. The headlines are all contained in link (<a>) elements, and we relied on the assumption that every link element in that section is for a headline, allowing us to step through anchor pos values link 1, link 2, etc. and retrieve the text of each one.
But what if we're wrong about that assumption? For example, some editor might decide that
the first article about LogiGear should have a hyperlink (which uses the
<a> tag) on the company name to allow a reader to click on the
Corporation to access the corporate website:
Clearly, we do not want to capture link text that is not a headline, but our current test case has no way of making the distinction between a headline and non-headline link.
However, it is clear from the above figure that each headline link element is a child of a parent article div, and that it is the first link within each div. (It's also clear that every article div has a child headline link.) This scenario is perfect for using the article divs as anchors for their respective headline links, with just one drawback: unlike our former anchor, which has a unique property-value pair (id=national_section), there is no easy way to uniquely identify each of the article divs.
On the other hand, we can see that there is a regularity with which the article
divs appear within the national_section
div. Specifically, they appear as the 1st, 3rd, 5th, etc.,
divs within national_section, alternating with the
divs. Assuming that we can be assured that this pattern will always be
consistent, we have a situation that allows for us to employ two levels of anchor:
<!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 <a href="http://www.logigear.com/">LogiGear Corporation</a> 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>
<div class="content">Shares in <a href="http://www.logigear.com/">LogiGear Corporation</a> soared today when...</div>This will help us ensure that our new approach works correctly. (Feel free, by the way, to try out the test cases of the previous two examples against this new web page, to verify that they are no longer adequate solutions.)
Now we're ready to write our test procedure.
First, note lines 76 and 89. In the previous example, we cycled through all the headlines (or what we hoped would be only headlines) of the National News section. Now, using the var_article_no variable, we are cycling through the divs representing each article. (Note that we increment by 2 so that we can skip over the content divs).