clicking on a TabStrip

58 views
Skip to first unread message

billp

unread,
Jan 30, 2010, 11:15:14 AM1/30/10
to watij
I'm having problems figuring out how to click on a TabStrip.

As a simple example, consider the tabstrip at this website:
http://authors.aspalliance.com/aspxtreme/webforms/demos/ietabstrip.asp

My goal is to be able to click on the "support" tab of this little
site.
Getting the TabStrip element is easy:
IE ie = new IE();
ie.start("http://authors.aspalliance.com/aspxtreme/webforms/demos/
ietabstrip.aspx");
HtmlElement tabStrip = ie2.htmlElement(SymbolFactory.id,"ts1");

Now what???? I can get the "support" Tab as follows:
HtmlElement supportTab = ie2.htmlElement
(SymbolFactory.text,"support");

However, this HtmlElement does not have an element field, which I can
access to execute it's .click() method.
In other words,
supportTab.element() is null

I tried the following, but it did not work:
tabStrip.element().setAttribute("selectedIndex","2");
tabStrip.element().click();

This code executes, but nothing happens.

Thx for any possible help.

Here is the HTML for that page, allthough it's easier to just go to
the website:

<%@ Register tagprefix="ie" namespace="Microsoft.Web.UI.WebControls"
assembly="Microsoft.Web.UI.WebControls" %>

<html>
<head>
<title>TabStrip with Default Settings</title>
<link rel="stylesheet" href="/aspxtreme/shared/netdemos.css">
</head>

<body>
<!-- #include virtual="~/shared/top.inc -->

<div class="header"><h2>TabStrip with Default Settings</h2></div>

<p class="small">This demo requires ASP.NET 2.0 to function
properly<hr size=1 width=90%>

<center>
<form runat="server">

<br>

<ie:tabstrip id="ts1" runat="server"
tabdefaultstyle="width: 100; height: 25;
text-align: center">

<ie:tab text="home" />
<ie:tab text="about us" />
<ie:tab text="products" />
<ie:tab text="support" />
<ie:tab text="contact us" />

</ie:tabstrip>

<br>

</form>
</center>

<hr size=1 width=90%>

<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>

Jake Dempsey

unread,
Feb 2, 2010, 12:50:19 PM2/2/10
to watij
I tried to go to the url and I get an access denied.

billp

unread,
Feb 2, 2010, 2:47:22 PM2/2/10
to watij
Hmm,

Can you try first going to :
http://authors.aspalliance.com/aspxtreme/webforms/controls/tabstripintro.aspx

Then, in the middle of the page, there is a link with the text:
TabStrip with Default Settings
click that.

The original URL that I sent, seems to work, after you have navigated
through the 2 URL's above.

Sorry for the confusion, and thx for your repsonse.

darrell

unread,
Feb 2, 2010, 4:59:02 PM2/2/10
to watij
If you look at the web page with something like Firebug in Firefox you
will see the HTML for the support tab is:

<td ....>
<font ...>
<a href....>
<font color="#000000">support</font>
</a>
</font>
</td>

What you have been doing is finding the <font> tag using htmlElement.
What you need to do is find the <a> tag using Link. The xpath for
locating the support tab would be:

"//FONT[contains(text(),'support')]/.."

So the Watij code would be:

Link supportTab = ie.link(SymbolFactory.xpath, "//font[contains(text
(),'support')]/..");
supportTab.click();


On Feb 2, 2:47 pm, billp <bperlm...@gmail.com> wrote:
> Hmm,
>

> Can you try first going to :http://authors.aspalliance.com/aspxtreme/webforms/controls/tabstripin...

billp

unread,
Feb 3, 2010, 9:12:55 AM2/3/10
to watij
Hi,

I tried using your code. Here is my version below:

IE ie = new IE();

