Testing jQuery jqTree plugin example

 This page is about testing automation for the jqTree widget example. By learning this content, you can handle the jqTree widget with the Selenium and JUnit code.

In order to understand what test, please take a look at jQuery jqTree plugin Control before reading this page.

About test cases

 This testing automation example has test cases below.

handle jqTree from selenium code

  • Open the tree node
  • Move a node after other node by dran and drop
  • Move a node before other node by dran and drop
  • Move a node inside other node by dran and drop
  • Click a node and show ajax dialog

 By learning these pattern, you can handle jqTree from your test code freely.

The evidense screen shot is stored at location below.

/[Project]/screenshots/jqtree

screenshots of jqtree testing

Those screenshots a taken by Selenium program using taking screenshot technique.

Location of the source code

The source code to test this is in "org.alinous.test.html5.jqparts" package.

jqtree testing java package

The "JqTreeTest" class has the testing code of the JUnit.

Initialize WebDriver of the Selenium

 At the first of the JUnit Test class, we initialize and connect the WebDriver, and make the download folder empty.

In this testcase, the actions below is done.

  1. Go to the test page using jqtree
  2. Open the closed nodes

Source code of this test case

 The source code of this test case is below.

This test code is to click the open or close icon at the left of the node, by calling toggleNodes() function. The source code is below.

Access the "a" tag in the specified "li" tag. The "li" tag has attribute whose name is "dataid", because we added this attribute to this jqtree in order to make this widget testable.

The JavaScript code is below.

On creating jqTree, specify the "onCreateLi" event handler and impliment like the source code.

Then we can specify the node to the data identifier and do operation to the node from JUnit and Selenium code.

Opened tree

In this testcase, the actions below is done.

  1. Go to the test page using jqtree
  2. Open the closed nodes
  3. Move a node after other node by drag and drop

Source code of this test case

 The source code of this test case is below.

This example does drag and drop, and before release the mouse button, taking screenshot like below.

move afer the jqtree node

In this testcase, the actions below is done.

  1. Go to the test page using jqtree
  2. Open the closed nodes
  3. Move a node before other node by drag and drop

Source code of this test case

 The source code of this test case is below.

This code is almost same with the test case before. The dirrerence is the position to release the mouse.

In this part, it release the mouse at 5 px virtical upper position from the element's default position.

jqtree move upper

In this testcase, the actions below is done.

  1. Go to the test page using jqtree
  2. Open the closed nodes
  3. Move a node inside other node by drag and drop

Source code of this test case

 The source code of this test case is below.

In this test case, Set the position to the middle of the target node. The technique of the coding is same with the last example.

jqtree move inside



Go to Top