How to select an element in ng-autocomplete in protractor?

Question

Passing text through

sendKeys("dublin,south Africa");

It is unable to select the first element in autocomplete.

sendKeys will only enter the text into the text field. You need to make your script to click on the required value from autocomplete dropdown. Can you provide more information on the problem you are currently facing? — Sudharsan Selvaraj, Nov 25 '16 at 10:51
i have a location field,when user enter a city name it will recognise and will give suggested city names.@SudharsanSelvaraj — Shiva, Nov 25 '16 at 12:13
So what you need to do is after entering the city name wait for the drop-down suggestion to be displayed.Then click on the required city name from the suggestion list. — Sudharsan Selvaraj, Nov 25 '16 at 12:23
yes.it should select the first one from list @SudharsanSelvaraj — Shiva, Nov 25 '16 at 12:31

score 1 · Accepted Answer · answered Dec 05 '16 at 04:55

issue resolved.

this.checkin = function(text,index){
        element( by.css('[ng-click="showMapTextBox2()"]') ).click();
        // element(by.model("location")).sendKeys(text);
        browser.actions()
        .mouseMove(element(by.model("location"))
        .sendKeys(text))
        .perform().then(function(){
        browser.sleep(500);
        // press the down arrow for the autocomplete item we want to choose
        for(i = 0; i < index ; i++){

            browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform();
        }
        browser.sleep(500);
        browser.actions().sendKeys(protractor.Key.ENTER).perform();
      });
        browser.sleep(3000);
    };

spec_test code:

post_text.checkin("new Delhi, India",1);

score 0 · Answer 2 · answered Nov 27 '16 at 06:50

0

Manually type what you want the test to perform and inspect the element of the autocomplete. You'll use protractor.ExpectedConditions to wait for that element then click on it after you send keys.

answered Nov 27 '16 at 06:50

doct03

316
3
9

still facing the same issue @doct03 – Shiva Nov 28 '16 at 06:38

score 0 · Answer 3 · answered Nov 30 '16 at 02:52

0

You need to do 2 things:

Enter text. Sometimes it is needed to press Tab to force the autocomplete to display options
Select appropriate drop down option

Example code in C#:

fieldElement.ClearAndSendKeys(partialValue);
fieldElement.SendKeys(Keys.Tab);
GetFieldDropdown(completeValue).Click();

GetFielDropdown() method details depending on your DOM. Here is a simplified example from a project I'm working on:

private IWebElement GetFieldDropdown(string dropdownValue)
{
    return FindElement(By.XPath($"//span[contains(.,'{dropdownValue}')]"));
}

Note that if there is a delay in autocomplete being displayed above code won't work unchanged (The FindElement will not return an element). You'll need to wait for the dropdown option to be displayed before clicking on it.

PS - partialValue and completeValue can be the same

answered Nov 30 '16 at 02:52

Ory Zaidenvorm

896
1
6
20

Thanks @Ory Zaidenvorm. written code like this. this.checkin = function(value){ var EC=protractor.ExpectedConditions; element( by.css('[ng-click="showMapTextBox2()"]') ).click(); var enterLocation = element(by.model("location")); browser.wait(EC.visibilityOf(enterLocation),10000,'enterLocation not found'); browser.sleep(5000); var ExpList = enterLocation.sendKeys(value); expect(ExpList.isDisplayed()).toBe(true); expect(ExpList.getText()).toEqual('Hyderabad, Telangana, India'); browser.sleep(4000); }; – Shiva Nov 30 '16 at 05:35
@Shiva I think you have an issue in the line var ExpList = enterLocation.sendKeys(value); You should SendKeys and then set (find) ExpList (same as I do in GetFileDropdown method in the example I supplied). – Ory Zaidenvorm Dec 04 '16 at 04:23

How to select an element in ng-autocomplete in protractor?

3 Answers3