try {


ie.start("http://authors.aspalliance.com/aspxtreme/webforms/
demos/ietabstrip.aspx");

Link supportTab = ie.link(SymbolFactory.xpath, "//font

[contains(text(),'support')]/..");
supportTab.click();
} catch (Exception e) {
e.printStackTrace();
}

This did not work. The supportTab object that returns from the
ie.link statement has a null element field.
Therefore, you can't execute supportTab.click().

I have the IE Developer ToolBar installed in Internet Explorer. When
I look at the DOM, I don't see the font html element.
I don't doubt that it's there, I just don't see it. In my original
email, I also copied the HTML that the website itself provides, and
there are not any references to the font elements above.

I did install Firebug, opened the website with the TabStrip in
Firefox, and did see the font reference of which you described.

Could this be an issue with Internet Explorer, and these kind of ASP
objects?

Thanks again

Adrian Ghidu

unread,
Feb 4, 2010, 5:25:36 AM2/4/10
to wa...@googlegroups.com
Hi Bill,
Here is html of the tabstrip element:
<TSNS:TabStrip id=ts1 onwcready="JScript:try{document.ctl00.__ts1_State__.value=selectedIndex}catch(e){}" onSelectedIndexChange="JScript:document.ctl00.__ts1_State__.value=event.index" tabDefaultStyle="width:100;height:25;text-align:center;" selectedIndex="0">

    <TSNS:Tab>home</TSNS:Tab>
    <TSNS:Tab>about us</TSNS:Tab>
    <TSNS:Tab>products</TSNS:Tab>
    <TSNS:Tab>support</TSNS:Tab>
    <TSNS:Tab>contact us</TSNS:Tab>

</TSNS:TabStrip>
So as you can see this is regraded as a hole, much like "select". And like select, you should change the value of "selectedIndex" to the option you wish to set like: selectedIndex = 2 means products will be selected.

Regards

--
You received this message because you are subscribed to the Google Groups "watij" group.
To post to this group, send email to wa...@googlegroups.com.
To unsubscribe from this group, send email to watij+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/watij?hl=en.


darrell

unread,
Feb 4, 2010, 12:28:51 PM2/4/10
to watij
I just had a look at it in IE and it is TOTALLY different from Firefox/
Chrome/Safari/etc. I typically have Firefox and IE open. I'll use
Firebug in Firefox to examine the page and IE to run the automation.
There is occasionally some differences but in this case the code is
TOTALLY different.

Looking at the IE source, there is an htmlElement with id="ts1" and it
has two attributes. The first is selectedIndex="0" and the second is
onSelectedIndexChange="JScript:...". you might want to try playing
with changing the selectedIndex attribute on the element using
ie.executeScript() then making it recognize the change by using the
htmlElement.fireEvent("onchange");

This is my best guess on how to handle this.

Darrell

billp

unread,
Feb 4, 2010, 12:37:19 PM2/4/10
to watij
Adrian,

Thanks for your response. I tried the following:

IE ie = new IE();
ie.start("http://authors.aspalliance.com/aspxtreme/webforms/
demos/ietabstrip.aspx");

HtmlElement e2 = ie.htmlElement(SymbolFactory.id,"ts1");
e2.element().setAttribute("selectedIndex", "2");
e2.click();

This code does not throw any exceptions. As well, when you run it in
the debugger (Eclipse), you can inspect the e2 element, and see that
the
attribute "selectedIndex" of the TabStrip has been set to "2".

Unfortunately, the "support" Tab has not been selected in the browser
(Internet Explorer), and
when I use the IE Developer Toolbar to inspect the TabStrip, it's
selectedIndex attribute is still "0".

Any other ideas?

Thanks again,

Bill

On Feb 4, 5:25 am, Adrian Ghidu <agh...@gmail.com> wrote:
> Hi Bill,
> Here is html of the tabstrip element:
> <TSNS:TabStrip id=ts1
> onwcready="JScript:try{document.ctl00.__ts1_State__.value=selectedIndex}cat ch(e){}"
> onSelectedIndexChange="JScript:document.ctl00.__ts1_State__.value=event.ind ex"
> tabDefaultStyle="width:100;height:25;text-align:center;" selectedIndex="0">
>
>     <TSNS:Tab>home</TSNS:Tab>
>     <TSNS:Tab>about us</TSNS:Tab>
>     <TSNS:Tab>products</TSNS:Tab>
>     <TSNS:Tab>support</TSNS:Tab>
>     <TSNS:Tab>contact us</TSNS:Tab>
>
> </TSNS:TabStrip>
> So as you can see this is regraded as a hole, much like "select". And like
> select, you should change the value of "selectedIndex" to the option you
> wish to set like: selectedIndex = 2 means products will be selected.
>
> Regards
>
>
>
> On Wed, Feb 3, 2010 at 4:12 PM, billp <bperlm...@gmail.com> wrote:
> > Hi,
>
> > I tried using your code.  Here is my version below:
>
> >                IE ie = new IE();
>
> >                try {
> >                     ie.start("
> >http://authors.aspalliance.com/aspxtreme/webforms/

> > demos/ietabstrip.aspx<http://authors.aspalliance.com/aspxtreme/webforms/%0Ademos/ietabstrip...>

> > watij+un...@googlegroups.com <watij%2Bunsu...@googlegroups.com>.

Bill Perlman

unread,
Feb 5, 2010, 2:50:55 PM2/5/10
to wa...@googlegroups.com
Darrell,
 
I've tried everything -still no luck. 
 
Here's what I've done.
 
IE ie2 = new IE();
 
// try focusing
ie2.focus();
 
// try clicking on the TabStrip
HtmlElement e2 = ie2.htmlElement(SymbolFactory.id,"ts1");
e2.click();
 
// try moving the cursor on to the "support" button
ie2.sendKeys("{RIGHT}{RIGHT}{RIGHT}{ENTER}");
 
// try changing the selectedIndex attribute
e2.element().setAttribute("selectedIndex", "2");
 
// fire all events that might be applicable
e2.fireEvent("onwready");
e2.fireEvent("onchange");
e2.fireEvent("onwready");
e2.fireEvent("onchange");
 
// execute any script that might be available or applicable.
try {
ie2.executeScript("JScript:document.ctl00.__ts1_State__.value=event.index");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
ie2.executeScript("JScript:try{document.ctl00.__ts1_State__.value=selectedIndex}catch(e){}");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
 
 
Unfortunately, no luck.
 
Thanks for any further help or thoughts,
 
Bill
--
You received this message because you are subscribed to the Google Groups "watij" group.
To post to this group, send email to
wa...@googlegroups.com.
To unsubscribe from this group, send email to
watij+un...@googlegroups.com.

For more options, visit this group at

darrell

unread,
Feb 5, 2010, 7:19:09 PM2/5/10
to watij
Here is how I would tackle it. I'd write a test case that got to the
page with the TabStrip. I have the following:

String html = ie.html();
Thread.sleep(1);

and I'd set a breakpoint on the sleep statement. At this point I can
now examine the html variable and have a good look at what Watij can
see. I use Eclipse and in it I can actually add executable statements
to the watch window. So I can use the watch window to run code
interactively (like shell programming). I'd try a few things and see
what happens.

I'd try for you but I'm at home for the weekend and I use a Mac at
home so it would not be convenient for me to set up a Watij
environment here.

Darrell

> ie2.executeScript("JScript:try{document.ctl00.__ts1_State__.value=selectedI ndex}catch(e){}");} catch (Exception e) {

darrell

unread,
Feb 5, 2010, 9:02:59 PM2/5/10
to watij
Bill,

I got bored and set up a Vmware session. I think the reason the
rendered HTML looks different on Firefox/Safari/Opera/etc. is because
this code is doing something very IE specific and outside the HTML
standard. I can find the element as an watij.element.HtmlElement.
EVERYTHING in Watij should be an HtmlElement or extend from that. This
is similar to being a java.lang.Object in Java. I found the Tab
easily. I could examine the structure in Eclipse. However, if I
checked to see if it exists, i.e.

HtmlElement support = ie.htmlElement(...);
boolean exists = support.exists();

it does not exist. In other words, Watij can see it but it cannot see
it. Watij does not know how to click on this thing. You might be able
to manipulate the DOM via javascript. I would suggest creating a
library to accept an HtmlElement. Pass in the TabStrip (e.g. xpath("//
*[@id='ts1']")) then parse the html() to figure what the JScript is.
Finally, run the JScript using the executeScript functionality. What
you have for executeScript will do nothing because you have to change
the selectedIndex value. If you change the string above to have 4
instead of selectedIndex it might work.

The problem is that your automation is tightly coupled with the
implementation. This could become a maintenance nightmare.

Darrell

On Feb 5, 2:50 pm, "Bill Perlman" <bperlm...@gmail.com> wrote:

> ie2.executeScript("JScript:try{document.ctl00.__ts1_State__.value=selectedI ndex}catch(e){}");} catch (Exception e) {

Bill Perlman

unread,
Feb 6, 2010, 11:29:57 AM2/6/10
to wa...@googlegroups.com
Darrell,
 
Is there a way to use sendKeys().  I tried the code below, which did NOT work, but maybe you can get it to work:
 
IE ie2 = new IE();
Thread.sleep(2000);
 
ie2.focus();
 
HtmlElement e2 = ie2.htmlElement(SymbolFactory.
xpath,"//BODY");
e2.click();
ie2.sendKeys(
"{TAB}{TAB}{TAB}{TAB}{TAB}{RIGHT}{RIGHT}{ENTER}");
 
 
Also, I have tried to do ie2.setAttribute("selectedIndex","4").  That does not work.
 
Thanks again,
 
Bill
 
 
 

 
 
 
 
----- Original Message -----
From: "darrell" <darrell....@gmail.com>

darrell

unread,
Feb 6, 2010, 8:12:19 PM2/6/10
to watij
Try finding something on the page that you can put focus on. A span,
div, etc. that is recognized by Watij then sendKey("{tab}") from there
to the support tab. My exact process would be:

- Write a Watij test case with:
// navigate to the page with the TabStrip
String s = ""; // set this to the xpath for an element on the page
HtmlElement foo = ie.htmlElement(xpath(s));
boolean test = foo.exists();
Thread.sleep(1);

- Set a breakpoint on the sleep statement
- Run the test case in debug
- When it stops at the sleep statement, check the value of test
- If test is true we have something Watij recognizes
- If not, change the xpath to something else on the page and run again

- Once I found something which Watij can 'see' change the foo.exists()
line to:

foo.focus();

- Run the test case in debug mode
- When it stops at the sleep statement, go to the IE window (don't
click on it, use alt-tab to change to it)
- Use the tab key until the 'support' tab is highlighted
- Keep count of how many times you had to press the tab key
- After the foo.focus() statement add the following:

int numTabsNeeded = 9;
for(int i = 0; i < numTabsNeeded; i++) {
ie.sendKeys("{tab}");
}
ie.sendKeys("{enter}");

- The value 9 should be changed to the actual number of tabs required
to get to the 'support' tab.
- Run the test case in debug again
- It will stop at the breakpoint on the sleep statement
- Check that the 'support' tab has been selected
- Remove the sleep statement and you are done

This should work but you might need to play around a bit.

Darrell

On Feb 6, 11:29 am, "Bill Perlman" <bperlm...@gmail.com> wrote:
> Darrell,
>

> Is there a way to use sendKeys().  I tried the code below, which did NOT work, but maybe you can get it to work:
>
> IE ie2 = new IE();
> ie2.start("http://authors.aspalliance.com/aspxtreme/webforms/demos/ietabstrip.aspx");
> Thread.sleep(2000);
>
> ie2.focus();
>

> HtmlElement e2 = ie2.htmlElement(SymbolFactory.xpath,"//BODY");

> ...
>
> read more »

Bill Perlman

unread,
Feb 7, 2010, 9:16:43 AM2/7/10
to wa...@googlegroups.com
Darrell,

I can easily locate any element on the page, and get it's exists() method to
return true.

I can execute the focus() method on all of these elements.

Every time that I alt-tab to Internet Explorer in order to see if I am
actually focused on
any of these elements, I am NOT focused on the element, and therefore,
hitting the tab key
only causes the address bar of InternetExplorer to be highlighted (the URL
is highlighted).

In short - I have tried everything - and this is an incredibly simple page.

Unless someone at Watij actually trys to make this work, there is no chance
that I am going
to succeed. I want to adopt Watij for my Web test case and automation
projects - of which
there are many. Watij has very clear syntax, and is very easy to use. It's
really a great product. However, if
I get into a situation where I'm stumped by something as simple as this, I'm
concerned.

Bill


----- Original Message -----
From: "darrell" <darrell....@gmail.com>
To: "watij" <wa...@googlegroups.com>

foo.focus();

Darrell

> read more �

--
You received this message because you are subscribed to the Google Groups
"watij" group.
To post to this group, send email to wa...@googlegroups.com.
To unsubscribe from this group, send email to
watij+un...@googlegroups.com.
For more options, visit this group at

http://groups.google.com/group/watij?hl=en.

Adrian Ghidu

unread,
Feb 7, 2010, 9:43:47 AM2/7/10
to wa...@googlegroups.com
Hi Bill,
I have managed to click on one of the tabs using the method I described. The thing is I have made some changes to the source code of watij, it's now a lot faster and it works a bit differently with the elements - some elements where inaccessible with the original watij.
You can see bellow the code:

            IE ie = new IE();
            ie.start();
            ie.navigate("http://authors.aspalliance.com/aspxtreme/webforms/demos/ietabstrip.aspx");
            final int productsIndex = 2;
            HtmlElement tabStrip = ie.GetHtmlElementById("ts1");
            if (tabStrip != null)
            {
                Element tabStripElement = tabStrip.element();
                if (tabStripElement != null)
                {
                    tabStripElement.setAttribute("selectedIndex", "" + productsIndex);
                }
            }

After the last line, the tab selected becomes products. If you are interested to this change, let me know

Regards
Adrian

Bill Perlman

unread,
Feb 7, 2010, 1:42:59 PM2/7/10
to wa...@googlegroups.com
Adrian,
 
I'm a little confused here.  Are you saying that the ONLY way to access the TabStrip is by using the new code, with the new method GetHtmlElementByID?
 
If so, then of course I want those changes.  Are they available on your website?  How do I get them?
 
Thanks,

darrell

unread,
Feb 8, 2010, 12:28:33 PM2/8/10
to watij
Bill,

You don't need new code to make this work. Here is a setup, test case,
tear down to demo it. The setup gets you to the page with the
TabStrip, the test case puts focus on it then uses sendKeys to get to
the correct tab:

IE ie = new IE();

protected void setUp() throws Exception {
String url = "http://authors.aspalliance.com/aspxtreme/webforms/
controls/tabstripintro.aspx";
ie.start(url);
Link one = ie.link(xpath("//TABLE[@class='thumbs']/TBODY/TR/TD/
DIV[contains(text(),'TabStrip with Default Settings')]/../
A[contains(text(),'Run Sample')]"));
one.click();
ie.waitUntilReady();
}

public void testMe() throws Exception {
IE child = ie.childBrowser();
HtmlElement tabStrip = child.htmlElement(xpath("//*[@id='ts1']"));
tabStrip.focus();
child.sendKeys("{RIGHT}{RIGHT}{RIGHT}{ENTER}");
Thread.sleep(10000);
child.close();
}

protected void tearDown() throws Exception {
ie.close();
}

>   On Sun, Feb 7, 2010 at 4:16 PM, Bill Perlman <bperlm...@gmail.com> wrote:
>
>     Darrell,
>
>     I can easily locate any element on the page, and get it's exists() method to return true.
>
>     I can execute the focus() method on all of these elements.
>
>     Every time that I alt-tab to Internet Explorer in order to see if I am actually focused on
>     any of these elements, I am NOT focused on the element, and therefore, hitting the tab key
>     only causes the address bar of InternetExplorer to be highlighted (the URL is highlighted).
>
>     In short - I have tried everything - and this is an incredibly simple page.
>
>     Unless someone at Watij actually trys to make this work, there is no chance that I am going
>     to succeed.  I want to adopt Watij for my Web test case and automation projects - of which
>     there are many.  Watij has very clear syntax, and is very easy to use.  It's really a great product.  However, if
>     I get into a situation where I'm stumped by something as simple as this, I'm concerned.
>
>     Bill
>

>     ----- Original Message ----- From: "darrell" <darrell.grain...@gmail.com>

> ...
>
> read more »

Bill Perlman

unread,
Feb 9, 2010, 6:37:09 AM2/9/10
to wa...@googlegroups.com
Darrell,

Have you tried this testcase? I did, and the child.sendKeys statement
inside of the testMe testcase does nothing.

I'm using Internet Explorer 7.0.5730.11.
I've turned off my pop-up blocker.
I'm running the test case while Eclipse is not maximized, so I can watch
both the parent and the child windows appear.

I would be more that happy to show you this in gotomeeting, which I have,
and can invite you to any time you would like.

Bill


----- Original Message -----
From: "darrell" <darrell....@gmail.com>
To: "watij" <wa...@googlegroups.com>


Bill,

> read more �

darrell

unread,
Feb 9, 2010, 4:54:30 PM2/9/10
to watij
I did try it with IE7 and IE8. In both cases I got the same result as
if I tried the test case manually. Clicking the 'support' tab just
highlights the tab. When the page first comes up the 'home' tab is
black text on a white background. When I run the test case it changes
so 'home' is on a grey background and 'support' is on a white
background. What happens for me is the setUp goes to the main page and
selects the first example. This pops open a second window with the
TabStrip demo. The test case then clicks the 'support' tab, waits for
10 seconds so you can see the 'support' tab was selected then tearDown
closes everything down.

On Feb 9, 6:37 am, "Bill Perlman" <bperlm...@gmail.com> wrote:
> Darrell,
>

> ...
>
> read more »

Bill Perlman

unread,
Feb 9, 2010, 8:08:30 PM2/9/10
to wa...@googlegroups.com
Darrell,

Ok. I tried again. This time I turned off the phishing filter as well as
the pop up blocker ( you have to turn off the popup blocker to get the
second popup page to appear).

It worked.

Thanks for you help and patience.

Bill

P.S. - I recommend that anyone who uses watij download and use the IE
Developer Toolbar, which greatly simplifies examining Web Pages.

----- Original Message -----
From: "darrell" <darrell....@gmail.com>
To: "watij" <wa...@googlegroups.com>

darrell

unread,
Feb 10, 2010, 4:36:59 PM2/10/10
to watij
You only need the IE Developer Toolbar if you are using IE6 or IE7.
IE8 has a built in Developer Toolbar. Just press F12 and you'll see
it.

Darrell

On Feb 9, 8:08 pm, "Bill Perlman" <bperlm...@gmail.com> wrote:
> Darrell,
>

> ...
>
> read more »

Bill Perlman

unread,
Feb 10, 2010, 6:54:44 PM2/10/10
to wa...@googlegroups.com
Thx.

Again, the right click trick seems to work well. I'm now using it in
several different places.

Thanks for all of your help.

----- Original Message -----
From: "darrell" <darrell....@gmail.com>
To: "watij" <wa...@googlegroups.com>

Darrell

Reply all
Reply to author
Forward
0 new messages