How to handle autocomplete using selenium

[B Chandra]

I am facing some problem with autocomplete feaure of JS.
Main scenario is when I provide some input to one of the textfield on webpage which shows possible results, I have to select one of the location from list appeared. (Scenario is same as when you type query in Google, possible results appears and here I have to do main job. From list of possible results, i have to select one result)
How can I achieve this scenario?

--

Best regards,

B Chandra

Software Developer & Quality Analyst

CMD Software Solutions

Pune | Maharashtra| India 411045

(909)-629-0614

[Tarun Kumar]

If WebDriver is able to (which I believe it should in most normal case) invoke suggestion list then you should be able to interact with the list like you would be with other html elements using WebDriver.

[Dibyaranjan Kar]

Chandra,

You need to find out the dynamic loaded list element and find the link which you want to select. Use WebDriverWait to wait for the dynamic list element.

Thanks
Dibya

[darrell]

How you handle this depends on how it was implemented. For example, if
I execute the following:

import java.net.MalformedURLException;
import java.net.URL;
import java.util.Iterator;
import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.Capabilities;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

public class Test {

static String seleniumServer = "darrell-win7";
static String seleniumPort = "4444";
static String page = "http://www.google.ca";

public static void main(String[] args) throws MalformedURLException {
URL hub = new URL("http://" + seleniumServer + ":" + seleniumPort +
"/wd/hub");
Capabilities dc = DesiredCapabilities.internetExplorer();
WebDriver driver = new RemoteWebDriver(hub, dc);
driver.get(page);
WebElement w = driver.findElement(By.name("q"));
w.sendKeys("sc");
WebElement t = driver.findElement(By.className("gssb_m"));
List<WebElement> ss = t.findElements(By.tagName("span"));
Iterator<WebElement> i = ss.iterator();
while(i.hasNext()) {
WebElement s = i.next();
System.out.println(s.getText());
}
driver.close();
}
}

It will print out the suggestions for me entering "sc" into the Google
search. The reason it works is because it does the following:

- find the input field
- enter "sc" into the input field
- this should trigger the auto-complete
- search for the table with class "gssb_m" because this is the table
which holds the suggestions
- find all the SPAN elements in the table because the text for the
suggestions are in the SPAN tags.

Where as if I try to test the auto-complete at Kobo Books I have to do
the following:

import java.net.MalformedURLException;
import java.net.URL;
import java.util.Iterator;
import java.util.List;

import org.openqa.selenium.By;
import org.openqa.selenium.Capabilities;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;

public class Test {

static String seleniumServer = "darrell-win7";
static String seleniumPort = "4444";
static String page = "http://www.kobobooks.com";

public static void main(String[] args) throws MalformedURLException {
URL hub = new URL("http://" + seleniumServer + ":" + seleniumPort +
"/wd/hub");
Capabilities dc = DesiredCapabilities.internetExplorer();
WebDriver driver = new RemoteWebDriver(hub, dc);
driver.get(page);
WebElement w = driver.findElement(By.name("q"));
w.sendKeys("sc");
WebElement t = driver.findElement(By.cssSelector("ul[class~=ui-
autocomplete]"));
List<WebElement> ss;
do {
ss = t.findElements(By.tagName("li"));
} while(ss.size() == 0);
Iterator<WebElement> i = ss.iterator();
while(i.hasNext()) {
WebElement s = i.next();
System.out.println(s.getText());
}
driver.close();
}
}

The differences are:

- when I enter text into the input box there is a delay before the
auto-complete gets populated. So I have to have a do-while loop to
wait for the unordered list to get populated.
- the list of suggestions are placed in an unordered list (UL) rather
than a table. So I need to find all the LI elements and print their
text.

For your implementation simulate a human. A real user would type a few
characters, wait for the auto-complete then select from the list of
suggestions.

On Jul 8, 4:00 am, B Chandra <shekhar90...@gmail.com> wrote:
> I am facing some problem with autocomplete feaure of JS.
> Main scenario is when I provide some input to one of the textfield on
> webpage which shows possible results, I have to select one of the location
> from list appeared. (Scenario is same as when you type query in Google,
> possible results appears and here I have to do main job. From list of
> possible results, i have to select one result)
> How can I achieve this scenario?
>
> --
>
> Best regards,

> *B Chandra*

[Tarun Kumar]

@Darrell, excellent answer.

[B Chandra]

Thanks Darrel..!

I gone through your solution. It is just brilliant answer.i really impressed.

But still there is problem. Second solution for auto_complete is much useful for me.

In my scenario, I have to set wait for " each " Character, when I am providing Any String as Input. Same as in KOBOBOOKS. Then I have to set KeyDown Action for results appearing in auto_complete list. I used Actions Interface but not able to use 

keyDown / MouseOver action over list appeared. String entered successfully with Wait for each character and approximate results are also displayed, and execution stops there. No action is performed after list appeared.

I have to go through list with any action (KeyDown/MouseOver) and select one of the result in list. 

Do you have any solution for this? How do I select particular result among possible displayed results?

[gangi sashank]

i have scenario differs from both of these:

<input id="edit-subject-area" class="form-text form-autocomplete required" type="text" value="" size="100" name="subject_area" maxlength="128" autocomplete="OFF">

<div class="description">Please start typing to view available subject areas and select one .</div>
</div>

<input id="edit-subject-area-autocomplete" class="autocomplete" type="hidden" disabled="disabled" value="http://comp.realcme.com/cms/cmeicdnine/mastery">

how can i solve such issue where no "UL" or the google one is present

[Taqueem Jawed]

Hello Darell

Thanks for the detailed answer. buT still i am confused as how to find the class and the table name where the auto complete list is?

like in this code  WebElement t = driver.findElement(By.className("gssb_m")); 

gssb_m is the class name but i did not find it.

Your reply would be very much helpful

Thanks

[darrell]

It would again depend on the implementation. In the case of google search:

- go to www.google.com in Chrome

- enter 'this is' with auto-suggest enabled

- I see the auto-suggest appear

- I note one of the suggestions, e.g. "this is where i leave you"

- I right click the part I did not type, e.g. " where i leave you", and select Inspect

- In the Inspect window it will highlight the suggestion

- I can then view up the DOM to see the full table holding all the suggestions

I can do the same thing for my example on www.kobobooks.com. In the case of google search I find the class is currently "sbsb_b" and the kobobooks it is "search-autocomplete".