test(aio): make e2e tests less flakey

closes angular#20117

Author: gkalpak

aio/e2e/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 import { SitePage } from './app.po';
 
 describe('site App', function() {
@@ -11,7 +11,7 @@ describe('site App', function() {
   });
 
   it('should show features text after clicking "Features"', () => {
-    page.getLink('features').click();
+    page.getTopMenuLink('features').click();
     expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
   });
 
@@ -21,7 +21,7 @@ describe('site App', function() {
     expect(page.getDocViewerText()).toMatch(/Tutorial: Tour of Heroes/i);
 
     // navigate to a different page
-    page.getLink('features').click();
+    page.getTopMenuLink('features').click();
     expect(page.getDocViewerText()).toMatch(/Progressive web apps/i);
 
     // Show the menu
@@ -42,6 +42,8 @@ describe('site App', function() {
   describe('scrolling to the top', () => {
     it('should scroll to the top when navigating to another page', () => {
       page.navigateTo('guide/security');
+      browser.sleep(1000);  // Wait for initial async scroll-to-top after `onDocRendered`.
+
       page.scrollToBottom();
       page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
 
@@ -51,6 +53,8 @@ describe('site App', function() {
 
     it('should scroll to the top when navigating to the same page', () => {
       page.navigateTo('guide/security');
+      browser.sleep(1000);  // Wait for initial async scroll-to-top after `onDocRendered`.
+
       page.scrollToBottom();
       page.getScrollTop().then(scrollTop => expect(scrollTop).toBeGreaterThan(0));
 
@@ -85,7 +89,7 @@ describe('site App', function() {
 
     it('should call ga with new URL on navigation', done => {
       let path: string;
-      page.getLink('features').click();
+      page.getTopMenuLink('features').click();
       page.locationPath()
         .then(p => path = p)
         .then(() => page.ga().then(calls => {

aio/e2e/app.po.ts

@@ -23,15 +23,15 @@ export class SitePage {
                   .filter(element => element.getText().then(text => pattern.test(text)))
                   .first();
   }
-  getLink(path) { return element(by.css(`a[href="${path}"]`)); }
+  getTopMenuLink(path) { return element(by.css(`aio-top-menu a[href="${path}"]`)); }
   ga() { return browser.executeScript('return window["ga"].q') as promise.Promise<any[][]>; }
   locationPath() { return browser.executeScript('return document.location.pathname') as promise.Promise<string>; }
 
   navigateTo(pageUrl = '') {
     return browser.get('/' + pageUrl)
       // We need to tell the index.html not to load the real analytics library
       // See the GA snippet in index.html
-      .then(() => browser.driver.executeScript('sessionStorage.setItem("__e2e__", true);'));
+      .then(() => browser.executeScript('sessionStorage.setItem("__e2e__", true);'));
   }
 
   getDocViewerText() {