6

I want to send a key to the md-autocomplete but I am not able to send key into text field , Find code below

HTML: 

 <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
      <span id="xyz" md-highlight-text="searchText">{{item.display}}</span>
    </md-autocomplete>

Protractor code :

  it('checking my test case', function() {
    browser.get('http://localhost:8080/#/home');

    var inputSearchTextBox = element(by.id("xyz"));
    inputSearchTextBox.sendKeys('Boston , us , 02120');
  });

I am getting below error :

Test checking my test case
   Message:
     NoSuchElementError: No element found using locator: By.id("xyz")
   Stacktrace:
     NoSuchElementError: No element found using locator: By.id("xyz")

Angular Material Link :

ms-AutoComplete Link

Is there any way I can send key to md-autocomplete tag text field

user2936008
  • 1,317
  • 5
  • 19
  • 42
  • On the [md-autocomplete demo page](https://material.angularjs.org/latest/demo/autocomplete), I can successfully send keys to the autocomplete input: `element(by.css("md-autocomplete input#input-15")).sendKeys("California");`.. – alecxe Dec 01 '15 at 03:15
  • What is input#input-15 ? – user2936008 Dec 01 '15 at 03:40
  • It is the underlying input that you can find inside the `md-autocomplete`. – alecxe Dec 01 '15 at 03:46
  • NoSuchElementError: No element found using locator: By.cssSelector("md-autocomplete input#input-15") --> I got this error – user2936008 Dec 01 '15 at 04:17
  • Interesting. Could you show the complete test you are executing and the protractor config? Thanks. – alecxe Dec 01 '15 at 14:33

1 Answers1

5

You can add an id to your md-input-container with md-input-id attribute in your html. For instance :

 <md-autocomplete md-input-id="xyz" md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
      <span md-highlight-text="searchText">{{item.display}}</span>
 </md-autocomplete>

After that, you can access and use it with:

var myElt = element(by.css("md-autocomplete input#xyz"));
myElt.clear();
myElt.sendKeys("blabla");
stephaneb
  • 127
  • 5