I've found what I believe is a bug in element.click but it is strange and
inconsistent so I am uncertain. The general issue is clicking menu items in a
CSS drop-down menu.
The problem is that for some menu items, specifically and only the first item
under the first and third top-level menu, the click event causes the first item
on the next menu over to be clicked. Ex: an attempt to send a click to
Menu1->MenuItem1 in fact clicks Menu2->MenuItem1. Here are Watir examples
using the HTML and CSS at the end of this message.
This works (Menu2->MenuItem1):
```ruby
$b.li(:id,'ctl00_ChangeCustodyMenu').hover
$b.li(:id, 'ctl00_CheckInMenuItem').click
```
The second also line can also be either of:
```ruby
$b.li(:text, 'Check In').click
$b.link(:text,'Check In').click
```
This does not work. Instead of clicking Menu1->MenutItem1 it clicks
Menu2->MenuItem1
```ruby
$b.li(:id,'ctl00_AddMenu').hover
$b.li(:id, 'ctl00_AddAssetFolderMenuItem').click
```
Also does not work. Instead of clicking Menu3->MenutItem1 it clicks
Menu4->MenuItem1
```ruby
$b.li(:id,'ctl00__actionsMenu').hover
$b.li(:id, 'ctl00_moveItemsMenuItem').click
```
All menu items 2-N for all menus work fine on any menu. Only the first item
for the 1st and 3rd menus don't work.
I have found a work around. Calling the OnClick fire event specifically on the
anchor element seems to do the trick.
```ruby
$b.li(:id,'ctl00__actionsMenu').hover
$b.link(:text,'Move Items').fire_event('onClick')
```
The HTML source is:
```html
<div class="menu">
<ul>
<div class="menuBarButtons" id="ctl00_MenuBarButtons">
<li id="ctl00_AddMenu" style="display: inline;">
Add
<ul>
<li id="ctl00_AddAssetFolderMenuItem" style="display: inline;">
<a onclick="window.location = '/AdamsWeb/FolderDetails.aspx?action=new';
return false;" href="">Folder</a>
</li>
</ul>
</li>
<li id="ctl00_ChangeCustodyMenu" style="display: inline;">
Change Custody
<ul>
<li id="ctl00_CheckInMenuItem" style="display: inline;">
<a onclick="window.location =
'/AdamsWeb/ChangeCustody.aspx?action=checkIn'; return false;"
href="">Check In</a>
</li>
<li id="ctl00_CheckOutMenuItem" style="display: inline;">
<a onclick="window.location =
'/AdamsWeb/ChangeCustody.aspx?action=checkOut'; return false;"
href="">Check Out</a>
</li>
<li id="ctl00_DropOffMenuItem" style="display: none;">
<a onclick="window.location =
'/AdamsWeb/PropertyItems.aspx?action=dropOff'; return false;"
href="">Drop-off</a>
</li>
</ul>
</li>
<li id="ctl00__actionsMenu" style="display: inline;">
Actions
<ul>
<li id="ctl00_moveItemsMenuItem" style="display: inline;">
<a onclick="window.location = '/AdamsWeb/MoveItems.aspx'; return false;"
href="">Move Items</a>
</li>
<li id="ctl00_auditItemsProcessMenuItem" style="display: inline;">
<a onclick="window.location = '/AdamsWeb/Audit.aspx?action=process'; return
false;" href="">Process Audit</a>
</li>
<li id="ctl00_auditItemsViewEditMenuItem" style="display: inline;">
<a onclick="window.location = '/AdamsWeb/Audit.aspx?action=viewEdit';
return false;" href="">View/Edit Audit Results</a>
</li>
<li id="ctl00_changeOwnerMenuItem" style="display: inline;">
<a onclick="window.location = '/AdamsWeb/ChangeOwner.aspx'; return false;"
href="">Change Owner</a>
</li>
</ul>
</li>
<li id="ctl00_ReportsMenu" style="display: inline;">
Reports
<ul>
<li id="ctl00_AnalysisRequestedReportMenuItem" style="display: inline;">
<a onclick="window.location =
'/AdamsWeb/Reports/AnalysisRequestedReportPage.aspx'; return false;"
href="">Analysis Requested</a>
</li>
<li id="ctl00_AssetDetailsReportMenuItem" style="display: none;">
<a onclick="ShowOptionsPanel('AssetDetailsReportOptionsPanel'); return
false;" href="">Asset Details</a>
</li>
</ul>
</li>
</div>
</ul>
</div>
```
The associated CSS is:
```css
.menuBarButtons
{
margin-left: 10px;
display: inline;
white-space: nowrap;
}
.menu
{
position:relative;
z-index:12;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul
{
padding:0;
margin:0;
list-style-type:none;
}
/* float the list to make it horizontal and a relative positon so that you can
control the dropdown menu positon */
.menu li
{
float:left;
position:relative;
color: #f8eeac;
padding-left: 5px;
padding-right: 5px;
}
.menu li:hover
{
color: #8fc5d9;
}
/* style the links for the top level */
.menu a, .menu a:visited
{
display:block;
text-decoration:none;
border:1px solid #353535;
border-width:0px 0px 0px 1px;
}
/* hide the sub levels and give them a positon absolute so that they take up no
room */
.menu ul ul
{
visibility:hidden;
position:absolute;
height:0;
top:23px;
left:0px; /* Change this to right to cause the drop-downs to extend to
the left instead of the right */
width:172px; /* This must be the width of the link plus the left and
right padding on the link */
border-top:1px solid #000;
text-align: left;
}
.menu ul ul li
{
padding-left: 0px; /* clear out inherited padding */
padding-right: 0px; /* clear out inherited padding */
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited
{
background:#6a6a6a;
color:#FFF;
height:auto;
line-height:1em;
padding:5px 10px 5px 10px;
width:150px; /* This can be any width but must be reflected in the
".menu ul ul" width */
border-width:0 1px 1px 1px;
}
/* style the second level hover */
.menu ul ul a:hover
{
color: black;
background-color: #c0c0c0;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul
{
visibility:visible;
}
```
---
Reply to this email directly or view it on GitHub:
https://github.com/watir/watir-webdriver/issues/209
_______________________________________________
Wtr-development mailing list
[email protected]
http://rubyforge.org/mailman/listinfo/wtr-development
