Protractor Test Cases by sending key to md-auto-complete in Angular material

Question

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

Answer 1

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