title: No element found using locator error in protractor test with page object
body: <p>app.e2e.test.ts</p>
  
  <pre><code>import { browser } from 'protractor';
  import { App } from '../pageobjects/App'
  const BASE_URL = 'http://localhost:1344';
  
  describe('App', () =&gt; {
  
    let app: App;
  
    beforeEach(() =&gt; {
      browser.get(BASE_URL).then(function() {
        app = new App();
      });
    });
  
    it('should verify text on page', () =&gt; {
      browser.sleep(5000);
      console.log('after 1st sleep');
      app.name.getText().then(function(text: any) {
        browser.sleep(5000);
        console.log('text: ' + text);
      });
    });
  });
  </code></pre>
  
  <p>app.ts</p>
  
  <pre><code>import { $ } from 'protractor';
  export class App {
  
    public name: any;
  
    constructor() {
      console.log('constructor');
      this.name = $('#name');
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;h1 id="name"&gt;text from element&lt;/h1&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>[15:13:03] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
  Started
  constructor
  after 1st sleep
  F
  
  Failures:
  1) App should verify text on page
    Message:
      Failed: No element found using locator: By(css selector, #name)
    Stack:
      NoSuchElementError: No element found using locator: By(css selector, #name)
  </code></pre>