Transactional tests by sending a key to md-auto-complete in Angular stuff

Question

I want to send the key to md-autocomplete, but I can not send the key to the text box, find the 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> 

Push 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 get 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 a way to send the key to the text field of the md-autocomplete tag

Answer 1

You can add id to your md-input container with the 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");