Can selenium handle autocomplete?

问题:

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:

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.

回答2:

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.

回答3:

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();

回答4:

I used following sequence in IDE,

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

and worked well

回答5:

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

回答6:

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.

回答7:

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

回答8:

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.

回答9:

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

回答10:

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

回答11:

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.

回答12:

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.

回答13:

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

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

回答14:

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");
    }
}

回答15:

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!

回答16:

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

回答17:

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();