Testing jQuery jeditable example

This page is about Testing Automation of jQuery jeditable example. By lerning this example, you can understand how to handle elements automatically and dynamically generated by jQuery with JUnit and Selenium.

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

About test cases

This text case check jeditable's txt input and select input.

Testing automation for jeditable

jQuery jeditable plugin dynamically add or elase the dom of html in the web browser. This example is to get them and handle them from JUnit code using Selenium.

The evidense screen shot is stored at location below.

/[Project]/screenshots/jeditable

screenshot of testing jeditable

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.

testing jeditable java class

The "JQueryJeditableTest" 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.

Testing text input

In this test case, do actions below.

  1. Go to the test page
  2. Click the jeditable p tag
  3. input text
  4. Click OK button

Source code of this test case

The source code of this test case is below.

In this code, it calls inputJEditableText() function, and the implementation is below.

The jeditable jQuery plugin generate text area input when the p tag clicked. Therefore, it specifies it by xpath below.

This technique is same in specify button element. If the jeditable plugin is configured to have cancel button, the cancel button is the second element of the button's xpath.

Testing select input

In this test case, do actions below.

  1. Go to the test page
  2. Click the jeditable p tag
  3. input select from appeared select input form
  4. Click OK button

Source code of this test case

The source code of this test case is below.

In this code, it calls inputJEditableSelect() function, and the implementation is below.

In this case, the technique to specify the select element is same with one of "Testing text input". The jeditable plugin generate select input in the p tag instead of the text input.

Testing Ajax select input

In this test case, do actions below.

  1. Go to the test page
  2. Click the jeditable p tag
  3. input select from appeared ajax select input form
  4. Click OK button

Source code of this test case

The source code of this test case is below.

When it uses ajax, the way to test is same with one of normal select input.


Go to Top