CODEWITHSUNDEEP
selectseleniumuniqueelement
Sameer Shah
Sameer Shah

Reputation: 9

In Selenium how to select an option if the span class and div class are not unique

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

Upvotes: 0

Views: 505

Answers (1)

Subh
Subh

Reputation: 4424

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.

Upvotes: 1

Related Questions