SDN
SDN

Reputation: 47

Can't click element in a treeview - Selenium webdriver java

I'm trying to reach an element by clicking through a treeview. I'm able to click through the 1st level 'Devices' but I'm stuck to go to the next levels.

Here is a screenshot from the browser window.

Tree view of the webapp

Here is the cut down version of the HTML code.

<ul class="jstree-container-ul jstree-children" role="group">
  <li role="treeitem" id="devices" class="jstree-node jstree-open">
    <i class="jstree-icon jstree-ocl" role="presentation"></i>
    <a class="jstree-anchor" id="devices_anchor">
      <i class="jstree-icon jstree-themeicon" role="presentation"></i> Devices
    </a>
    <ul role="group" class="jstree-children" style="">
      <li role="treeitem" id="j1_3" class="jstree-node jstree-open">
        <i class="jstree-icon jstree-ocl" role="presentation"></i>
        <a class="jstree-anchor" id="j1_3_anchor">
          <i class="jstree-icon jstree-themeicon" role="presentation"></i> HANDSET
        </a>
        <ul role="group" class="jstree-children" style="">
          <li role="treeitem" id="j1_6" class="jstree-node jstree-open">
            <i class="jstree-icon jstree-ocl" role="presentation"></i>
            <a class="jstree-anchor  jstree-clicked" href="#" tabindex="-1" id="j1_6_anchor">
              <i class="jstree-icon jstree-themeicon" role="presentation"></i> Apple
            </a>
            <ul role="group" class="jstree-children" style="">
              <li role="treeitem" id="j1_15" class="jstree-node  jstree-leaf">
                <i class="jstree-icon jstree-ocl" role="presentation"></i>
                <a class="jstree-anchor" id="j1_15_anchor">
                  <i class="jstree-icon jstree-themeicon" role="presentation"></i> iPhone 5s
                </a>
              </li>
              <li role="treeitem" id="j1_16" class="jstree-node  jstree-leaf">
                <i class="jstree-icon jstree-ocl" role="presentation"></i>
                <a class="jstree-anchor" id="j1_16_anchor">
                  <i class="jstree-icon jstree-themeicon" role="presentation"></i> iPhone 6
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</ul>

Here is how I was able to click the first tree icon element in the treeview for 'Devices'

driver.findElement(By.cssSelector("#devices > i.jstree-icon.jstree-ocl")).click();

After that I don't know how to click the subsequent tree icons next to HANDSET --> Apple --> iPhone 6 to reach iPhone 6 page.

I simply can't use IDs because they can change as soon as another item is added to the treeview.

I tried something like this but that didn't work for me.

driver.findElement(By.xpath("//*[contains(text(),'HANDSET')]/../preceding-sibling::i[@class='i.jstree-icon.jstree-ocl']")).click();

UPDATE: For those who land up here, this is how I was able to resolve it using @santhosh kumar's answer:

driver.findElement(By.xpath("//a[contains(text(),'HANDSET')]/parent::li/i")).click();
driver.findElement(By.xpath("//a[contains(text(),'Apple')]/parent::li/i")).click();

Upvotes: 3

Views: 3567

Answers (2)

santhosh kumar
santhosh kumar

Reputation: 2019

Can you try with this xpath please,

"//a[contains(text(),'HANDSET')]/parent::li/i"

Hope this helps. Thanks.

Upvotes: 1

V. Rob
V. Rob

Reputation: 346

Try the below code without id:

List<WebElement> icons = driver.findElements(By.xpath("//i[@class='jstree-icon jstree-ocl'"));
for (WebElement e : icons) {
 e.click(); // click each
}     

in "for" you can webElement.getAttribute or getCssValue for build following element locators

hope it will help

Upvotes: 0

Related Questions