0

We have tabs called Community, Resources and Support which have the same section class Div Class and Span Class attributes as seen in the html code below. How to "select" or choose one of the tabs and then traverse down the path to the links.

<section class="s-fn-item">
<div class="s-fn-wrapper-item">
    <h5 class="s-fn-title-item">
        <span class="s-fn-item-link">Community</span>
    </h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn-    offscreen" style="display: block; height: 245px;">
        <ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item"><a href="Here is the link" class="s-fn-sub-item-link" title="QA Community Home">QA Community Home</a>
        </li>
<li class="s-fn-promo-sub-menu-item"><a href="/community" class="s-fn-sub-item-link" title="Community Home">Community Home</a>
        </li>
<li class="s-fn-promo-sub-menu-item"><a href="/community/events-webinars" class="s-fn-sub-item-link" title="Community Events">Community Events</a>
        </li>
    </ul>

    </div>
   </div>
</section>
<section class="s-fn-item">
    <div class="s-fn-wrapper-item">
        <h5 class="s-fn-title-item">
        <span class="s-fn-item-link">Resources</span>
       </h5>
   <div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn-offscreen"     style="display: block; height: 227px;">
    <ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item"><a href="/support/articles-and-how-tos" class="s-fn-sub-item-link" title="Articles and How-Tos">Articles and How-Tos</a>
        </li>
<li class="s-fn-promo-sub-menu-item"><a href=”Here is the link” class="s-fn-sub-item-link" title="Blog">Blog</a>
    </li>

Storymakers Support Support Home Contact Us Installation and Licensing

Sameer Shah
  • 9
  • 1

1 Answers1

1

I agree with @user1433852 for using relative xpaths as they make life easier.. :) . I have formulated relative xpaths below to find the menu Community/Resources and then the xpath for a sub-menu item under them:

  1. //span[.='Community']
    This will select the 'span' element with the exact inner HTML or text as 'Community'.

    //span[.='Community']/ancestor::div[@class='s-fn-wrapper-item']//a[@title='QA Community Home']
    This will select the 'a' element with title 'QA Community Home' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Community'.

  2. Similarly,
    //span[.='Resources']
    This will select the 'span' element with the exact inner HTML or text as 'Resources'.

    //span[.='Resources']/ancestor::div[@class='s-fn-wrapper-item']//a[@title='Articles and How-Tos']
    This will select the 'a' element with title 'Articles and How-Tos' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Resources'.

So, in both the cases above I am using the the primary items, i.e., Community and Resources to get to their submenu items, that are, QA Community Home and Articles and How-Tos, respectively.

Subh
  • 4,354
  • 1
  • 13
  • 32
  • I am getting element not visible exception... OpenQA.Selenium.ElementNotVisibleException was unhandled Message=element not visible (Session info: chrome=42.0.2311.135) (Driver info: chromedriver=2.14.313457 (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Windows NT 6.1 SP1 x86_64) Source=WebDriver StackTrace: at OpenQA.Selenium.Remote.RemoteWebDriver.UnpackAndThrowOnError(Response errorResponse) in c:\Projects\webdriver\dotnet\src\webdriver\Remote\RemoteWebDriver.cs:line 1119 – Sameer Shah May 14 '15 at 19:59
  • @SameerShah: Which element is throwing that? **Community** or **QA Community Home** ? Also, please do let me know, if the element **QA Communtiy Home** is a submenu item which appears only after hovering or clicking on **Community** .. – Subh May 15 '15 at 11:11
  • HI Subh, Yes you are correct. QA Community Home is a submenu item appears only after hovering on Community. The error is from QA Community Home. – Sameer Shah May 15 '15 at 21:43
  • In case you are using Java as the language to automate, you can use [Action class to hover over **Community** and then click on **QA Community Home**](http://stackoverflow.com/a/17294390/4193730).. Or you can use something similar if you are using some other language. Hope this helps.. – Subh May 16 '15 at 10:02