Tellurium Tutorial Series: Step by Step Guide to create Tellurium UI modules
8 views
Skip to first unread message
John.Ji...@gmail.com
Nov 19, 2008, 12:36:15 AM11/19/08
to tellurium-users
As requested by Raghu, here I like to write the step by step for
creating Tellurium UI modules for CBS web site: http://wap.cbsnews.com/.
The steps to setup Tellurium could be found in the wiki pages and I
will not cover them here. Here, I will walk you through the HTML
source code to show you how to create UI modules.
One key thing is that you do not really need all the details
on the web page, you only need to focus what you want to test.
I will ignore some details for simple elements such links. For
example, everything above the headlines.
Fist, look at the headline row, the html source is as follows,
<div style="background-color:#275CBF;">
<div class="bars"
style="background: url(http://img.qwapi.com/transcode?
name=cbsnews/titlebar_320x17.png&width=320&height=17) no-
repeat scroll 0%; vertical-align: top;">
<table class="tble">
<tr>
<td class="barText">Your Headlines</td>
<td class="barText" style="text-align: center;">
<a style="color: #FFFFFE;"
href="site?
t=bZkwjEkF7CLE9z8XWhg-.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Login
</a>
</td>
<td class="barText" style="text-align: right;">Nov 18</
td>
</tr>
</table>
</div>
</div>
Here, the import things are the text "Your Headlines", "Login" link
and the date "Nov 18".
Since although it is a table, you have fixed number of elements and
only three elements,
you may want to use the Container object as follows,
ui.Container(uid: "yourheadlines", clocator:[tag: "table", class:
"tble"], group: "true"){
TextBox(uid: "label", clocator: [tag: "td", class: "barText"])
//here use the default tag "a"
UrlLink(uid: "login", clocator: [text: "Login"])
//make sure it is different from the "label"
TextBox(uid: "date", clocator: [tag: "td", style: "text-align:
right;"])
}
then in the UI module groovy file, you can define methods you want to
act on the UI object, for example,
public String getHeadlineLabel(){
return getText "yourheadlines.label"
}
public void clickLogin(){
click "yourheadlines.login"
waitForPageToLoad 30000
}
public String getDateAsString(){
return getText "yourheadlines.date"
}
For the rest UIs, I will not write the methods, just list the UI
modules for you.
Following the headlines row, is the actual headline news.
<div>
<ul class="a">
<li>
<A HREF="site?
t=uNsA.H5bORnmHqws1Su1HA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Prop. 8 Anger Spurs Donor Blacklists
</A>
</li>
<li>
<A HREF="site?
t=ePQ0DA.vTD5EHn0IV7He1A&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Post-Racial USA? Not So Fast
</A>
</li>
<li>
<A HREF="site?
t=zRU0FDGUO6hQA6sVDFbQCw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Lawyer: Jackson May Be Too Sick To Travel
</A>
</li>
<li>
<A HREF="site?
t=EjOqC4Ua2heWhS4kMKyd9w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Syria's Deadly Bargain
</A>
</li>
</ul>
</div>
I assume the number of news listed here may not be fixed, you should
you the List object and each element is only a UrlLink and
you can use one template for it.
ui.List(uid: "headlinenews", clocator: [tag: "ul", class:"a"],
separator: "li"){
//use default tag "a"
UrlLink(uid: "all", clocator: [class: "b"])
}
Top story part is as follows,
<div id="wid_jsHomeTopStory" class="JavaScript">
<table width=100%>
<tr>
<td style="vertical-align:middle;"><img src="http://img.qwapi.com/
transcode/t/F7fMRrGOAjfigR3DB4Vpig" width=100
alt="Top Story Picture" />
</td>
<td>
<div class="headline" style="vertical-align:middle;">Behind
The Consumer Credit Collapse</div>
<span style="vertical-align:middle;">When Pamela Sande bought
her new Ford Taurus, she ...
<br/>
<a href="site?
t=IQnt3480VZ8AC18CmNgxJg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
- Read Full Story
</a>
</span>
</td>
</tr>
</table>
</div>
It can be presented as follows,
ui.Container(uid: "topstory", clocator: [tag: "div", id:
"wid_jsHomeTopStory"]){
//use default tag "img"
Image(uid: "picture", clocator: [alt: "Top Story Picture"])
TextBox(uid: "headline", clocator: [tag: "div", class:
"headline"])
Container(uid, "story", clocator: [tag: "span"]){
//use partial match for the text "- Read Full Story"
UrlLink(uid: "fullstory", clocator: [text: "%%Read Full
Story"])
}
}
The html source for the Top Headlines section is as follows,
<div id="wid_jsHomeTopHeadlines" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Top Headlines</div>
</div>
</div>
<div>
<ul class="a">
<li>
<a href="site?t=G9-
Dxfwpmis3cTwaT9A5tQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Detroit's Big 3 Make $25 Billion Plea
</a>
</li>
<li>
<a href="site?t=kPpy960tOKsHUBNt-
Sz4BQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Obama Eyes Holder For Attorney General
</a>
</li>
<li>
<a href="site?
t=62r8miSlNRzZDrCKGQQQ.A&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Alaska Sen. Stevens Loses Senate Race
</a>
</li>
</ul>
</div>
</div>
Obviously, it is a Container with a label and a list as follows,
ui.Container(uid: "topheadlines", clocator: [tag: "div", id:
"wid_jsHomeTopHeadlines"]{
TextBox(uid: "label", clocator: [tag: "div", class: "barText"])
List(uid: "headlinenews", clocator: [tag: "ul", class:"a"],
separator: "li"){
//use default tag "a"
UrlLink(uid: "all", clocator: [class: "b"])
}
}
The Inn link is
<div id="wid_jsAdMiddle" class="AdWidget_ver2">
<div align="center">
<a href="http://c.admob.com/c1.php/52031053e33edf1/S/
1/492379040474EC/7bb48341c83b9b5c">Fairfield Inn: Click to
book!
</a>
</div>
</div>
and the UI module is
ui.Container(uid: "innlink", clocator: [tag: "div", id:
"wid_jsAdMiddle"]){
//use default tag "a" and the container id should be enough to
identify both the Container and the UrlLink
UrlLink(uid: "inn", clocator: [:])
}
For the Markets section:
<div id="wid_jsMarkets" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Markets</div>
</div>
</div>
<table>
<tr>
<td style="text-align:left; ">DJI</td>
<td style="padding-left:25px; text-align:right; ">8424</td>
<td style="padding-left:25px; text-align:right; ">+151</td>
</tr>
<tr>
<td style="text-align:left; ">COMP</td>
<td style="padding-left:25px; text-align:right; ">1483</td>
<td style="padding-left:25px; text-align:right; ">+1</td>
</tr>
<tr>
<td style="text-align:left; ">NYA</td>
<td style="padding-left:25px; text-align:right; ">5365</td>
<td style="padding-left:25px; text-align:right; ">+42</td>
</tr>
</table>
<br/>
<form action="http://studio-5.financialcontent.com/cbsmobile"
method="get">
<input type="hidden" name="Page" value="QUOTE"></input>
<input class="search" type="text" size="20" name="Ticker"
value=""></input>
<input src="http://img.qwapi.com/transcode?name=cbsnews/
quotebtn_72x21.png" alt="Get Quote"
style="vertical-align:middle;" type="image"></input>
</form>
</div>
It could be described as follows,
ui.Container(uid: "markets", clocator: [tag: "div", id:
"wid_jsMarkets"]){
TextBox(uid: "label", clocator: [tag: "div", class: "barText",
text: "Markets"])
Table(uid: "marketinfo", clocator: [:]){
//use template here, the TextBox does not have any tag at all
//you can use index such as "markets.marketinfo[1][1]" to get
the data
TextBox(uid: "all", clocator: [:])
}
Form(uid: "getquote", clocator: [method: "get"]){
InputBox(uid: "searchbox", clocator: [class: "search", type:
"text", name: "Ticker"])
Button(uid: "searchbutton", clocator: [type: "image", alt:
"Get Quote"])
}
}
The html source for "Quick Links" is as follows,
<div id="wid_jsQuickLinks" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Quick Links</div>
</div>
</div>
<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td align="center">
<img src="http://img.qwapi.com/transcode/t/SIcRS5q6OZMEASD9-
dUf5w"/>
</td>
<td align="center">
<img src="http://img.qwapi.com/transcode/t/
HtHgO4AAYbc9aRJg1vbIIA"/>
</td>
</tr>
<tr>
<td align="center">
<a href="site?
t=uWTJyq.KsTM49q3LvIgg0w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
AccuWeather
</a>
</td>
<td align="center">
<a href="site?
t=BaKqO.kAcpjVox7zVwzyvA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
News Alerts
</a>
</td>
</tr>
</table>
</div>
It could be described as follows,
ui.Container(uid: "quicklinks", clocator: [tag: "div",
id:"wid_jsQuickLinks"]){
TextBox(uid: "label", clocator: [tag: "div", class: "barText",
text: "Quick Links"])
//use default tag "table"
Table(uid: "links", clocator: [:]){
//use template for all table elements
//UrlLink uses default tag "a"
UrlLink(uid: "all", clocator: [:])
}
}
The search section is,
<div id="wid_jsSearch" class="JavaScript">
<br/>
<form action="http://psearch.msrch.com/q.xhtml" method="post">
<input type="hidden" name="pid" value="cbsnews"></input>
<input type="hidden" name="sid" value="cbsnews"></input>
<input class="search" type="text" size="20" name="q" value=""></
input>
<input type="hidden" name="sbf" value="1"/>
<input src="http://img.qwapi.com/transcode?name=cbsnews/
search.png" alt="Go" style="vertical-align:middle;"
type="image"></input>
</form>
</div>
and its UI module could be
ui.Container(uid: "jssearch", clocator: [tag: "div", id:
"wid_jsSearch"]){
Form(uid: "searchform", clocator: [method: "post"]){
InputBox(uid: "searchbox", clocator: [class: "search", type:
"text", name: "q")
Button(uid: "searchbutton", clocator: [type: "image", alt:
"Go"])
}
}
The "News Section" portion
<div id="wid_jsNewsSections" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Sections</div>
</div>
</div>
<div class="headgray">
<a href="site?
t=bSgHXF8Dg37sYGkDH0ZD7Q&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">US
</a>
</div>
<div class="sectionpad">
<a href="site?
t=6tSMbobiwS2y6KT83jfU8w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
New Witness In Natalee Holloway Case
</a>
</div>
<div class="sectionpad">
<a href="site?
t=gU8d3VnZ3aOBAl21oZ8IHA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Calif. Residents Tour Wildfire Devastation
</a>
</div>
<div class="sectionpad">
<a href="site?
t=yNtc6scnIgGuKnYiobOYQg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Ariz. Boy Charged With Murder Of Father
</a>
</div>
<div class="headgray">
<a href="site?t=akXU-QN-
lZHflm12WwUo.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">World
</a>
</div>
<div class="sectionpad">
<a href="site?
t=pvk81E4ubFKbVupwmHvACw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Walk The Plank: Resisting Piracy Has Risks
</a>
</div>
<div class="sectionpad">
<a href="site?
t=t58ZSzzKbxxGtTmoYvjvGQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Congo Rebels Pull Back To Allow Talks
</a>
</div>
<div class="sectionpad">
<a href="site?t=3mow9VP8-
ONH34puOqeC0g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
U.S. Academics May Meet With Iran Leader
</a>
</div>
<div class="headgray">
<a href="site?t=x5j2u2x-
IhbQ78UaFiriIw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">Politics
</a>
</div>
<div class="sectionpad">
<a href="site?
t=g.NpIgvON3GysNgzalzVRQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Alaska Sen. Stevens Loses Senate Race
</a>
</div>
<div class="sectionpad">
<a href="site?
t=gLiQYaTw4KrSIZ2NYp7Vhw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Obama Eyes Holder For Attorney General
</a>
</div>
<div class="sectionpad">
<a href="site?
t=mAYqv7G342vT30zooHbQDQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Lieberman Dodges Bullet For Backing McCain
</a>
</div>
<div class="headgray">
<div class="headline">
<a href="site?
t=QpUArigkzPPjJZKCQF7mVg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
See All Sections
</a>
</div>
</div>
</div>
could be written as
ui.List(uid: "jsNewsSections", clocator: [tag: "div", id:
"wid_jsNewsSections"], separator: "div"){
TextBox(uid: "1", clocator: [tag: "div", class: "barText", text:
"Sections"])
UrlLink(uid: "2", clocator: [text: "US"])
UrlLink(uid: "6", clocator: [text: "World"])
UrlLink(uid: "10", clocator: [text: "Politics"])
Container(uid: "14", clocator: [tag: "div", class: "headline"){
UrlLink(uid: "allsection", clocator: [text: "See All
Sections"])
}
//For the default, use the following template
UrlLink(uid: "all", clocator: [:])
}
The navigation section is as follows,
<div id="wid_jsNavigation" class="JavaScript">
<div class="btmNav">
<hr style="border-style: solid; border-width: 2px 0 0 0; color:
#6d6d6d;"/>
<table cellpadding="0" cellspacing="0" width="100%"
style="background: url(http://img.qwapi.com/transcode?
name=cbsnews/shading_grey.png) repeat-x scroll left top; vertical-
align:top;">
<tr>
<td>
<a href="site?t=YlUaQX7q3a1D-
UvJDnZtwQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="1">1 Home
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.CBSEyeMobile.com" class="nLink"
accesskey="2">2 User News: CBS
EyeMobile
</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=BaKqO.kAcpjVox7zVwzyvA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="3">3 Video/Pic
News Alerts
</a>
</td>
</tr>
<tr>
<td>
<a href="http://wap.sportsline.com/srt/d/sportsline/
SportsLine/Homepage.CBSTopStories" class="nLink"
accesskey="4">4 Sports: Will-ing him to
stay
</a>
</td>
</tr>
<tr>
<td>
<a href="http://m.cbs.com" class="nLink"
accesskey="5">5 CBS Entertainment</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=uWTJyq.KsTM49q3LvIgg0w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink"
accesskey="6">6 AccuWeather
</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=bZkwjEkF7CLE9z8XWhg-.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="7">7 Login/
Register
</a>
</td>
</tr>
</table>
</div>
</div>
Obviously, it is a Table as follows
//default tag "table", example to use header to reduce the number of
nested objects
ui.Table(uid: "navigation", clocator: [header: "/div
[@id='wid_jsNavigation']/div[@class='btmNav']"){
//use template for all table elements and default tag is "a"
UrlLink(uid: "all", clocator: [class=: "nLink"]
}
The last piece is the footer news
<div id="wid_jsFooterNew" class="JavaScript">
<div class="footer" style="color:#000000;">
<div class="tble" style="vertical-align:top; text-align:
center; color:#000000; ">(C) MMVIII<br/>CBS Interactive
INC.
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=v9AY60Wvv4ClDzf2v8mxKQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Terms & Conditions
</a>
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=YVYexEWG4jfkmrESjs7c.w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
User Agreement
</a>
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=nC0MS7ZOvwLuO9mIrvnu8w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Privacy Policy
</a>
</div>
</div>
</div>
The correspond UI module could be
ui.List(uid: "footernews", clocator: [tag: "div", class: "footer",
header: "/div[@id="wid_jsFooterNew"]"], separator: "div"){
//first one is a simple text
TextBox(uid: "1", clocator: [:])
//template for the rest
UrlLink(uid: "all", clocator: [:])
}
creating Tellurium UI modules for CBS web site: http://wap.cbsnews.com/.
The steps to setup Tellurium could be found in the wiki pages and I
will not cover them here. Here, I will walk you through the HTML
source code to show you how to create UI modules.
One key thing is that you do not really need all the details
on the web page, you only need to focus what you want to test.
I will ignore some details for simple elements such links. For
example, everything above the headlines.
Fist, look at the headline row, the html source is as follows,
<div style="background-color:#275CBF;">
<div class="bars"
style="background: url(http://img.qwapi.com/transcode?
name=cbsnews/titlebar_320x17.png&width=320&height=17) no-
repeat scroll 0%; vertical-align: top;">
<table class="tble">
<tr>
<td class="barText">Your Headlines</td>
<td class="barText" style="text-align: center;">
<a style="color: #FFFFFE;"
href="site?
t=bZkwjEkF7CLE9z8XWhg-.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Login
</a>
</td>
<td class="barText" style="text-align: right;">Nov 18</
td>
</tr>
</table>
</div>
</div>
Here, the import things are the text "Your Headlines", "Login" link
and the date "Nov 18".
Since although it is a table, you have fixed number of elements and
only three elements,
you may want to use the Container object as follows,
ui.Container(uid: "yourheadlines", clocator:[tag: "table", class:
"tble"], group: "true"){
TextBox(uid: "label", clocator: [tag: "td", class: "barText"])
//here use the default tag "a"
UrlLink(uid: "login", clocator: [text: "Login"])
//make sure it is different from the "label"
TextBox(uid: "date", clocator: [tag: "td", style: "text-align:
right;"])
}
then in the UI module groovy file, you can define methods you want to
act on the UI object, for example,
public String getHeadlineLabel(){
return getText "yourheadlines.label"
}
public void clickLogin(){
click "yourheadlines.login"
waitForPageToLoad 30000
}
public String getDateAsString(){
return getText "yourheadlines.date"
}
For the rest UIs, I will not write the methods, just list the UI
modules for you.
Following the headlines row, is the actual headline news.
<div>
<ul class="a">
<li>
<A HREF="site?
t=uNsA.H5bORnmHqws1Su1HA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Prop. 8 Anger Spurs Donor Blacklists
</A>
</li>
<li>
<A HREF="site?
t=ePQ0DA.vTD5EHn0IV7He1A&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Post-Racial USA? Not So Fast
</A>
</li>
<li>
<A HREF="site?
t=zRU0FDGUO6hQA6sVDFbQCw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Lawyer: Jackson May Be Too Sick To Travel
</A>
</li>
<li>
<A HREF="site?
t=EjOqC4Ua2heWhS4kMKyd9w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Syria's Deadly Bargain
</A>
</li>
</ul>
</div>
I assume the number of news listed here may not be fixed, you should
you the List object and each element is only a UrlLink and
you can use one template for it.
ui.List(uid: "headlinenews", clocator: [tag: "ul", class:"a"],
separator: "li"){
//use default tag "a"
UrlLink(uid: "all", clocator: [class: "b"])
}
Top story part is as follows,
<div id="wid_jsHomeTopStory" class="JavaScript">
<table width=100%>
<tr>
<td style="vertical-align:middle;"><img src="http://img.qwapi.com/
transcode/t/F7fMRrGOAjfigR3DB4Vpig" width=100
alt="Top Story Picture" />
</td>
<td>
<div class="headline" style="vertical-align:middle;">Behind
The Consumer Credit Collapse</div>
<span style="vertical-align:middle;">When Pamela Sande bought
her new Ford Taurus, she ...
<br/>
<a href="site?
t=IQnt3480VZ8AC18CmNgxJg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
- Read Full Story
</a>
</span>
</td>
</tr>
</table>
</div>
It can be presented as follows,
ui.Container(uid: "topstory", clocator: [tag: "div", id:
"wid_jsHomeTopStory"]){
//use default tag "img"
Image(uid: "picture", clocator: [alt: "Top Story Picture"])
TextBox(uid: "headline", clocator: [tag: "div", class:
"headline"])
Container(uid, "story", clocator: [tag: "span"]){
//use partial match for the text "- Read Full Story"
UrlLink(uid: "fullstory", clocator: [text: "%%Read Full
Story"])
}
}
The html source for the Top Headlines section is as follows,
<div id="wid_jsHomeTopHeadlines" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Top Headlines</div>
</div>
</div>
<div>
<ul class="a">
<li>
<a href="site?t=G9-
Dxfwpmis3cTwaT9A5tQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Detroit's Big 3 Make $25 Billion Plea
</a>
</li>
<li>
<a href="site?t=kPpy960tOKsHUBNt-
Sz4BQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Obama Eyes Holder For Attorney General
</a>
</li>
<li>
<a href="site?
t=62r8miSlNRzZDrCKGQQQ.A&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="b">Alaska Sen. Stevens Loses Senate Race
</a>
</li>
</ul>
</div>
</div>
Obviously, it is a Container with a label and a list as follows,
ui.Container(uid: "topheadlines", clocator: [tag: "div", id:
"wid_jsHomeTopHeadlines"]{
TextBox(uid: "label", clocator: [tag: "div", class: "barText"])
List(uid: "headlinenews", clocator: [tag: "ul", class:"a"],
separator: "li"){
//use default tag "a"
UrlLink(uid: "all", clocator: [class: "b"])
}
}
The Inn link is
<div id="wid_jsAdMiddle" class="AdWidget_ver2">
<div align="center">
<a href="http://c.admob.com/c1.php/52031053e33edf1/S/
1/492379040474EC/7bb48341c83b9b5c">Fairfield Inn: Click to
book!
</a>
</div>
</div>
and the UI module is
ui.Container(uid: "innlink", clocator: [tag: "div", id:
"wid_jsAdMiddle"]){
//use default tag "a" and the container id should be enough to
identify both the Container and the UrlLink
UrlLink(uid: "inn", clocator: [:])
}
For the Markets section:
<div id="wid_jsMarkets" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Markets</div>
</div>
</div>
<table>
<tr>
<td style="text-align:left; ">DJI</td>
<td style="padding-left:25px; text-align:right; ">8424</td>
<td style="padding-left:25px; text-align:right; ">+151</td>
</tr>
<tr>
<td style="text-align:left; ">COMP</td>
<td style="padding-left:25px; text-align:right; ">1483</td>
<td style="padding-left:25px; text-align:right; ">+1</td>
</tr>
<tr>
<td style="text-align:left; ">NYA</td>
<td style="padding-left:25px; text-align:right; ">5365</td>
<td style="padding-left:25px; text-align:right; ">+42</td>
</tr>
</table>
<br/>
<form action="http://studio-5.financialcontent.com/cbsmobile"
method="get">
<input type="hidden" name="Page" value="QUOTE"></input>
<input class="search" type="text" size="20" name="Ticker"
value=""></input>
<input src="http://img.qwapi.com/transcode?name=cbsnews/
quotebtn_72x21.png" alt="Get Quote"
style="vertical-align:middle;" type="image"></input>
</form>
</div>
It could be described as follows,
ui.Container(uid: "markets", clocator: [tag: "div", id:
"wid_jsMarkets"]){
TextBox(uid: "label", clocator: [tag: "div", class: "barText",
text: "Markets"])
Table(uid: "marketinfo", clocator: [:]){
//use template here, the TextBox does not have any tag at all
//you can use index such as "markets.marketinfo[1][1]" to get
the data
TextBox(uid: "all", clocator: [:])
}
Form(uid: "getquote", clocator: [method: "get"]){
InputBox(uid: "searchbox", clocator: [class: "search", type:
"text", name: "Ticker"])
Button(uid: "searchbutton", clocator: [type: "image", alt:
"Get Quote"])
}
}
The html source for "Quick Links" is as follows,
<div id="wid_jsQuickLinks" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Quick Links</div>
</div>
</div>
<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td align="center">
<img src="http://img.qwapi.com/transcode/t/SIcRS5q6OZMEASD9-
dUf5w"/>
</td>
<td align="center">
<img src="http://img.qwapi.com/transcode/t/
HtHgO4AAYbc9aRJg1vbIIA"/>
</td>
</tr>
<tr>
<td align="center">
<a href="site?
t=uWTJyq.KsTM49q3LvIgg0w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
AccuWeather
</a>
</td>
<td align="center">
<a href="site?
t=BaKqO.kAcpjVox7zVwzyvA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
News Alerts
</a>
</td>
</tr>
</table>
</div>
It could be described as follows,
ui.Container(uid: "quicklinks", clocator: [tag: "div",
id:"wid_jsQuickLinks"]){
TextBox(uid: "label", clocator: [tag: "div", class: "barText",
text: "Quick Links"])
//use default tag "table"
Table(uid: "links", clocator: [:]){
//use template for all table elements
//UrlLink uses default tag "a"
UrlLink(uid: "all", clocator: [:])
}
}
The search section is,
<div id="wid_jsSearch" class="JavaScript">
<br/>
<form action="http://psearch.msrch.com/q.xhtml" method="post">
<input type="hidden" name="pid" value="cbsnews"></input>
<input type="hidden" name="sid" value="cbsnews"></input>
<input class="search" type="text" size="20" name="q" value=""></
input>
<input type="hidden" name="sbf" value="1"/>
<input src="http://img.qwapi.com/transcode?name=cbsnews/
search.png" alt="Go" style="vertical-align:middle;"
type="image"></input>
</form>
</div>
and its UI module could be
ui.Container(uid: "jssearch", clocator: [tag: "div", id:
"wid_jsSearch"]){
Form(uid: "searchform", clocator: [method: "post"]){
InputBox(uid: "searchbox", clocator: [class: "search", type:
"text", name: "q")
Button(uid: "searchbutton", clocator: [type: "image", alt:
"Go"])
}
}
The "News Section" portion
<div id="wid_jsNewsSections" class="JavaScript">
<div class="bars"
style="background:url(http://img.qwapi.com/transcode?name=cbsnews/
titlebar_320x17.png&width=320&height=17) no-repeat scroll left
top; background-color: #275cbf;">
<div class="tble">
<div class="barText">Sections</div>
</div>
</div>
<div class="headgray">
<a href="site?
t=bSgHXF8Dg37sYGkDH0ZD7Q&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">US
</a>
</div>
<div class="sectionpad">
<a href="site?
t=6tSMbobiwS2y6KT83jfU8w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
New Witness In Natalee Holloway Case
</a>
</div>
<div class="sectionpad">
<a href="site?
t=gU8d3VnZ3aOBAl21oZ8IHA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Calif. Residents Tour Wildfire Devastation
</a>
</div>
<div class="sectionpad">
<a href="site?
t=yNtc6scnIgGuKnYiobOYQg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Ariz. Boy Charged With Murder Of Father
</a>
</div>
<div class="headgray">
<a href="site?t=akXU-QN-
lZHflm12WwUo.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">World
</a>
</div>
<div class="sectionpad">
<a href="site?
t=pvk81E4ubFKbVupwmHvACw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Walk The Plank: Resisting Piracy Has Risks
</a>
</div>
<div class="sectionpad">
<a href="site?
t=t58ZSzzKbxxGtTmoYvjvGQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Congo Rebels Pull Back To Allow Talks
</a>
</div>
<div class="sectionpad">
<a href="site?t=3mow9VP8-
ONH34puOqeC0g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
U.S. Academics May Meet With Iran Leader
</a>
</div>
<div class="headgray">
<a href="site?t=x5j2u2x-
IhbQ78UaFiriIw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="hgLink">Politics
</a>
</div>
<div class="sectionpad">
<a href="site?
t=g.NpIgvON3GysNgzalzVRQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Alaska Sen. Stevens Loses Senate Race
</a>
</div>
<div class="sectionpad">
<a href="site?
t=gLiQYaTw4KrSIZ2NYp7Vhw&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Obama Eyes Holder For Attorney General
</a>
</div>
<div class="sectionpad">
<a href="site?
t=mAYqv7G342vT30zooHbQDQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Lieberman Dodges Bullet For Backing McCain
</a>
</div>
<div class="headgray">
<div class="headline">
<a href="site?
t=QpUArigkzPPjJZKCQF7mVg&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
See All Sections
</a>
</div>
</div>
</div>
could be written as
ui.List(uid: "jsNewsSections", clocator: [tag: "div", id:
"wid_jsNewsSections"], separator: "div"){
TextBox(uid: "1", clocator: [tag: "div", class: "barText", text:
"Sections"])
UrlLink(uid: "2", clocator: [text: "US"])
UrlLink(uid: "6", clocator: [text: "World"])
UrlLink(uid: "10", clocator: [text: "Politics"])
Container(uid: "14", clocator: [tag: "div", class: "headline"){
UrlLink(uid: "allsection", clocator: [text: "See All
Sections"])
}
//For the default, use the following template
UrlLink(uid: "all", clocator: [:])
}
The navigation section is as follows,
<div id="wid_jsNavigation" class="JavaScript">
<div class="btmNav">
<hr style="border-style: solid; border-width: 2px 0 0 0; color:
#6d6d6d;"/>
<table cellpadding="0" cellspacing="0" width="100%"
style="background: url(http://img.qwapi.com/transcode?
name=cbsnews/shading_grey.png) repeat-x scroll left top; vertical-
align:top;">
<tr>
<td>
<a href="site?t=YlUaQX7q3a1D-
UvJDnZtwQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="1">1 Home
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.CBSEyeMobile.com" class="nLink"
accesskey="2">2 User News: CBS
EyeMobile
</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=BaKqO.kAcpjVox7zVwzyvA&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="3">3 Video/Pic
News Alerts
</a>
</td>
</tr>
<tr>
<td>
<a href="http://wap.sportsline.com/srt/d/sportsline/
SportsLine/Homepage.CBSTopStories" class="nLink"
accesskey="4">4 Sports: Will-ing him to
stay
</a>
</td>
</tr>
<tr>
<td>
<a href="http://m.cbs.com" class="nLink"
accesskey="5">5 CBS Entertainment</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=uWTJyq.KsTM49q3LvIgg0w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink"
accesskey="6">6 AccuWeather
</a>
</td>
</tr>
<tr>
<td>
<a href="site?
t=bZkwjEkF7CLE9z8XWhg-.g&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb"
class="nLink" accesskey="7">7 Login/
Register
</a>
</td>
</tr>
</table>
</div>
</div>
Obviously, it is a Table as follows
//default tag "table", example to use header to reduce the number of
nested objects
ui.Table(uid: "navigation", clocator: [header: "/div
[@id='wid_jsNavigation']/div[@class='btmNav']"){
//use template for all table elements and default tag is "a"
UrlLink(uid: "all", clocator: [class=: "nLink"]
}
The last piece is the footer news
<div id="wid_jsFooterNew" class="JavaScript">
<div class="footer" style="color:#000000;">
<div class="tble" style="vertical-align:top; text-align:
center; color:#000000; ">(C) MMVIII<br/>CBS Interactive
INC.
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=v9AY60Wvv4ClDzf2v8mxKQ&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Terms & Conditions
</a>
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=YVYexEWG4jfkmrESjs7c.w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
User Agreement
</a>
</div>
<div class="tble" style="text-align: center;">
<a style="color:#000000;"
href="site?
t=nC0MS7ZOvwLuO9mIrvnu8w&tsid=QWS84FCBD4EA16BB7C8201662EE3AB9462B1380eef&tcid=QWC42766e9cf6bf433cad48a7775d6aa3cb">
Privacy Policy
</a>
</div>
</div>
</div>
The correspond UI module could be
ui.List(uid: "footernews", clocator: [tag: "div", class: "footer",
header: "/div[@id="wid_jsFooterNew"]"], separator: "div"){
//first one is a simple text
TextBox(uid: "1", clocator: [:])
//template for the rest
UrlLink(uid: "all", clocator: [:])
}
Raghu S
Nov 19, 2008, 4:56:34 AM11/19/08
to telluri...@googlegroups.com
Thanks John, I will try out this code tonight, will update my comments
in wiki or loop.
thanks very much for your effort, appreciate it
in wiki or loop.
thanks very much for your effort, appreciate it
John.Ji...@gmail.com
Nov 19, 2008, 9:36:53 AM11/19/08
to tellurium-users
There are two rules:
1) Ignore the web UI elements you do not need and only focus on the UI
elements that you want to test
2) For clocator, you do not need all the attributes in the html
source, as long as the attributes
you put on the clocator can identify the UI element itself and then
you are good.
Let me know if you have any doubts, questions, or problems about the
UI modules listed here.
Thanks,
Jian
1) Ignore the web UI elements you do not need and only focus on the UI
elements that you want to test
2) For clocator, you do not need all the attributes in the html
source, as long as the attributes
you put on the clocator can identify the UI element itself and then
you are good.
Let me know if you have any doubts, questions, or problems about the
UI modules listed here.
Thanks,
Jian
John.Ji...@gmail.com
Nov 19, 2008, 11:23:56 AM11/19/08
to tellurium-users
I have not touched Netbeans for a while. Quan or Harron, could you
please follow up with
this issue?
Raghu, since you are working on the practical project, we can give you
the IntelliJ license.
IntelliJ has better support for Groovy, for example, you can debug
Groovy code just like
Java code. Please send me a brief summary of the project you are
working on and then we
will send you the license.
Thanks,
Jian
> 303KViewDownload
please follow up with
this issue?
Raghu, since you are working on the practical project, we can give you
the IntelliJ license.
IntelliJ has better support for Groovy, for example, you can debug
Groovy code just like
Java code. Please send me a brief summary of the project you are
working on and then we
will send you the license.
Thanks,
Jian
On Nov 19, 9:52 pm, "Raghu" <raghu.saval...@gmail.com> wrote:
> Hi John,
>
> Every time I compile it builds with no problems, but while running a demo
> project, this is what I get
>
> Please see attached file. I am using netbeans 6.5 RC
>
> Thanks
> Raghu
>
> -----Original Message-----
> From: telluri...@googlegroups.com
>
> [mailto:telluri...@googlegroups.com] On Behalf Of
> John.Jian.F...@gmail.com
> Hi John,
>
> Every time I compile it builds with no problems, but while running a demo
> project, this is what I get
>
> Please see attached file. I am using netbeans 6.5 RC
>
> Thanks
> Raghu
>
> -----Original Message-----
> From: telluri...@googlegroups.com
>
> [mailto:telluri...@googlegroups.com] On Behalf Of
> Sent: Wednesday, November 19, 2008 8:07 PM
> To: tellurium-users
> Subject: Re: Tellurium Tutorial Series: Step by Step Guide to create
> Tellurium UI modules
>
> There are two rules:
>
> 1) Ignore the web UI elements you do not need and only focus on the UI
> elements that you want to test
> 2) For clocator, you do not need all the attributes in the html
> source, as long as the attributes
> you put on the clocator can identify the UI element itself and then
> you are good.
>
> Let me know if you have any doubts, questions, or problems about the
> UI modules listed here.
>
> Thanks,
>
> Jian
>
>
>
> error while running.JPG
> To: tellurium-users
> Subject: Re: Tellurium Tutorial Series: Step by Step Guide to create
> Tellurium UI modules
>
> There are two rules:
>
> 1) Ignore the web UI elements you do not need and only focus on the UI
> elements that you want to test
> 2) For clocator, you do not need all the attributes in the html
> source, as long as the attributes
> you put on the clocator can identify the UI element itself and then
> you are good.
>
> Let me know if you have any doubts, questions, or problems about the
> UI modules listed here.
>
> Thanks,
>
> Jian
>
>
>
> 303KViewDownload
Raghu
Nov 19, 2008, 11:31:59 PM11/19/08
to telluri...@googlegroups.com
Hi john,
I already have a license for intellij 7.0.3, but was trying to setup with
netbeans, I am successfully able to run in IDEA 7.
If anyone can help me setup it up? It would be great. John I am trying out
your groovy code for cbsnews.com. looks fantastic job.
Will revert back with my observation as early as possible.
Again thanks
raghu
I already have a license for intellij 7.0.3, but was trying to setup with
netbeans, I am successfully able to run in IDEA 7.
If anyone can help me setup it up? It would be great. John I am trying out
your groovy code for cbsnews.com. looks fantastic job.
Will revert back with my observation as early as possible.
Again thanks
raghu
Haroon Rasheed
Nov 19, 2008, 12:11:31 PM11/19/08
to telluri...@googlegroups.com
Hi Raghu, I can look into this later tonight.
Thanks
Haroon
Haroon Rasheed
Nov 19, 2008, 6:43:20 PM11/19/08
to telluri...@googlegroups.com
I am not getting the same error as shown in the attached file. I followed the steps mentioned on the wiki to setup junit reference project using NetBeans 6.5 successfully ran the test as shown below. There are some test failures but due to the failed assertions, but not due to the Tellurium framework.
Thanks
Haroon
John.Ji...@gmail.com
Nov 19, 2008, 10:18:10 PM11/19/08
to tellurium-users
Thanks, Haroon.
Could you fix all the broken tests?
Jian
Could you fix all the broken tests?
Jian
Reply all
Reply to author
Forward
0 new messages