how to select an element from a search menu?

Andrei Gourianov

unread,

Feb 4, 2016, 4:30:36 PM2/4/16

to webdriver

I have a search text-box.
Typing there gives searchable items appear.
Clicking at these items opens certain pages
I am able to click at an item using driver.find...click();, but it doesn't do anything.
I have to somehow select the item, highlight it and when it selected click on it.
How can I do it?

</div>

Auto Generated Inline Image 1

lkat...@tripodtech.net

unread,

Feb 5, 2016, 6:33:10 AM2/5/16

to webdriver

You can type the text in search-box, check for visibility of your select and then select it by clicking. Try the below code :

      driver.findElement(By.xpath(// path to search box)).sendKeys("Your Text");
      driver.findElement(By.id("t5013")).isDisplayed();
      driver.findElement(By.id("t5013")).click();

Bill Ross

unread,

Feb 5, 2016, 7:10:35 AM2/5/16

to webd...@googlegroups.com

One problem you may encounter with id's like 't5013' is that your own people may be generating them on the fly to prevent hackers from doing what you are trying to do. If this is the case, things get more complicated, as you have to either use whitebox methods to control or suppress the flyness of it, or work around it somehow.

--
You received this message because you are subscribed to the Google Groups "webdriver" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webdriver+...@googlegroups.com.
To post to this group, send email to webd...@googlegroups.com.
Visit this group at https://groups.google.com/group/webdriver.
For more options, visit https://groups.google.com/d/optout.

darrell grainger

unread,

Feb 5, 2016, 12:01:13 PM2/5/16

to webdriver

The UI looks like a SELECT element but the DOM snippet clearly shows they are using DIV elements. In order to make a set of DIV elements behave like a SELECT with OPTION elements would require some Javascript. This means they are most likely using a library which mimics a SELECT. How that library implemented things will determine how you interact with it. Essentially, with a SELECT you would click the SELECT, it opens to show the OPTION elements. You click the OPTION element you want to choose.

With a library that mimics the SELECT element things work very differently. It is probably started with clicking the main DIV element. This element probably has Javascript attached to it. So clicking it will trigger some Javascript. This might change the DOM. Once the DOM has changed you then have to find the element the user sees and clicks, e.g. the T5013 DIV. The DIV under the main DIV might not be the same DIV the user sees on the screen. I've seen libraries where clicking the main DIV makes a real SELECT visible. Then clicking the OPTION triggers updating the DIV list. Essentially, introducing Javascript means things behaviour very differently than a normal SELECT.

If you know which library they are using or can find the 'other' stuff, in the DOM, connected to the menu that might help.

darrell grainger

unread,

Feb 6, 2016, 2:01:18 PM2/6/16

to webdriver

Figured out from the tt-menu and tt-dataset that the library being used to the Twitter Typeahead library. They have an example at https://twitter.github.io/typeahead.js/examples/. When you start typing in the input field, what is really happening is:

Set focus on the element with class='tt-input'
Send keystrokes to the element with focus (in your case you send "t5")
This will cause the elements with class='tt-suggestion tt-selectable' to become visible (in your case T5, T5013, T5007, T5004 and T5006)
You then want to click the desired suggestion (let's say you want T5013 then you want id='t5013')
To confirm you selected the correct element you can get the element and check the value attribute

For the example website it is actually a little harder because they don't have the id attributes but it might look something like this:

driver.get("https://twitter.github.io/typeahead.js/examples/");
driver.findElement(By.cssSelector("#the-basics .typeahead.tt-input")).click();
driver.findElement(By.cssSelector("#the-basics input.tt-input")).sendKeys("Ca");
driver.findElement(By.cssSelector("#the-basics div.tt-menu .tt-suggestion:nth-of-type(1)")).click();
WebElement we = driver.findElement(By.cssSelector("#the-basics input.tt-input"));
assertEquals("California", we.getAttribute("value"));

Here I sent the string "Ca", selected the first suggestion (nth-of-type(1)) and confirmed it was "California".

On Thursday, 4 February 2016 16:30:36 UTC-5, Andrei Gourianov wrote:

Reply all

Reply to author

Forward