Protractor sendKeys returns NoSuchElementError

Question

I am learning Protractor and am trying to sendKeys in an input field in the angularjs.org page but I am getting this error:

NoSuchElementError: No element found using locator: By.model("projectList.search")

Here is my code:

describe ("Search list", function() {
    it ("should search for jQuery and display 1 result", function() {
        browser.get("https://angularjs.org/");
        element(by.model("projectList.search")).sendKeys("jQuery");
    });
});

I tried using by.id and got the same error. I am assuming that this is caused because element is not visible yet. When I add browser.pause() and go step by step (slowly), the test passes. What is the best way to solve this?

Related HTML from angularjs.org

<input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
       placeholder="Search">
<table>
  <thead>
  <tr>
    <th>Project</th>
    <th>Description</th>
    <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
    <td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
    <td>{{project.description}}</td>
    <td>
      <a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
    </td>
  </tr>
  </tbody>
</table>

Answer 1

I managed to find a small library called waitReady.js and it has solved my problem. Here is my final code,

require './waitReady.js')
var searchBtnElm = element(by.model('projectList.search'));
searchBtnElm.waitReady().then(function() {
      searchBtnElm.sendKeys("myText");
});

Answer 2

You can try something like that :

var elementSelector = by.model("projectList.search");
browser.driver.isElementPresent(elementSelector).then(function(isPresent){
    element(elementSelector).sendKeys("jQuery");
});

See protractor docs for more usefull functions

Answer 3

Is waitReady.js really works for you ?
Have tried to use it to click on stale elements but sometimes anyway exceptions occurs.

Have written function to click on element:

function clickWait(element) {
    (element).waitReady().then(function () {
        return element.click();
    });
};

And invoke it like that:

clickWait(element);

framework: jasmine2