17

I have a test case that requires typing in a partial value into an ajax based textfield and verifying the list has the expected content. If it does, select the content. Any idea how to make this work?

1
  • You mean auto-complete as an AJAX feature, not as the browser built in functionality?
    – guerda
    Mar 20, 2009 at 7:21

17 Answers 17

17

The type command may not be enough to trigger the autocomplete. Dave Webb's suggestions are otherwise spot on. My only addition would be that you might need the typeKeys command, which causes slightly different JavaScript events to be fired, which may be more likely to trigger the autocomplete widget.

0
9

I'd do this as follows:

  • type to enter the value in the text field.
  • waitForTextPresent or verifyTextPresent to check the autocomplete content
  • click or mouseDown to click on the item in the autocomplete list

The trick is going to be making the final click be just in the right place. You should be able to use an XPath expression that searches for the text you're expecting to find it.

7

For WebDriver, try this

The below code is for searching a text automatically from the auto suggest; mainly for a list item.

driver.findElement(By.id("your searchBox")).sendKeys("your partial keyword");
Thread.sleep(3000);
List <WebElement> listItems = driver.findElements(By.xpath("your list item locator"));
listItems.get(0).click();
driver.findElement(By.id("your searchButton")).click();
2
  • Where do I find the locator from ?
    – Siddharth
    Nov 26, 2016 at 16:14
  • How does the locator get defined ?
    – Siddharth
    Dec 6, 2016 at 17:14
3

I used following sequence in IDE,

  1. typeKeys
  2. waitForTextPresent
  3. mouseOver
  4. clickAt

and worked well

3

I recently wrote a HOWTO on this very topic - using Selenium to test an AJAX-driven JQuery autocomplete menu:

0
2

Your question is slightly ambigious.

Most browsers keep a value cache that is based on the name of the field: This is the value that is being suggested as autocompletion by your browser even though you may never have visited the site before. This feature is non-standard across all browsers, and there's going to be no standard way for selenium to detect/analyze this. You can still do it, but you'll have to make javascript functions that determine the values yourself. Then you can use "eval" in selenium to execute these functions. I have not seen any js libraries that can tell you these values in a cross-browser compatible way.

The other alternative is that you use ajax to do a server-side submit of the partially entered value. In this case it's just a matter of typing the values into the textbox and asserting that the expected values turn up. Normally the autocomplete suggestions show up in some layer on the client side.

1
  • I see why my question could be ambiguous but what i was driving at is in the second part of your answer. In my case, i have an ajax-based textfield that provides user with options based on partial entered value. Can you use selenium to capture these options and verify the expected value is in it?
    – Afamee
    Mar 19, 2009 at 17:07
1

I found I needed to do a focus on the field before doing typeKeys to get it to work.

0
1

This may not work for everyone, but I simply added in a method that allowed me to type in characters with a delay.

Actions builder = new Actions(this.webDriver);
    WebElement element = this.getWebElement();
    for (char c : value.toCharArray()) {
        builder = builder.sendKeys(element, c + "");
        builder.pause(100);
    }

    builder.build().perform();

I then found the item that I wanted to click (

resultsElement.findElement(By.xpath("//li[.='" + valueLabel + "']"))

Where container is the resultsElement is the WebElement that contains the result set and value label is the value I want to click.

Again, it may not work for all, but it worked for me and I thought it prudent to share.

0

Please use typeKeys instead of type. Also use mouseDown instead of click. It works fine.

0

Patrick's answer is definitely important, I also found that focus and mouseDown is needed in the last versions of Jquery UI. I recorded a video of a test so that you can see it running in Sauce Labs: https://saucelabs.com/jobs/ad8c561be39bb7a42c9bb3a063214c95

0

We had some problems with typeKeys. sendKeys seems to become the final solution, but it is still experimental. From the reference:

This command is experimental. It may replace the typeKeys command in the future.

For those who are interested in the details, unlike the typeKeys command, which tries to fire the keyDown, the keyUp and the keyPress events, this command is backed by the atoms from Selenium 2 and provides a much more robust implementation that will be maintained in the future.

0

In the help text for the typeKeys command it says:

In some cases, you may need to use the simple "type" command to set the value of the field and then the "typeKeys" command to send the keystroke events corresponding to what you just typed.

So use this combination of

type(selector, text);
typeKeys(selector, text);

This seems to work well.

0

Sometime the TypeKeys Doesn't work. At this time you can use keyDown

click the inputbox and type value and keyDown in the box.

0

I was able to solve this by using the below function: The below function takes the text you want to select as a parameter. Ex: If you want to select "javascript", just type "java" in your textbox & pass the text you want to select, in this specific case it is "javascript".

  public void selectOptionWithText(String textToSelect) {
    try {
       //Add the below sleep if necessary  
       // Thread.sleep(1000);

 WebElement autoOptions = driver.findElement(By.className("autocomplete"));

        List<WebElement> optionsToSelect = autoOptions().findElements(By.tagName("div"));
        for (WebElement option : optionsToSelect) {
            if (option.getText().equals(textToSelect)) {
                System.out.println("Trying to select: " + textToSelect);
                option.click();
                break;
            }
        }
    }
    catch(Exception e){
        System.out.println("Error");
    }
}
0

A little variation using Prashanth's answer:

    /**
 * Selects the element at position idx from the autocomplete combo, considering the partialKeyword
 * @param driver
 * @param element
 * @param partialKeyword
 * @param idx
 * @throws InterruptedException
 */
public static void selectAutoCompleteValue(WebDriver driver, WebElement element, String partialKeyword, Integer idx) throws InterruptedException{
    element.sendKeys(partialKeyword);
    Thread.sleep(1000);
    List <WebElement> listItems = driver.findElements(By.cssSelector(".ui-autocomplete-item.ui-autocomplete-list-item"));
    listItems.get(idx).click();
}

Hope this helps!

0

I used these commands in Selenium IDE 2.9.1 Version for the autocomplete text field. sendKeys (locator,value) clickAt(locator, coordString) click(locator)

0

There are few answers with code here. So, I will do my contribution.

The code that I'm using to select an item in the autocomplete component from PrimeFaces 2.2:

driver.findElement(By.id(codigoBanco_input)).sendKeys("text");
waitForElementLocated(By.cssSelector(listItensSelector), 5);
List<WebElement> listItems = driver.findElements(By.cssSelector(listItensSelector));
Actions builder = new Actions(driver);
builder.moveToElement(listItems.get(0)).build().perform();
WebDriverWait wait = new WebDriverWait(driver, 5); 

wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector(itemSelector)));
        driver.findElement(By.cssSelector(itemSelector)).click();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.