Reputation: 47
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.
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
Reputation: 2019
Can you try with this xpath please,
"//a[contains(text(),'HANDSET')]/parent::li/i"
Hope this helps. Thanks.
Upvotes: 1
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