Selenium find elements within specified element

Viewed 726

I'm running into trouble with Selenium when it comes to XING's groups. The solution I was using for more than two years to this very date does not work anymore; they must have changed something about their HTML.

The main problem is that a certain select element doesn't open (when trying to open it by clicking it) and I hence cannot access the options to "click" or to select. I see a small border embracing the drop down, as if it was clicked but didn't function in second place. Now that I've spent quite some time on elaborating on the error, I'm quite sure this is because the same (meaning the same attributes, ...) drop down exists on the same page at another point (to sort/filter posts shown by groups). However, I want to select the (sub) forum that a new post is submitted to, and this does not work.

I tried many, many, many different things of which none worked, obviously. I'm unable to list all of my attempts here since it's simply too much and partly too long ago. Some of what I tried:

  • select the drop down by various methods (CSS Selector, class name, XPath, ...)
  • access the desired option of the drop down directly (by CSS Selector, class name, XPath; even tried to collect arrays of all elements and select the right one by index, didn't work either)
  • access the desired option of the drop down directly by JavaScript and 'click' it by JS

And now SO is my hope. I thought of a way to select -exactly- this drop down (rather than the other one described) by child elements and so on (this is the reason for the title of this question). This is the HTML:

<div class="comm-navigation forum-select is-open" id="new-post-forum-select" data-is-open="true">
  <a href="#" class="comm-navigation-trigger">
      <span class="comm-navigation-name" title="Select forum">Select forum</span>
    <i class="comm-navigation-icn-closed foundation-icon-shape-arrow-down"></i>
    <i class="comm-navigation-icn-open foundation-icon-shape-arrow-up"></i>
  </a>

  <ul class="comm-navigation-dropdown hidden" style="width: 519px; display: block;">
      <li class="comm-navigation-group forum-list">
        <ul>
              <li class="comm-navigation-item">
                <a href="/communities/forums/100941274" class="comm-navigation-forum" data-forum-id="100941274" data-forum-name="Members" title="Members">
                  Members
                </a>
              </li>
              <li class="comm-navigation-item">
                <a href="/communities/forums/100941276" class="comm-navigation-forum" data-forum-id="100941276" data-forum-name="Q &amp; A" title="Q &amp; A">
                  Q &amp; A
                </a>
              </li>
              <li class="comm-navigation-item">
                <a href="/communities/forums/100941275" class="comm-navigation-forum" data-forum-id="100941275" data-forum-name="Feedback" title="Feedback">
                  Feedback
                </a>
              </li>
        </ul>
      </li>
  </ul>
    <input type="hidden" name="post[forum_id]" id="post_forum_id" value="">
</div>

I thought of perhaps going from comm-navigation forum-select is-open (which is the same when it's still closed without is-open) to the inner elements to get the right Chrome element and then click the option.

Also, I found that there's a hidden field:

<input type="hidden" name="post[forum_id]" id="post_forum_id" value="">

Which is exactly related to my problem; value is empty as long as nothing's selected, as soon as selected, the forum's id is inserted into the value. This I could imagine if there wasn't any JS that prevents you from submitting the form without having actually selected the sub forums by drop down.

Looking forward to great solutions.

1 Answers

If I understood the question, then first you need to click on the span inside the first link (class=comm-navigation-trigger) with the text "Select Forum". This makes the "ul" below to be visible. Now you need to click the desired "li" inside this list. If so then read on.

  1. Find the span with the css selector - "div[id='new-post-forum-select'] > a[class='comm-navigation-trigger'] > span". Click on this element.

  2. Wait for the list to become visible. Use the css selector - "div[id='new-post-forum-select'] > ul[class*='comm-navigation-dropdown']". Use the ElementIsVisible ExpectedCondition. Though you may or not require this step, added this as a check.

  3. Find the link with the required value - "div[id='new-post-forum-select'] > ul[class*='comm-navigation-dropdown'] a[class='comm-navigation-forum'][data-forum-name='Q & A']". Click on this.

Related