Search code examples
seleniumjunitjstree

Selenium testing - click to expand a jstree node

I'm trying to write some selenium tests for a java app with a jsp page using jstree. I haven't done much of this although I have quite a few basic tests to follow.

Essentially the id's are auto generated so I'm using xpath to locate specific points of interest. On the page the leaf I am hoping to select is hidden (and so not available for testing). Thus the first task in my unit test is to expand a specific link and so the child nodes are rendered and available for my actual tests. The element which seems to hold the key to this is an i tag.

EDIT for clarity

If you look at https://www.jstree.com/demo/ I'm essentially trying to get to the Building node under LED in a java selenium test (so if you look at source when you open the page there is no reference to Building, but when you open the LED node the html is rendered). I hope this makes sense?!

 <li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="M[randomnumber]_anchor" aria-expanded="false" id=" M[randomnumber]" class="jstree-node treeNodeTextParentLevel3 jstree-closed">    
  <i class="jstree-icon jstree-ocl" role="presentation"></i>
    <a class="jstree-anchor" href="#" tabindex="-1" id=" M[randomnumber]_anchor ">
      <i class="jstree-icon jstree-checkbox" role="presentation"></i>
      <i class="jstree-icon jstree-themeicon" role="presentation"></i>
     Visible leaf text</a>
  </li>

Using Chrome Developer tools tells me that 

<i class="jstree-icon jstree-ocl" role="presentation"></i>

is the element you need to click to expand the child nodes.

This sets 

aria-expanded="true"

and 

class="jstree-node jstree-open"

So I have used 2 approaches to this

1) If I try 

 driverWait.until(ExpectedConditions.elementToBeClickable(
          By.xpath("//aside/div/div/ul/li[@id=’knownId] ']/ul/li[contains(@id,'M')]/i"))).click();

I get an error 

Element <i class="jstree-icon jstree-ocl" role="presentation"></i> is
> not clickable at point

Which possibly seems fair for an i tag ?

2) So I tried to do it directly through altering the attributes

WebElement element = driver.findElement(By.xpath("//aside/div/div/ul/li[@id=’knownId']/ul/li[contains(@id,'M')]"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].setAttribute('aria-expanded',arguments[1]);", element, "true");
js.executeScript("arguments[0].setAttribute('class',arguments[1]);", element, "jstree-node jstree-open");

but in this case the tree leaf is not expanded (although if I do a element.getAttribute("aria-expanded"); afterwards for example the attribute has been updated it seems to do nothing on the page being tested) and so I cannot select the child item I actually want to test.

Can anyone point me in the right direction please ?

Solution

  • I have tried same on given site

    Here JavascriptExecutor is working for click on to the element

    I have tried below code :

    // tree menu present under iframe so need to switch into iframe first
driver.switchTo().frame(0);

// used to click on expand option of LED
WebElement element = driver.findElement(By.xpath(".//*[@id='LED']/i"));
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].click();",element);


 System.out.println(driver.findElement(By.id("LED/Building_anchor")).getText());

    Other Example could be if you want to click on Test under LED > Building >Test

    Then you can try like

    JavascriptExecutor js = (JavascriptExecutor) driver;

// To click on expand menu of LED
js.executeScript("arguments[0].click();",driver.findElement(By.xpath(".//*[@id='LED']/i")));

// To click on expand menu of Building     
js.executeScript("arguments[0].click();",driver.findElement(By.xpath(".//*[@id='LED/Building']/i")));

// To click on TestFile under building      
js.executeScript("arguments[0].click();",driver.findElement(By.id("LED/Building/Test_anchor")));

    You can try like this in your application. Please let me know if any thing