Testing jQuery Autocomplete example

This page is about Testing Automation of jQuery Autocomplete example. By learning this content, you can test jQuery autocomplete using ajax by testing automation using JUnit and selenium.

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

About test cases

This test case is to do testing about jQuery autocomplete. The candidate is selected in the server side program, and jQuery Autocomplete part checks the candidates and shows in the autocomplete pane. This test checks the candidates.

jQuery autocomplete part

In this case, it is simple data and the autocomplete parts query the data to match the inputed string. Therefore this test is not essential, but to know how to handle the autocomplete from JUnit code using selenium is useful.

The evidense screen shot is stored at location below.


screenshots of autocomplete testing

Location of the source code

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

java package including testing class

The "JQueryAutoCompleteTest" 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 jquery autocomplete

In this test case, it does actions below.

  1. Access the test page
  2. input test into the text input
  3. The Autocomplete pane is shown by jQuery plugin
  4. Get the values of candidates shown in the Autocomplete pane

in order to execute this test, you have to fix the mouse position. It is because the autocomplete parts detects your mouse move action, and close it automatically.

Source code

The source code of this test case is below.

At first, go to the first page "", by calling WebDriver#get(), next, input text into the text box.

first page

Then autocomplete pane appears and it can get the candidates value by getCandidates() function.

autocomplete pane

The implementation of getCandidates() function is below.

The code is access in the xpath below.

The elements specified by this xpath does not exist when the autocomplete pane does not appear.

But when the pane appear, we can get this pane and the inner elements by this xpath.

Go to Top