Navigating Subtables in a Dropdown Menu in Watir

Question

I'm parsing through some HTML/Javascript pages in Watir, and I've run into a little trouble differentiating between two links on a sub-table within a dropdown menu. There are many instances of this within my tables (which I can't change) like 'Overview' and 'Events'.

<td class="nav-td-content-submenu wide-text smaller-text" valign="top">
<a href="javascript: menuManager.check('/Manager/navigate?menuID=system_overview');"
    class="report-group-toggle"
    style="color:black"
    id="report_group_servers"> Servers
</a>
<a  href="javascript: menuManager.check('/Manager/navigate?menuID==system_overview');" 
    title="Overview"
    class="report-group-link">      
     <div>Overview</div>
</a>
<a  href="javascript: menuManager.check('/Manager/SavedReportExec.do?value(reportID)=61&amp;value(menuID)=system.1');"      
    title="Events"
    class="report-group-link">      
    <div>Events</div>
</a>
<a  href="javascript: menuManager.check('/Manager/navigate?menuID=alerts');"        
    title="Alerts"
    class="report-group-link">      
    <div>Alerts</div>
</a>
<a  href="javascript: menuManager.check('/Manager/navigate?menuID=logs');"      
    title="Logs"
    class="report-group-link">      
    <div>Logs</div>
</a>

<a href="javascript: menuManager.check('/Manager/SavedReportExec.do?value(reportID)=62&amp;value(menuID)=agent.1');"
        class="report-group-toggle"
        style="color:black"
        id="report_group_agents"> Agents
</a>
<a  href="javascript: menuManager.check('/Manager/SavedReportExec.do?value(reportID)=62&amp;value(menuID)=agent.1');"       
    title="Overview"
    class="report-group-link">      
    <div>Overview</div>
</a>
<a  href="javascript: menuManager.check('/Manager/SavedReportExec.do?value(reportID)=63&amp;value(menuID)=agent.2');"       
    title="Events"
    class="report-group-link">      
    <div>Events</div>
</a>
<a  href="javascript: menuManager.check('/Manager/navigate?menuID=application_monitoring');"        
    title="Application Monitoring"
    class="report-group-link">      
    <div>Application Monitoring</div>
</a>

Where the dropdown menu looks like so:

 Servers
 - Overview      
 - Events    
 - Alerts
 - Logs

 Agents
 - Overview
 - Events
 - Application Monitoring

The link for System directly navigates to the first "Overview" within the subsection. (Note: The main menu icon is also the link for the Servers->Overviews page).

My problem is that I'm trying to differentiate between Overview as it pertains to Servers->Overview and Agents->Overview.

I can check for the existence and navigate to Servers->Overview like so:

if $browser.link(:id => 'report_group_servers').exists?
    if $browser.link(:id => 'report_group_servers').exists?
        if $browser.link(:title => 'Overview').exists?
            $browser.link(:title => 'Overview').click
        end
    end
end

However even when I try to get to Agents->Overview I am still navigating to Servers->Overview so I try:

if $browser.link(:id => 'report_group_agents').exists?
    if $browser.link(:id => 'report_group_agents').exists?
        if $browser.link(:title => 'Overview', :id => 'report_group_agents').exists?
                $browser.link(:title => 'Overview', :id => 'report_group_agents').click
            end
    end
end

In the attempt to just look in the main link of the table (since the Servers links to Servers->Overview and Agents links to Agents->Overview) I also tried to select the link that contains "Agents":

if $browser.link(:xpath, "//a[contains(.,'Agents')]/")
    $browser.link(:xpath, "//a[contains(.,'Agents')]/").click
end

This however generates an error since the 'contains' is an evaluation, and this checks the entire page for any links that contain Agents - which could be problematic.

Considering all links of the sub-table are of the class "report-group-link", how might I be able to differentiate between the two links based off of the first id or reference name?

Justin Ko Justin Ko · Accepted Answer · 2013-10-09T11:01:19

Solution 1 - Use text and href attribute

The 2 Overview links are differentiable by their text (from other links) and by their href attribute (from each other). I think the cleanest solution would be to use these two attributes:

# The Servers > Overview link
browser.link(:text => 'Overview', :href => /system_overview/)

# The Agents > Overview link
browser.link(:text => 'Overview', :href => /SavedReportExec/)

Solution 2 - Xpath

If you really need/want to find the link based on its relationship to the Servers and Agents links, you could use the preceding-sibling axis in xpath.

# The Servers > Overview link
browser.link(:xpath => '//a[preceding-sibling::a[contains(., "Servers")]][contains(., "Overview")]')

# The Agents > Overview link
browser.link(:xpath => '//a[preceding-sibling::a[contains(., "Agents")]][contains(., "Overview")]')

Solution 3 - CSS

The xpath is pretty hard to read, so you could use a css-selector (with the general sibling selector ~) instead.

# The Servers > Overview link
browser.link(:css => '#report_group_servers ~ a[title="Overview"]')

# The Agents > Overview link
browser.link(:css => '#report_group_agents ~ a[title="Overview"]')

Navigating Subtables in a Dropdown Menu in Watir

1 Answers