test(docs-infra): disable the Selenium Promise Manager in docs examples e2e tests (#39818)

This commit disables the Selenium Promise Manager when running e2e tests
for docs examples in order to more closely align them with new apps
created with CLI v11. This change requires that any async operations in
tests are handled explicitly (e.g. using `async/await` or
`Promise#then()`).

PR Close #39818

aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts

@@ -2,18 +2,16 @@ import { browser, element, by } from 'protractor';
 
 describe('Accessibility example e2e tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display Accessibility Example', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Accessibility Example');
   });
 
-  it('should display Accessibility Example', () => {
+  it('should take a number and change progressbar width', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
+    await element(by.css('input')).sendKeys('16');
-  });
+    expect(await element(by.css('input')).getAttribute('value')).toEqual('16');
-
+    expect(await element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
-  it('should take a number and change progressbar width', () => {
-    element(by.css('input')).sendKeys('16');
-    expect(element(by.css('input')).getAttribute('value')).toEqual('16');
-    expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
   });
 
 });

aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts

@@ -2,15 +2,13 @@ import { browser, element, by } from 'protractor';
 
 describe('AngularJS to Angular Quick Reference Tests', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
+
+  it('should display no poster images after bootstrap', async () => {
+    await testImagesAreDisplayed(false);
   });
 
-  it('should display no poster images after bootstrap', () => {
+  it('should display proper movie data', async () => {
-    testImagesAreDisplayed(false);
-  });
-
-  it('should display proper movie data', () => {
     // We check only a few samples
     const expectedSamples: any[] = [
       {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
@@ -34,8 +32,8 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
 
       // Check element attribute or text
       const valueToCheck = sample.attr
-        ? elementToCheck.getAttribute(sample.attr)
+        ? await elementToCheck.getAttribute(sample.attr)
-        : elementToCheck.getText();
+        : await elementToCheck.getText();
 
       // Test for equals/contains/match
       if (sample.contains) {
@@ -48,65 +46,64 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     }
   });
 
-  it('should display images after Show Poster', () => {
+  it('should display images after Show Poster', async () => {
-    testPosterButtonClick('Show Poster', true);
+    await testPosterButtonClick('Show Poster', true);
   });
 
-  it('should hide images after Hide Poster', () => {
+  it('should hide images after Hide Poster', async () => {
-    testPosterButtonClick('Hide Poster', false);
+    await testPosterButtonClick('Hide Poster', false);
   });
 
-  it('should display no movie when no favorite hero is specified', () => {
+  it('should display no movie when no favorite hero is specified', async () => {
-    testFavoriteHero(null, 'Please enter your favorite hero.');
+    await testFavoriteHero(null, 'Please enter your favorite hero.');
   });
 
-  it('should display no movie for Magneta', () => {
+  it('should display no movie for Magneta', async () => {
-    testFavoriteHero('Magneta', 'No movie, sorry!');
+    await testFavoriteHero('Magneta', 'No movie, sorry!');
   });
 
-  it('should display a movie for Dr Nice', () => {
+  it('should display a movie for Dr Nice', async () => {
-    testFavoriteHero('Dr Nice', 'Excellent choice!');
+    await testFavoriteHero('Dr Nice', 'Excellent choice!');
   });
 
-  function testImagesAreDisplayed(isDisplayed: boolean) {
+  async function testImagesAreDisplayed(isDisplayed: boolean) {
     const expectedMovieCount = 3;
 
     const movieRows = getMovieRows();
-    expect(movieRows.count()).toBe(expectedMovieCount);
+    expect(await movieRows.count()).toBe(expectedMovieCount);
     for (let i = 0; i < expectedMovieCount; i++) {
       const movieImage = movieRows.get(i).element(by.css('td > img'));
-      expect(movieImage.isDisplayed()).toBe(isDisplayed);
+      expect(await movieImage.isDisplayed()).toBe(isDisplayed);
     }
   }
 
-  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+  async function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
     const posterButton = element(by.css('app-movie-list tr > th > button'));
-    expect(posterButton.getText()).toBe(expectedButtonText);
+    expect(await posterButton.getText()).toBe(expectedButtonText);
 
-    posterButton.click().then(() => {
+    await posterButton.click();
-      testImagesAreDisplayed(isDisplayed);
+    await testImagesAreDisplayed(isDisplayed);
-    });
   }
 
   function getMovieRows() {
     return element.all(by.css('app-movie-list tbody > tr'));
   }
 
-  function testFavoriteHero(heroName: string, expectedLabel: string) {
+  async function testFavoriteHero(heroName: string, expectedLabel: string) {
     const movieListComp = element(by.tagName('app-movie-list'));
     const heroInput = movieListComp.element(by.tagName('input'));
     const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
     const resultLabel = movieListComp.element(by.css('span > p'));
 
-    heroInput.clear().then(() => {
+    await heroInput.clear();
-      heroInput.sendKeys(heroName || '');
+    await heroInput.sendKeys(heroName || '');
-      expect(resultLabel.getText()).toBe(expectedLabel);
+
+    expect(await resultLabel.getText()).toBe(expectedLabel);
     if (heroName) {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+      expect(await favoriteHeroLabel.isDisplayed()).toBe(true);
-        expect(favoriteHeroLabel.getText()).toContain(heroName);
+      expect(await favoriteHeroLabel.getText()).toContain(heroName);
     } else {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+      expect(await favoriteHeroLabel.isDisplayed()).toBe(false);
-      }
+    }
-    });
   }
 });

aio/content/examples/animations/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, ExpectedConditions as EC } from 'protractor';
+import { browser } from 'protractor';
 import { logging } from 'selenium-webdriver';
 import * as openClose from './open-close.po';
 import * as statusSlider from './status-slider.po';
@@ -18,9 +18,7 @@ describe('Animation Tests', () => {
   const filterHref = getLinkById('heroes');
   const heroGroupsHref = getLinkById('hero-groups');
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Open/Close Component', () => {
     const closedHeight = '100px';
@@ -28,7 +26,7 @@ describe('Animation Tests', () => {
 
     beforeAll(async () => {
       await openCloseHref.click();
-      sleepFor();
+      await sleepFor();
     });
 
     it('should be open', async () => {
@@ -84,7 +82,7 @@ describe('Animation Tests', () => {
 
     beforeAll(async () => {
       await statusSliderHref.click();
-      sleepFor(2000);
+      await sleepFor(2000);
     });
 
     it('should be inactive with a blue background', async () => {
@@ -125,7 +123,7 @@ describe('Animation Tests', () => {
   describe('Toggle Animations Component', () => {
     beforeAll(async () => {
       await toggleHref.click();
-      sleepFor();
+      await sleepFor();
     });
 
     it('should disabled animations on the child element', async () => {
@@ -143,7 +141,7 @@ describe('Animation Tests', () => {
   describe('Enter/Leave Component', () => {
     beforeAll(async () => {
       await enterLeaveHref.click();
-      sleepFor(100);
+      await sleepFor(100);
     });
 
     it('should attach a flyInOut trigger to the list of items', async () => {
@@ -169,7 +167,7 @@ describe('Animation Tests', () => {
   describe('Auto Calculation Component', () => {
     beforeAll(async () => {
       await autoHref.click();
-      sleepFor(0);
+      await sleepFor(0);
     });
 
     it('should attach a shrinkOut trigger to the list of items', async () => {
@@ -193,7 +191,7 @@ describe('Animation Tests', () => {
   describe('Filter/Stagger Component', () => {
     beforeAll(async () => {
       await filterHref.click();
-      sleepFor();
+      await sleepFor();
     });
 
     it('should attach a filterAnimations trigger to the list container', async () => {
@@ -220,7 +218,7 @@ describe('Animation Tests', () => {
   describe('Hero Groups Component', () => {
     beforeAll(async () => {
       await heroGroupsHref.click();
-      sleepFor(300);
+      await sleepFor(300);
     });
 
     it('should attach a flyInOut trigger to the list of items', async () => {
@@ -245,5 +243,3 @@ describe('Animation Tests', () => {
     });
   });
 });
-
-

aio/content/examples/architecture/e2e/src/app.e2e-spec.ts

@@ -14,12 +14,12 @@ describe('Architecture', () => {
 
   beforeAll(() => browser.get(''));
 
-  it(`has title '${expectedTitle}'`, () => {
+  it(`has title '${expectedTitle}'`, async () => {
-    expect(browser.getTitle()).toEqual(expectedTitle);
+    expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h2 '${expectedH2}'`, () => {
+  it(`has h2 '${expectedH2}'`, async () => {
-    const h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+    const h2 = await element.all(by.css('h2')).map((elt: any) => elt.getText());
     expect(h2).toEqual(expectedH2);
   });
 
@@ -31,14 +31,14 @@ function heroTests() {
 
   const targetHero: Hero = { id: 2, name: 'Dr Nice' };
 
-  it('has the right number of heroes', () => {
+  it('has the right number of heroes', async () => {
     const page = getPageElts();
-    expect(page.heroes.count()).toEqual(3);
+    expect(await page.heroes.count()).toEqual(3);
   });
 
-  it('has no hero details initially', () => {
+  it('has no hero details initially', async () => {
     const page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+    expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 
   it('shows selected hero details', async () => {
@@ -51,7 +51,7 @@ function heroTests() {
 
   it(`shows updated hero name in details`, async () => {
     const input = element.all(by.css('input')).first();
-    input.sendKeys(nameSuffix);
+    await input.sendKeys(nameSuffix);
     const page = getPageElts();
     const hero = await heroFromDetail(page.heroDetail);
     const newName = targetHero.name + nameSuffix;
@@ -61,15 +61,15 @@ function heroTests() {
 }
 
 function salesTaxTests() {
-  it('has no sales tax initially', () => {
+  it('has no sales tax initially', async () => {
     const page = getPageElts();
-    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
+    expect(await page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
   });
 
   it('shows sales tax', async () => {
     const page = getPageElts();
-    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
+    await page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
-    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
+    expect(await page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
   });
 }
 

aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts

@@ -2,33 +2,34 @@ import { browser, element, by } from 'protractor';
 
 describe('Attribute binding example', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display Property Binding with Angular', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
   });
 
-  it('should display Property Binding with Angular', () => {
+  it('should display a table', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
+    expect(await element.all(by.css('table')).isPresent()).toBe(true);
   });
 
-  it('should display a table', () => {
+  it('should display an Aria button', async () => {
-    expect(element.all(by.css('table')).isPresent()).toBe(true);
+    expect(await element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
   });
 
-  it('should display an Aria button', () => {
+  it('should display a blue background on div', async () => {
-    expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
+    const div = element.all(by.css('div')).get(1);
+    expect(await div.getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
   });
 
-  it('should display a blue background on div', () => {
+  it('should display a blue div with a red border', async () => {
-    expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
+    const div = element.all(by.css('div')).get(1);
+    expect(await div.getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
   });
 
-  it('should display a blue div with a red border', () => {
+  it('should display a div with many classes', async () => {
-    expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
+    const div = element.all(by.css('div')).get(1);
-  });
+    expect(await div.getAttribute('class')).toContain('special');
-
+    expect(await div.getAttribute('class')).toContain('clearance');
-  it('should display a div with many classes', () => {
-    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
-    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
   });
 
 });

aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts

@@ -4,27 +4,25 @@ describe('Attribute directives', () => {
 
   const title = 'My First Attribute Directive';
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
+
+  it(`should display correct title: ${title}`, async () => {
+    expect(await element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it(`should display correct title: ${title}`, () => {
+  it('should be able to select green highlight', async () => {
-    expect(element(by.css('h1')).getText()).toEqual(title);
-  });
-
-  it('should be able to select green highlight', () => {
     const highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
     const lightGreen = 'rgba(144, 238, 144, 1)';
     const getBgColor = () => highlightedEle.getCssValue('background-color');
 
-    expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
+    expect(await highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
 
     const greenRb = element.all(by.css('input')).get(0);
-    greenRb.click();
+    await greenRb.click();
-    browser.actions().mouseMove(highlightedEle).perform();
+    await browser.actions().mouseMove(highlightedEle).perform();
 
     // Wait for up to 4s for the background color to be updated,
     // to account for slow environments (e.g. CI).
-    browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 4000);
+    await browser.wait(async () => await getBgColor() === lightGreen, 4000);
   });
 });

aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts

@@ -7,31 +7,31 @@ describe('Binding syntax e2e tests', () => {
 
 
   // helper function used to test what's logged to the console
-  async function logChecker(button, contents) {
+  async function logChecker(contents) {
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
     expect(messages.length).toBeGreaterThan(0);
   }
 
 
-  it('should display Binding syntax', () => {
+  it('should display Binding syntax', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Binding syntax');
+    expect(await element(by.css('h1')).getText()).toEqual('Binding syntax');
   });
 
-  it('should display Save button', () => {
+  it('should display Save button', async () => {
-    expect(element.all(by.css('button')).get(0).getText()).toBe('Save');
+    expect(await element.all(by.css('button')).get(0).getText()).toBe('Save');
   });
 
-  it('should display HTML attributes and DOM properties', () => {
+  it('should display HTML attributes and DOM properties', async () => {
-    expect(element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties');
+    expect(await element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties');
   });
 
-  it('should display 1. Use the inspector...', () => {
+  it('should display 1. Use the inspector...', async () => {
-    expect(element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector');
+    expect(await element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector');
   });
 
-  it('should display Disabled property vs. attribute', () => {
+  it('should display Disabled property vs. attribute', async () => {
-    expect(element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute');
+    expect(await element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute');
   });
 
 
@@ -39,36 +39,36 @@ describe('Binding syntax e2e tests', () => {
     const attributeButton = element.all(by.css('button')).get(1);
     await attributeButton.click();
     const contents = 'Sarah';
-    logChecker(attributeButton, contents);
+    await logChecker(contents);
   });
 
   it('should log a message including Sarah for DOM property', async () => {
     const DOMPropertyButton = element.all(by.css('button')).get(2);
     await DOMPropertyButton.click();
     const contents = 'Sarah';
-    logChecker(DOMPropertyButton, contents);
+    await logChecker(contents);
   });
 
   it('should log a message including Sally for DOM property', async () => {
     const DOMPropertyButton = element.all(by.css('button')).get(2);
     const input = element(by.css('input'));
-    input.sendKeys('Sally');
+    await input.sendKeys('Sally');
     await DOMPropertyButton.click();
     const contents = 'Sally';
-    logChecker(DOMPropertyButton, contents);
+    await logChecker(contents);
   });
 
   it('should log a message that Test Button works', async () => {
     const testButton = element.all(by.css('button')).get(3);
     await testButton.click();
     const contents = 'Test';
-    logChecker(testButton, contents);
+    await logChecker(contents);
   });
 
   it('should toggle Test Button disabled', async () => {
     const toggleButton = element.all(by.css('button')).get(4);
     await toggleButton.click();
     const contents = 'true';
-    logChecker(toggleButton, contents);
+    await logChecker(contents);
   });
 });

aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts

@@ -7,8 +7,8 @@ describe('feature-modules App', () => {
     page = new AppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display message saying app works', async () => {
-    page.navigateTo();
+    await page.navigateTo();
-    expect(page.getTitleText()).toEqual('app works!');
+    expect(await page.getTitleText()).toEqual('app works!');
   });
 });

aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts

@@ -2,75 +2,72 @@ import { browser, element, by } from 'protractor';
 
 describe('Built-in Directives', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should have title Built-in Directives', () => {
+  it('should have title Built-in Directives', async () => {
     const title = element.all(by.css('h1')).get(0);
-    expect(title.getText()).toEqual('Built-in Directives');
+    expect(await title.getText()).toEqual('Built-in Directives');
   });
 
   it('should change first Teapot header', async () => {
     const firstLabel = element.all(by.css('p')).get(0);
     const firstInput = element.all(by.css('input')).get(0);
 
-    expect(firstLabel.getText()).toEqual('Current item name: Teapot');
+    expect(await firstLabel.getText()).toEqual('Current item name: Teapot');
-    firstInput.sendKeys('abc');
+    await firstInput.sendKeys('abc');
-    expect(firstLabel.getText()).toEqual('Current item name: Teapotabc');
+    expect(await firstLabel.getText()).toEqual('Current item name: Teapotabc');
   });
 
 
-  it('should modify sentence when modified checkbox checked', () => {
+  it('should modify sentence when modified checkbox checked', async () => {
     const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1);
     const modifiedSentence = element.all(by.css('div')).get(1);
 
-    modifiedChkbxLabel.click();
+    await modifiedChkbxLabel.click();
-    expect(modifiedSentence.getText()).toContain('modified');
+    expect(await modifiedSentence.getText()).toContain('modified');
   });
 
-  it('should modify sentence when normal checkbox checked', () => {
+  it('should modify sentence when normal checkbox checked', async () => {
     const normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4);
     const normalSentence = element.all(by.css('div')).get(7);
 
-    normalChkbxLabel.click();
+    await normalChkbxLabel.click();
-    expect(normalSentence.getText()).toContain('normal weight and, extra large');
+    expect(await normalSentence.getText()).toContain('normal weight and, extra large');
   });
 
-  it('should toggle app-item-detail', () => {
+  it('should toggle app-item-detail', async () => {
     const toggleButton = element.all(by.css('button')).get(3);
     const toggledDiv = element.all(by.css('app-item-detail')).get(0);
 
-    toggleButton.click();
+    await toggleButton.click();
-    expect(toggledDiv.isDisplayed()).toBe(true);
+    expect(await toggledDiv.isDisplayed()).toBe(true);
   });
 
-  it('should hide app-item-detail', () => {
+  it('should hide app-item-detail', async () => {
     const hiddenMessage = element.all(by.css('p')).get(11);
     const hiddenDiv = element.all(by.css('app-item-detail')).get(2);
 
-    expect(hiddenMessage.getText()).toContain('in the DOM');
+    expect(await hiddenMessage.getText()).toContain('in the DOM');
-    expect(hiddenDiv.isDisplayed()).toBe(true);
+    expect(await hiddenDiv.isDisplayed()).toBe(true);
   });
 
-  it('should have 10 lists each containing the string Teapot', () => {
+  it('should have 10 lists each containing the string Teapot', async () => {
     const listDiv = element.all(by.cssContainingText('.box', 'Teapot'));
-    expect(listDiv.count()).toBe(10);
+    expect(await listDiv.count()).toBe(10);
   });
 
-  it('should switch case', () => {
+  it('should switch case', async () => {
     const tvRadioButton = element.all(by.css('input[type="radio"]')).get(3);
     const tvDiv = element(by.css('app-lost-item'));
 
     const fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4);
     const fishbowlDiv = element(by.css('app-unknown-item'));
 
-    tvRadioButton.click();
+    await tvRadioButton.click();
-    expect(tvDiv.getText()).toContain('Television');
+    expect(await tvDiv.getText()).toContain('Television');
-    fishbowlRadioButton.click();
+    await fishbowlRadioButton.click();
-    expect(fishbowlDiv.getText()).toContain('mysterious');
+    expect(await fishbowlDiv.getText()).toContain('mysterious');
   });
 
-
 });
 

aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts

@@ -1,18 +1,16 @@
 import { browser, element, by } from 'protractor';
 
 describe('Built Template Functions Example', () => {
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should have title Built-in Template Functions', () => {
+  it('should have title Built-in Template Functions', async () => {
     const title = element.all(by.css('h1')).get(0);
-    expect(title.getText()).toEqual('Built-in Template Functions');
+    expect(await title.getText()).toEqual('Built-in Template Functions');
   });
 
-  it('should display $any( ) in h2', () => {
+  it('should display $any( ) in h2', async () => {
     const header = element(by.css('h2'));
-    expect(header.getText()).toContain('$any( )');
+    expect(await header.getText()).toContain('$any( )');
   });
 
 });

aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts

@@ -10,13 +10,13 @@ describe('Component Communication Cookbook Tests', () => {
     const heroNames = ['Dr IQ', 'Magneta', 'Bombasto'];
     const masterName = 'Master';
 
-    it('should pass properties to children properly', () => {
+    it('should pass properties to children properly', async () => {
       const parent = element(by.tagName('app-hero-parent'));
       const heroes = parent.all(by.tagName('app-hero-child'));
 
       for (let i = 0; i < heroNames.length; i++) {
-        const childTitle = heroes.get(i).element(by.tagName('h3')).getText();
+        const childTitle = await heroes.get(i).element(by.tagName('h3')).getText();
-        const childDetail = heroes.get(i).element(by.tagName('p')).getText();
+        const childDetail = await heroes.get(i).element(by.tagName('p')).getText();
         expect(childTitle).toEqual(heroNames[i] + ' says:');
         expect(childDetail).toContain(masterName);
       }
@@ -28,23 +28,23 @@ describe('Component Communication Cookbook Tests', () => {
   describe('Parent-to-child communication with setter', () => {
     // #docregion parent-to-child-setter
     // ...
-    it('should display trimmed, non-empty names', () => {
+    it('should display trimmed, non-empty names', async () => {
       const nonEmptyNameIndex = 0;
       const nonEmptyName = '"Dr IQ"';
       const parent = element(by.tagName('app-name-parent'));
       const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
 
-      const displayName = hero.element(by.tagName('h3')).getText();
+      const displayName = await hero.element(by.tagName('h3')).getText();
       expect(displayName).toEqual(nonEmptyName);
     });
 
-    it('should replace empty name with default name', () => {
+    it('should replace empty name with default name', async () => {
       const emptyNameIndex = 1;
       const defaultName = '"<no name set>"';
       const parent = element(by.tagName('app-name-parent'));
       const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
 
-      const displayName = hero.element(by.tagName('h3')).getText();
+      const displayName = await hero.element(by.tagName('h3')).getText();
       expect(displayName).toEqual(defaultName);
     });
     // ...
@@ -55,15 +55,15 @@ describe('Component Communication Cookbook Tests', () => {
     // #docregion parent-to-child-onchanges
     // ...
     // Test must all execute in this exact order
-    it('should set expected initial values', () => {
+    it('should set expected initial values', async () => {
-      const actual = getActual();
+      const actual = await getActual();
 
       const initialLabel = 'Version 1.23';
       const initialLog = 'Initial value of major set to 1, Initial value of minor set to 23';
 
       expect(actual.label).toBe(initialLabel);
       expect(actual.count).toBe(1);
-      expect(actual.logs.get(0).getText()).toBe(initialLog);
+      expect(await actual.logs.get(0).getText()).toBe(initialLog);
     });
 
     it('should set expected values after clicking \'Minor\' twice', async () => {
@@ -73,14 +73,14 @@ describe('Component Communication Cookbook Tests', () => {
       await newMinorButton.click();
       await newMinorButton.click();
 
-      const actual = getActual();
+      const actual = await getActual();
 
       const labelAfter2Minor = 'Version 1.25';
       const logAfter2Minor = 'minor changed from 24 to 25';
 
       expect(actual.label).toBe(labelAfter2Minor);
       expect(actual.count).toBe(3);
-      expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
+      expect(await actual.logs.get(2).getText()).toBe(logAfter2Minor);
     });
 
     it('should set expected values after clicking \'Major\' once', async () => {
@@ -88,26 +88,26 @@ describe('Component Communication Cookbook Tests', () => {
       const newMajorButton = repoTag.all(by.tagName('button')).get(1);
 
       await newMajorButton.click();
-      const actual = getActual();
+      const actual = await getActual();
 
       const labelAfterMajor = 'Version 2.0';
       const logAfterMajor = 'major changed from 1 to 2, minor changed from 23 to 0';
 
       expect(actual.label).toBe(labelAfterMajor);
       expect(actual.count).toBe(2);
-      expect(actual.logs.get(1).getText()).toBe(logAfterMajor);
+      expect(await actual.logs.get(1).getText()).toBe(logAfterMajor);
     });
 
-    function getActual() {
+    async function getActual() {
       const versionTag = element(by.tagName('app-version-child'));
-      const label = versionTag.element(by.tagName('h3')).getText();
+      const label = await versionTag.element(by.tagName('h3')).getText();
       const ul = versionTag.element((by.tagName('ul')));
       const logs = ul.all(by.tagName('li'));
 
       return {
         label,
         logs,
-        count: logs.count()
+        count: await logs.count(),
       };
     }
     // ...
@@ -117,9 +117,9 @@ describe('Component Communication Cookbook Tests', () => {
   describe('Child-to-parent communication', () => {
     // #docregion child-to-parent
     // ...
-    it('should not emit the event initially', () => {
+    it('should not emit the event initially', async () => {
       const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
-      expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 0');
+      expect(await voteLabel.getText()).toBe('Agree: 0, Disagree: 0');
     });
 
     it('should process Agree vote', async () => {
@@ -129,7 +129,7 @@ describe('Component Communication Cookbook Tests', () => {
 
       await agreeButton1.click();
 
-      expect(voteLabel.getText()).toBe('Agree: 1, Disagree: 0');
+      expect(await voteLabel.getText()).toBe('Agree: 1, Disagree: 0');
     });
 
     it('should process Disagree vote', async () => {
@@ -139,7 +139,7 @@ describe('Component Communication Cookbook Tests', () => {
 
       await agreeButton1.click();
 
-      expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 1');
+      expect(await voteLabel.getText()).toBe('Agree: 0, Disagree: 1');
     });
     // ...
     // #enddocregion child-to-parent
@@ -204,8 +204,8 @@ describe('Component Communication Cookbook Tests', () => {
 
       await announceButton.click();
 
-      expect(history.count()).toBe(1);
+      expect(await history.count()).toBe(1);
-      expect(history.get(0).getText()).toMatch(/Mission.* announced/);
+      expect(await history.get(0).getText()).toMatch(/Mission.* announced/);
     });
 
     it('should confirm the mission by Lovell', async () => {
@@ -229,8 +229,8 @@ describe('Component Communication Cookbook Tests', () => {
       await announceButton.click();
       await confirmButton.click();
 
-      expect(history.count()).toBe(2);
+      expect(await history.count()).toBe(2);
-      expect(history.get(1).getText()).toBe(`${astronaut} confirmed the mission`);
+      expect(await history.get(1).getText()).toBe(`${astronaut} confirmed the mission`);
     }
     // ...
     // #enddocregion bidirectional-service

aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts

@@ -2,12 +2,10 @@ import { browser, element, by } from 'protractor';
 
 describe('Component Overview', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should display component overview works ', () => {
+  it('should display component overview works ', async () => {
-    expect(element(by.css('p')).getText()).toEqual('component-overview works!');
+    expect(await element(by.css('p')).getText()).toEqual('component-overview works!');
   });
 
 });

aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts

@@ -2,67 +2,65 @@ import { browser, element, by } from 'protractor';
 
 describe('Component Style Tests', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('scopes component styles to component view', () => {
+  it('scopes component styles to component view', async () => {
     const componentH1 = element(by.css('app-root > h1'));
     const externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
     // other times as "400", both of which are equal in CSS terms.
-    expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/);
+    expect(await componentH1.getCssValue('fontWeight')).toMatch(/normal|400/);
-    expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/);
+    expect(await externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/);
   });
 
 
-  it('allows styling :host element', () => {
+  it('allows styling :host element', async () => {
     const host = element(by.css('app-hero-details'));
 
-    expect(host.getCssValue('borderWidth')).toEqual('1px');
+    expect(await host.getCssValue('borderWidth')).toEqual('1px');
   });
 
-  it('supports :host() in function form', () => {
+  it('supports :host() in function form', async () => {
     const host = element(by.css('app-hero-details'));
 
-    host.element(by.buttonText('Activate')).click();
+    await host.element(by.buttonText('Activate')).click();
-    expect(host.getCssValue('borderWidth')).toEqual('3px');
+    expect(await host.getCssValue('borderWidth')).toEqual('3px');
   });
 
-  it('allows conditional :host-context() styling', () => {
+  it('allows conditional :host-context() styling', async () => {
     const h2 = element(by.css('app-hero-details h2'));
 
-    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
+    expect(await h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
   });
 
-  it('styles both view and content children with /deep/', () => {
+  it('styles both view and content children with /deep/', async () => {
     const viewH3 = element(by.css('app-hero-team h3'));
     const contentH3 = element(by.css('app-hero-controls h3'));
 
-    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(await viewH3.getCssValue('fontStyle')).toEqual('italic');
-    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
+    expect(await contentH3.getCssValue('fontStyle')).toEqual('italic');
   });
 
-  it('includes styles loaded with CSS @import', () => {
+  it('includes styles loaded with CSS @import', async () => {
     const host = element(by.css('app-hero-details'));
 
-    expect(host.getCssValue('padding')).toEqual('10px');
+    expect(await host.getCssValue('padding')).toEqual('10px');
   });
 
-  it('processes template inline styles', () => {
+  it('processes template inline styles', async () => {
     const button = element(by.css('app-hero-controls button'));
     const externalButton = element(by.css('body > button'));
-    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
+    expect(await button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
-    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
+    expect(await externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
   });
 
-  it('processes template <link>s', () => {
+  it('processes template <link>s', async () => {
     const li = element(by.css('app-hero-team li:first-child'));
     const externalLi = element(by.css('body > ul li'));
 
-    expect(li.getCssValue('listStyleType')).toEqual('square');
+    expect(await li.getCssValue('listStyleType')).toEqual('square');
-    expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
+    expect(await externalLi.getCssValue('listStyleType')).not.toEqual('square');
   });
 
 });

aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts

@@ -2,9 +2,7 @@ import { browser, element, by } from 'protractor';
 
 describe('Dependency Injection Cookbook', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get(''));
-        browser.get('');
-    });
 
     it('should render Logged in User example', async () => {
       const loggedInUser = element(by.cssContainingText('h3', 'Logged in user'));
@@ -49,27 +47,27 @@ describe('Dependency Injection Cookbook', () => {
       expect(await magmaPhone.isPresent()).toBe(true);
     });
 
-    it('should render Hero-of-the-Month runner-ups', () => {
+    it('should render Hero-of-the-Month runner-ups', async () => {
-      const runnersUp =  element(by.id('rups1')).getText();
+      const runnersUp = await element(by.id('rups1')).getText();
       expect(runnersUp).toContain('RubberMan, Dr Nice');
     });
 
-    it('should render DateLogger log entry in Hero-of-the-Month', () => {
+    it('should render DateLogger log entry in Hero-of-the-Month', async () => {
-      const logs =  element.all(by.id('logs')).get(0).getText();
+      const logs = await element.all(by.id('logs')).get(0).getText();
       expect(logs).toContain('INFO: starting up at');
     });
 
-    it('should highlight Hero Bios and Contacts container when mouseover', () => {
+    it('should highlight Hero Bios and Contacts container when mouseover', async () => {
       const target = element(by.css('div[appHighlight="yellow"]'));
       const yellow = 'rgba(255, 255, 0, 1)';
 
-      expect(target.getCssValue('background-color')).not.toEqual(yellow);
+      expect(await target.getCssValue('background-color')).not.toEqual(yellow);
 
-      browser.actions().mouseMove(target).perform();
+      await browser.actions().mouseMove(target).perform();
 
       // Wait for up to 2s for the background color to be updated,
       // to account for slow environments (e.g. CI).
-      browser.wait(() => target.getCssValue('background-color').then(c => c === yellow), 2000);
+      await browser.wait(async () => await target.getCssValue('background-color') === yellow, 2000);
     });
 
     describe('in Parent Finder', () => {
@@ -78,20 +76,20 @@ describe('Dependency Injection Cookbook', () => {
       const carol1 = element(by.css('alex carol p'));
       const carol2 = element(by.css('barry carol p'));
 
-      it('"Cathy" should find "Alex" via the component class', () => {
+      it('"Cathy" should find "Alex" via the component class', async () => {
-        expect(cathy1.getText()).toContain('Found Alex via the component');
+        expect(await cathy1.getText()).toContain('Found Alex via the component');
       });
 
-      it('"Craig" should not find "Alex" via the base class', () => {
+      it('"Craig" should not find "Alex" via the base class', async () => {
-        expect(craig1.getText()).toContain('Did not find Alex via the base');
+        expect(await craig1.getText()).toContain('Did not find Alex via the base');
       });
 
-      it('"Carol" within "Alex" should have "Alex" parent', () => {
+      it('"Carol" within "Alex" should have "Alex" parent', async () => {
-        expect(carol1.getText()).toContain('Alex');
+        expect(await carol1.getText()).toContain('Alex');
       });
 
-      it('"Carol" within "Barry" should have "Barry" parent', () => {
+      it('"Carol" within "Barry" should have "Barry" parent', async () => {
-        expect(carol2.getText()).toContain('Barry');
+        expect(await carol2.getText()).toContain('Barry');
       });
     });
 });

aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts

@@ -5,193 +5,185 @@ describe('Dependency Injection Tests', () => {
   let expectedMsg: string;
   let expectedMsgRx: RegExp;
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Cars:', () => {
 
-    it('DI car displays as expected', () => {
+    it('DI car displays as expected', async () => {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#di')).getText()).toEqual(expectedMsg);
     });
 
-    it('No DI car displays as expected', () => {
+    it('No DI car displays as expected', async () => {
       expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#nodi')).getText()).toEqual(expectedMsg);
     });
 
-    it('Injector car displays as expected', () => {
+    it('Injector car displays as expected', async () => {
       expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#injector')).getText()).toEqual(expectedMsg);
     });
 
-    it('Factory car displays as expected', () => {
+    it('Factory car displays as expected', async () => {
       expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#factory')).getText()).toEqual(expectedMsg);
     });
 
-    it('Simple car displays as expected', () => {
+    it('Simple car displays as expected', async () => {
       expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#simple')).getText()).toEqual(expectedMsg);
     });
 
-    it('Super car displays as expected', () => {
+    it('Super car displays as expected', async () => {
       expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
-      expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#super')).getText()).toEqual(expectedMsg);
     });
 
-    it('Test car displays as expected', () => {
+    it('Test car displays as expected', async () => {
       expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
-      expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#test')).getText()).toEqual(expectedMsg);
     });
   });
 
   describe('Other Injections:', () => {
-    it('DI car displays as expected', () => {
+    it('DI car displays as expected', async () => {
       expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
-      expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#car')).getText()).toEqual(expectedMsg);
     });
 
-    it('Hero displays as expected', () => {
+    it('Hero displays as expected', async () => {
       expectedMsg = 'Dr Nice';
-      expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#hero')).getText()).toEqual(expectedMsg);
     });
 
-    it('Optional injection displays as expected', () => {
+    it('Optional injection displays as expected', async () => {
       expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
-      expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#rodent')).getText()).toEqual(expectedMsg);
     });
   });
 
   describe('Tests:', () => {
 
-    it('Tests display as expected', () => {
+    it('Tests display as expected', async () => {
       expectedMsgRx = /Tests passed/;
-      expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
+      expect(await element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
     });
 
   });
 
   describe('Provider variations:', () => {
 
-    it('P1 (class) displays as expected', () => {
+    it('P1 (class) displays as expected', async () => {
       expectedMsg = 'Hello from logger provided with Logger class';
-      expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p1')).getText()).toEqual(expectedMsg);
     });
 
-    it('P3 (provide) displays as expected', () => {
+    it('P3 (provide) displays as expected', async () => {
       expectedMsg = 'Hello from logger provided with useClass:Logger';
-      expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
 
-    it('P4 (useClass:BetterLogger) displays as expected', () => {
+    it('P4 (useClass:BetterLogger) displays as expected', async () => {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
-      expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p4')).getText()).toEqual(expectedMsg);
     });
 
-    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', () => {
+    it('P5 (useClass:EvenBetterLogger - dependency)  displays as expected', async () => {
       expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
-      expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p5')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6a (no alias) displays as expected', () => {
+    it('P6a (no alias) displays as expected', async () => {
       expectedMsg = 'Hello OldLogger (but we want NewLogger)';
-      expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p6a')).getText()).toEqual(expectedMsg);
     });
 
-    it('P6b (alias) displays as expected', () => {
+    it('P6b (alias) displays as expected', async () => {
       expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
-      expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p6b')).getText()).toEqual(expectedMsg);
     });
 
-    it('P7 (useValue) displays as expected', () => {
+    it('P7 (useValue) displays as expected', async () => {
       expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
-      expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p7')).getText()).toEqual(expectedMsg);
     });
 
-    it('P8 (useFactory) displays as expected', () => {
+    it('P8 (useFactory) displays as expected', async () => {
       expectedMsg = 'Hero service injected successfully via heroServiceProvider';
-      expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p8')).getText()).toEqual(expectedMsg);
     });
 
-    it('P9 (InjectionToken) displays as expected', () => {
+    it('P9 (InjectionToken) displays as expected', async () => {
       expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
-      expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p9')).getText()).toEqual(expectedMsg);
     });
 
-    it('P10 (optional dependency) displays as expected', () => {
+    it('P10 (optional dependency) displays as expected', async () => {
       expectedMsg = 'Optional logger was not available';
-      expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
+      expect(await element(by.css('#p10')).getText()).toEqual(expectedMsg);
     });
   });
 
   describe('User/Heroes:', () => {
-    it('User is Bob - unauthorized', () => {
+    it('User is Bob - unauthorized', async () => {
       expectedMsgRx = /Bob, is not authorized/;
-      expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+      expect(await element(by.css('#user')).getText()).toMatch(expectedMsgRx);
     });
 
-    it('should have button', () => {
+    it('should have button', async () => {
-      expect(element.all(by.cssContainingText('button', 'Next User'))
+      expect(await element.all(by.cssContainingText('button', 'Next User'))
         .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
     });
 
-    it('unauthorized user should have multiple unauthorized heroes', () => {
+    it('unauthorized user should have multiple unauthorized heroes', async () => {
       const heroes = element.all(by.css('#unauthorized app-hero-list div'));
-      expect(heroes.count()).toBeGreaterThan(0);
+      expect(await heroes.count()).toBeGreaterThan(0);
     });
 
-    it('unauthorized user should have no secret heroes', () => {
+    it('unauthorized user should have no secret heroes', async () => {
       const heroes = element.all(by.css('#unauthorized app-hero-list div'));
-      expect(heroes.count()).toBeGreaterThan(0);
+      expect(await heroes.count()).toBeGreaterThan(0);
 
-      const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+      const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText()));
-        return elem.getText().then((text: string) => /secret/.test(text));
+      expect(await filteredHeroes.count()).toEqual(0);
     });
 
-      expect(filteredHeroes.count()).toEqual(0);
+    it('unauthorized user should have no authorized heroes listed', async () => {
-    });
+      expect(await element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
-
-    it('unauthorized user should have no authorized heroes listed', () => {
-      expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
     });
 
     describe('after button click', () => {
 
-      beforeAll((done: any) => {
+      beforeAll(async () => {
         const buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
-        buttonEle.click().then(done, done);
+        await buttonEle.click();
       });
 
-      it('User is Alice  - authorized', () => {
+      it('User is Alice  - authorized', async () => {
         expectedMsgRx = /Alice, is authorized/;
-        expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
+        expect(await element(by.css('#user')).getText()).toMatch(expectedMsgRx);
       });
 
-      it('authorized user should have multiple authorized heroes ', () => {
+      it('authorized user should have multiple authorized heroes ', async () => {
         const heroes = element.all(by.css('#authorized app-hero-list div'));
-        expect(heroes.count()).toBeGreaterThan(0);
+        expect(await heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', () => {
+      it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', async () => {
         const heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
-        expect(heroes.count()).toBeGreaterThan(0);
+        expect(await heroes.count()).toBeGreaterThan(0);
       });
 
-      it('authorized user should have secret heroes', () => {
+      it('authorized user should have secret heroes', async () => {
         const heroes = element.all(by.css('#authorized app-hero-list div'));
-        expect(heroes.count()).toBeGreaterThan(0);
+        expect(await heroes.count()).toBeGreaterThan(0);
 
-        const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+        const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText()));
-         return elem.getText().then((text: string) => /secret/.test(text));
+        expect(await filteredHeroes.count()).toBeGreaterThan(0);
       });
 
-        expect(filteredHeroes.count()).toBeGreaterThan(0);
+      it('authorized user should have no unauthorized heroes listed', async () => {
-      });
+        expect(await element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
-
-      it('authorized user should have no unauthorized heroes listed', () => {
-        expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
       });
     });
   });

aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts

@@ -4,24 +4,22 @@ describe('Displaying Data Tests', () => {
   const title = 'Tour of Heroes';
   const defaultHero = 'Windstorm';
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
+
+  it(`should display correct title: ${title}`, async () => {
+    expect(await element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it('should display correct title: ' + title, () => {
+  it(`should have correct default hero: ${defaultHero}`, async () => {
-    expect(element(by.css('h1')).getText()).toEqual(title);
+    expect(await element(by.css('h2')).getText()).toContain(defaultHero);
   });
 
-  it('should have correct default hero:  ' + defaultHero, () => {
+  it('should have heroes', async () => {
-    expect(element(by.css('h2')).getText()).toContain(defaultHero);
-  });
-
-  it('should have heroes', () => {
     const heroEls = element.all(by.css('li'));
-    expect(heroEls.count()).not.toBe(0, 'should have heroes');
+    expect(await heroEls.count()).not.toBe(0, 'should have heroes');
   });
 
-  it('should display "there are many heroes!"', () => {
+  it('should display "there are many heroes!"', async () => {
-    expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
+    expect(await element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
   });
 });

aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts

@@ -3,11 +3,9 @@ import { browser, element, by } from 'protractor';
 describe('Docs Style Guide', () => {
   const title = 'Authors Style Guide Sample';
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should display correct title: ' + title, () => {
+  it(`should display correct title: ${title}`, async () => {
-    expect(element(by.css('h1')).getText()).toEqual(title);
+    expect(await element(by.css('h1')).getText()).toEqual(title);
   });
 });

aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts

@@ -3,25 +3,20 @@ import { browser, element, by } from 'protractor';
 /* tslint:disable:quotemark */
 describe('Dynamic Form', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get(''));
-        browser.get('');
-    });
 
-    it('should submit form', () => {
+    it('should submit form', async () => {
       const firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
-      expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
+      expect(await firstNameElement.getAttribute('value')).toEqual('Bombasto');
 
       const emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
       const email = 'test@test.com';
-      emailElement.sendKeys(email);
+      await emailElement.sendKeys(email);
-      expect(emailElement.getAttribute('value')).toEqual(email);
+      expect(await emailElement.getAttribute('value')).toEqual(email);
 
-      element(by.css('select option[value="solid"]')).click();
+      await element(by.css('select option[value="solid"]')).click();
-
+      await element.all(by.css('button')).get(0).click();
-      const saveButton = element.all(by.css('button')).get(0);
+      expect(await element(by.cssContainingText('strong', 'Saved the following values')).isPresent()).toBe(true);
-      saveButton.click().then(() => {
-        expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
-      });
   });
 
 });

aio/content/examples/elements/e2e/src/app.e2e-spec.ts

@@ -6,14 +6,14 @@ describe('Elements', () => {
   const popupButtons = element.all(by.css('button'));
 
   // Helpers
-  const click = (elem: ElementFinder) => {
+  const click = async (elem: ElementFinder) => {
     // Waiting for the element to be clickable, makes the tests less flaky.
-    browser.wait(EC.elementToBeClickable(elem), 5000);
+    await browser.wait(EC.elementToBeClickable(elem), 5000);
-    elem.click();
+    await elem.click();
   };
-  const waitForText = (elem: ElementFinder) => {
+  const waitForText = async (elem: ElementFinder) => {
     // Waiting for the element to have some text, makes the tests less flaky.
-    browser.wait(async () => /\S/.test(await elem.getText()), 5000);
+    await browser.wait(async () => /\S/.test(await elem.getText()), 5000);
   };
 
   beforeEach(() => browser.get(''));
@@ -23,29 +23,29 @@ describe('Elements', () => {
     const popupComponent = element(by.css('popup-component'));
     const closeButton = popupComponent.element(by.css('button'));
 
-    it('should be displayed on button click', () => {
+    it('should be displayed on button click', async () => {
-      expect(popupComponent.isPresent()).toBe(false);
+      expect(await popupComponent.isPresent()).toBe(false);
 
-      click(popupComponentButton);
+      await click(popupComponentButton);
-      expect(popupComponent.isPresent()).toBe(true);
+      expect(await popupComponent.isPresent()).toBe(true);
     });
 
-    it('should display the specified message', () => {
+    it('should display the specified message', async () => {
-      messageInput.clear();
+      await messageInput.clear();
-      messageInput.sendKeys('Angular rocks!');
+      await messageInput.sendKeys('Angular rocks!');
 
-      click(popupComponentButton);
+      await click(popupComponentButton);
-      waitForText(popupComponent);
+      await waitForText(popupComponent);
 
-      expect(popupComponent.getText()).toContain('Popup: Angular rocks!');
+      expect(await popupComponent.getText()).toContain('Popup: Angular rocks!');
     });
 
-    it('should be closed on "close" button click', () => {
+    it('should be closed on "close" button click', async () => {
-      popupComponentButton.click();
+      await click(popupComponentButton);
-      expect(popupComponent.isPresent()).toBe(true);
+      expect(await popupComponent.isPresent()).toBe(true);
 
-      click(closeButton);
+      await click(closeButton);
-      expect(popupComponent.isPresent()).toBe(false);
+      expect(await popupComponent.isPresent()).toBe(false);
     });
   });
 
@@ -54,29 +54,29 @@ describe('Elements', () => {
     const popupElement = element(by.css('popup-element'));
     const closeButton = popupElement.element(by.css('button'));
 
-    it('should be displayed on button click', () => {
+    it('should be displayed on button click', async () => {
-      expect(popupElement.isPresent()).toBe(false);
+      expect(await popupElement.isPresent()).toBe(false);
 
-      click(popupElementButton);
+      await click(popupElementButton);
-      expect(popupElement.isPresent()).toBe(true);
+      expect(await popupElement.isPresent()).toBe(true);
     });
 
-    it('should display the specified message', () => {
+    it('should display the specified message', async () => {
-      messageInput.clear();
+      await messageInput.clear();
-      messageInput.sendKeys('Angular rocks!');
+      await messageInput.sendKeys('Angular rocks!');
 
-      click(popupElementButton);
+      await click(popupElementButton);
-      waitForText(popupElement);
+      await waitForText(popupElement);
 
-      expect(popupElement.getText()).toContain('Popup: Angular rocks!');
+      expect(await popupElement.getText()).toContain('Popup: Angular rocks!');
     });
 
-    it('should be closed on "close" button click', () => {
+    it('should be closed on "close" button click', async () => {
-      popupElementButton.click();
+      await click(popupElementButton);
-      expect(popupElement.isPresent()).toBe(true);
+      expect(await popupElement.isPresent()).toBe(true);
 
-      click(closeButton);
+      await click(closeButton);
-      expect(popupElement.isPresent()).toBe(false);
+      expect(await popupElement.isPresent()).toBe(false);
     });
   });
 });

aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts

@@ -2,9 +2,7 @@ import { browser, element, by } from 'protractor';
 
 describe('Event binding example', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-  });
 
   const saveButton = element.all(by.css('button')).get(0);
   const onSaveButton = element.all(by.css('button')).get(1);
@@ -14,55 +12,55 @@ describe('Event binding example', () => {
   const saveProp = element.all(by.css('button')).get(5);
 
 
-  it('should display Event Binding with Angular', () => {
+  it('should display Event Binding with Angular', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Event Binding');
+    expect(await element(by.css('h1')).getText()).toEqual('Event Binding');
   });
 
-  it('should display 6 buttons', () => {
+  it('should display 6 buttons', async () => {
-    expect(saveButton.getText()).toBe('Save');
+    expect(await saveButton.getText()).toBe('Save');
-    expect(onSaveButton.getText()).toBe('on-click Save');
+    expect(await onSaveButton.getText()).toBe('on-click Save');
-    expect(myClick.getText()).toBe('click with myClick');
+    expect(await myClick.getText()).toBe('click with myClick');
-    expect(deleteButton.getText()).toBe('Delete');
+    expect(await deleteButton.getText()).toBe('Delete');
-    expect(saveNoProp.getText()).toBe('Save, no propagation');
+    expect(await saveNoProp.getText()).toBe('Save, no propagation');
-    expect(saveProp.getText()).toBe('Save with propagation');
+    expect(await saveProp.getText()).toBe('Save with propagation');
   });
 
-  it('should support user input', () => {
+  it('should support user input', async () => {
     const input = element(by.css('input'));
     const bindingResult = element.all(by.css('h4')).get(1);
-    expect(bindingResult.getText()).toEqual('Result: teapot');
+    expect(await bindingResult.getText()).toEqual('Result: teapot');
-    input.sendKeys('abc');
+    await input.sendKeys('abc');
-    expect(bindingResult.getText()).toEqual('Result: teapotabc');
+    expect(await bindingResult.getText()).toEqual('Result: teapotabc');
   });
 
   it('should hide the item img', async () => {
     await deleteButton.click();
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
-    expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
+    expect(await element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none');
   });
 
   it('should show two alerts', async () => {
     const parentDiv = element.all(by.css('.parent-div'));
     const childDiv = element.all(by.css('div > div')).get(1);
     await parentDiv.click();
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
-    expect(childDiv.getText()).toEqual('Click me too! (child)');
+    expect(await childDiv.getText()).toEqual('Click me too! (child)');
     await childDiv.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div');
+    expect(await browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div');
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
   });
 
   it('should show 1 alert from Save, no prop, button', async () => {
     await saveNoProp.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation');
+    expect(await browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation');
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
   });
 
   it('should show 2 alerts from Save w/prop button', async () => {
     await saveProp.click();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
+    expect(await browser.switchTo().alert().getText()).toEqual('Saved.');
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
-    expect(browser.switchTo().alert().getText()).toEqual('Saved.');
+    expect(await browser.switchTo().alert().getText()).toEqual('Saved.');
-    browser.switchTo().alert().accept();
+    await browser.switchTo().alert().accept();
   });
 });

aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts

@@ -7,11 +7,8 @@ describe('feature-modules App', () => {
     page = new AppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display message saying app works', async () => {
-    page.navigateTo();
+    await page.navigateTo();
-    expect(page.getTitleText()).toEqual('app works!');
+    expect(await page.getTitleText()).toEqual('app works!');
   });
 });
-
-
-

aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts

@@ -3,9 +3,7 @@ import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } f
 // THESE TESTS ARE INCOMPLETE
 describe('Form Validation Tests', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Template-driven form', () => {
     beforeAll(() => {
@@ -71,178 +69,178 @@ function getPage(sectionTag: string) {
 
 function tests(title: string) {
 
-  it('should display correct title', () => {
+  it('should display correct title', async () => {
-    expect(page.title.getText()).toContain(title);
+    expect(await page.title.getText()).toContain(title);
   });
 
-  it('should not display submitted message before submit', () => {
+  it('should not display submitted message before submit', async () => {
-    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
+    expect(await page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
   });
 
-  it('should have form buttons', () => {
+  it('should have form buttons', async () => {
-    expect(page.heroFormButtons.count()).toEqual(2);
+    expect(await page.heroFormButtons.count()).toEqual(2);
   });
 
-  it('should have error at start', () => {
+  it('should have error at start', async () => {
-    expectFormIsInvalid();
+    await expectFormIsInvalid();
   });
 
   // it('showForm', () => {
   //   page.form.getInnerHtml().then(html => console.log(html));
   // });
 
-  it('should have disabled submit button', () => {
+  it('should have disabled submit button', async () => {
-    expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
+    expect(await page.heroFormButtons.get(0).isEnabled()).toBe(false);
   });
 
-  it('resetting name to valid name should clear errors', () => {
+  it('resetting name to valid name should clear errors', async () => {
     const ele = page.nameInput;
-    expect(ele.isPresent()).toBe(true, 'nameInput should exist');
+    expect(await ele.isPresent()).toBe(true, 'nameInput should exist');
-    ele.clear();
+    await ele.clear();
-    ele.sendKeys(testName);
+    await ele.sendKeys(testName);
-    expectFormIsValid();
+    await expectFormIsValid();
   });
 
-  it('should produce "required" error after clearing name', () => {
+  it('should produce "required" error after clearing name', async () => {
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    // page.alterEgoInput.click(); // to blur ... didn't work
+    // await page.alterEgoInput.click(); // to blur ... didn't work
-    page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
+    await page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
-    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+    expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
-    expect(page.errorMessages.get(0).getText()).toContain('required');
+    expect(await page.errorMessages.get(0).getText()).toContain('required');
   });
 
-  it('should produce "at least 4 characters" error when name="x"', () => {
+  it('should produce "at least 4 characters" error when name="x"', async () => {
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    page.nameInput.sendKeys('x'); // too short
+    await page.nameInput.sendKeys('x'); // too short
-    expectFormIsInvalid();
+    await expectFormIsInvalid();
-    expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
+    expect(await page.errorMessages.get(0).getText()).toContain('at least 4 characters');
   });
 
-  it('resetting name to valid name again should clear errors', () => {
+  it('resetting name to valid name again should clear errors', async () => {
-    page.nameInput.sendKeys(testName);
+    await page.nameInput.sendKeys(testName);
-    expectFormIsValid();
+    await expectFormIsValid();
   });
 
-  it('should have enabled submit button', () => {
+  it('should have enabled submit button', async () => {
     const submitBtn = page.heroFormButtons.get(0);
-    expect(submitBtn.isEnabled()).toBe(true);
+    expect(await submitBtn.isEnabled()).toBe(true);
   });
 
-  it('should hide form after submit', () => {
+  it('should hide form after submit', async () => {
-    page.heroFormButtons.get(0).click();
+    await page.heroFormButtons.get(0).click();
-    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
+    expect(await page.heroFormButtons.get(0).isDisplayed()).toBe(false);
   });
 
-  it('submitted form should be displayed', () => {
+  it('submitted form should be displayed', async () => {
-    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
+    expect(await page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
   });
 
-  it('submitted form should have new hero name', () => {
+  it('submitted form should have new hero name', async () => {
-    expect(page.heroSubmitted.getText()).toContain(testName);
+    expect(await page.heroSubmitted.getText()).toContain(testName);
   });
 
-  it('clicking edit button should reveal form again', () => {
+  it('clicking edit button should reveal form again', async () => {
     const newFormBtn = page.heroSubmitted.element(by.css('button'));
-    newFormBtn.click();
+    await newFormBtn.click();
-    expect(page.heroSubmitted.isElementPresent(by.css('p')))
+    expect(await page.heroSubmitted.isElementPresent(by.css('p')))
       .toBe(false, 'submitted hidden again');
-    expect(page.title.isDisplayed()).toBe(true, 'can see form title');
+    expect(await page.title.isDisplayed()).toBe(true, 'can see form title');
   });
 }
 
-function expectFormIsValid() {
+async function expectFormIsValid() {
-    expect(page.form.getAttribute('class')).toMatch('ng-valid');
+  expect(await page.form.getAttribute('class')).toMatch('ng-valid');
 }
 
-function expectFormIsInvalid() {
+async function expectFormIsInvalid() {
-    expect(page.form.getAttribute('class')).toMatch('ng-invalid');
+  expect(await page.form.getAttribute('class')).toMatch('ng-invalid');
 }
 
-function triggerAlterEgoValidation() {
+async function triggerAlterEgoValidation() {
   // alterEgo has updateOn set to 'blur', click outside of the input to trigger the blur event
-  element(by.css('app-root')).click();
+  await element(by.css('app-root')).click();
 }
 
-function waitForAlterEgoValidation() {
+async function waitForAlterEgoValidation() {
   // alterEgo async validation will be performed in 400ms
-  browser.sleep(400);
+  await browser.sleep(400);
 }
 
 function bobTests() {
   const emsg = 'Name cannot be Bob.';
 
-  it('should produce "no bob" error after setting name to "Bobby"', () => {
+  it('should produce "no bob" error after setting name to "Bobby"', async () => {
     // Re-populate select element
-    page.powerSelect.click();
+    await page.powerSelect.click();
-    page.powerOption.click();
+    await page.powerOption.click();
 
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    page.nameInput.sendKeys('Bobby');
+    await page.nameInput.sendKeys('Bobby');
-    expectFormIsInvalid();
+    await expectFormIsInvalid();
-    expect(page.errorMessages.get(0).getText()).toBe(emsg);
+    expect(await page.errorMessages.get(0).getText()).toBe(emsg);
   });
 
-  it('should be ok again with valid name', () => {
+  it('should be ok again with valid name', async () => {
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    page.nameInput.sendKeys(testName);
+    await page.nameInput.sendKeys(testName);
-    expectFormIsValid();
+    await expectFormIsValid();
   });
 }
 
 function asyncValidationTests() {
   const emsg = 'Alter ego is already taken.';
 
-  it(`should produce "${emsg}" error after setting alterEgo to Eric`, () => {
+  it(`should produce "${emsg}" error after setting alterEgo to Eric`, async () => {
-    page.alterEgoInput.clear();
+    await page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('Eric');
+    await page.alterEgoInput.sendKeys('Eric');
 
-    triggerAlterEgoValidation();
+    await triggerAlterEgoValidation();
-    waitForAlterEgoValidation();
+    await waitForAlterEgoValidation();
 
-    expectFormIsInvalid();
+    await expectFormIsInvalid();
-    expect(page.alterEgoErrors.getText()).toBe(emsg);
+    expect(await page.alterEgoErrors.getText()).toBe(emsg);
   });
 
-  it('should be ok again with different values', () => {
+  it('should be ok again with different values', async () => {
-    page.alterEgoInput.clear();
+    await page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('John');
+    await page.alterEgoInput.sendKeys('John');
 
-    triggerAlterEgoValidation();
+    await triggerAlterEgoValidation();
-    waitForAlterEgoValidation();
+    await waitForAlterEgoValidation();
 
-    expectFormIsValid();
+    await expectFormIsValid();
-    expect(page.alterEgoErrors.isPresent()).toBe(false);
+    expect(await page.alterEgoErrors.isPresent()).toBe(false);
   });
 }
 
 function crossValidationTests() {
   const emsg = 'Name cannot match alter ego.';
 
-  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, () => {
+  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, async () => {
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    page.nameInput.sendKeys('Batman');
+    await page.nameInput.sendKeys('Batman');
 
-    page.alterEgoInput.clear();
+    await page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('Batman');
+    await page.alterEgoInput.sendKeys('Batman');
 
-    triggerAlterEgoValidation();
+    await triggerAlterEgoValidation();
-    waitForAlterEgoValidation();
+    await waitForAlterEgoValidation();
 
-    expectFormIsInvalid();
+    await expectFormIsInvalid();
-    expect(page.crossValidationErrorMessage.getText()).toBe(emsg);
+    expect(await page.crossValidationErrorMessage.getText()).toBe(emsg);
   });
 
-  it('should be ok again with different values', () => {
+  it('should be ok again with different values', async () => {
-    page.nameInput.clear();
+    await page.nameInput.clear();
-    page.nameInput.sendKeys('Batman');
+    await page.nameInput.sendKeys('Batman');
 
-    page.alterEgoInput.clear();
+    await page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('Superman');
+    await page.alterEgoInput.sendKeys('Superman');
 
-    triggerAlterEgoValidation();
+    await triggerAlterEgoValidation();
-    waitForAlterEgoValidation();
+    await waitForAlterEgoValidation();
 
-    expectFormIsValid();
+    await expectFormIsValid();
-    expect(page.crossValidationErrorMessage.isPresent()).toBe(false);
+    expect(await page.crossValidationErrorMessage.isPresent()).toBe(false);
   });
 }

aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts

@@ -1,10 +1,14 @@
-import { browser, element, by } from 'protractor';
+import { AppPage } from './app.po';
 
-describe('Forms Overview Tests', () => {
+describe('forms-overvoew App', () => {
+  let page: AppPage;
 
   beforeEach(() => {
-    browser.get('');
+    page = new AppPage();
   });
 
+  it('should display a title', async () => {
+    await page.navigateTo();
+    expect(await page.getTitleText()).toEqual('Forms Overview');
+  });
 });
-

aio/content/examples/forms/e2e/src/app.e2e-spec.ts

@@ -2,61 +2,56 @@ import { browser, element, by } from 'protractor';
 
 describe('Forms Tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display correct title', async () => {
+    expect(await element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
   });
 
-  it('should display correct title', () => {
+  it('should not display message before submit', async () => {
-    expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
-  });
-
-
-  it('should not display message before submit', () => {
     const ele = element(by.css('h2'));
-    expect(ele.isDisplayed()).toBe(false);
+    expect(await ele.isDisplayed()).toBe(false);
   });
 
-  it('should hide form after submit', () => {
+  it('should hide form after submit', async () => {
     const ele = element.all(by.css('h1')).get(0);
-    expect(ele.isDisplayed()).toBe(true);
+    expect(await ele.isDisplayed()).toBe(true);
+
     const b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(() => {
+    await b.click();
-      expect(ele.isDisplayed()).toBe(false);
+    expect(await ele.isDisplayed()).toBe(false);
-    });
   });
 
-  it('should display message after submit', () => {
+  it('should display message after submit', async () => {
     const b = element.all(by.css('button[type=submit]')).get(0);
-    b.click().then(() => {
+    await b.click();
-      expect(element(by.css('h2')).getText()).toContain('You submitted the following');
+    expect(await element(by.css('h2')).getText()).toContain('You submitted the following');
-    });
   });
 
-  it('should hide form after submit', () => {
+  it('should hide form after submit', async () => {
     const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
-    expect(alterEgoEle.isDisplayed()).toBe(true);
+    expect(await alterEgoEle.isDisplayed()).toBe(true);
+
     const submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
-    submitButtonEle.click().then(() => {
+    await submitButtonEle.click();
-      expect(alterEgoEle.isDisplayed()).toBe(false);
+    expect(await alterEgoEle.isDisplayed()).toBe(false);
-    });
   });
 
-  it('should reflect submitted data after submit', () => {
+  it('should reflect submitted data after submit', async () => {
-    const test = 'testing 1 2 3';
-    let newValue: string;
     const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
-    alterEgoEle.getAttribute('value').then((value: string) => {
+    const value = await alterEgoEle.getAttribute('value');
-      alterEgoEle.sendKeys(test);
+    const test = 'testing 1 2 3';
-      newValue = value + test;
+    const newValue = value + test;
-      expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
-      const b = element.all(by.css('button[type=submit]')).get(0);
-      return b.click();
-    }).then(() => {
-      const alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
-      expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
-      const divEle = element(by.cssContainingText('div', newValue));
-      expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
-    });
-  });
-});
 
+    await alterEgoEle.sendKeys(test);
+    expect(await alterEgoEle.getAttribute('value')).toEqual(newValue);
+
+    const b = element.all(by.css('button[type=submit]')).get(0);
+    await b.click();
+
+    const alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
+    expect(await alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
+    const divEle = element(by.cssContainingText('div', newValue));
+    expect(await divEle.isPresent()).toBe(true, `cannot locate div with this text: ${newValue}`);
+  });
+});

aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, ExpectedConditions as EC, logging, ElementFinder, ElementArrayFinder } from 'protractor';
+import { browser, element, by, ExpectedConditions as EC, logging } from 'protractor';
 
 describe('Getting Started', () => {
   const pageElements = {

aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts

@@ -2,9 +2,7 @@ import { browser, by, element } from 'protractor';
 
 describe('Hierarchical dependency injection', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Heroes Scenario', () => {
     const page = {
@@ -21,81 +19,68 @@ describe('Hierarchical dependency injection', () => {
       saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save'))
     };
 
-    it('should list multiple heroes', () => {
+    it('should list multiple heroes', async () => {
-      expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1);
+      expect(await element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1);
     });
 
-    it('should show no hero tax-returns at the start', () => {
+    it('should show no hero tax-returns at the start', async () => {
-      expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
+      expect(await element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
     });
 
-    it('should open first hero in app-hero-tax-return view after click', () => {
+    it('should open first hero in app-hero-tax-return view after click', async () => {
-      page.heroEl.getText()
+      page.heroName = await page.heroEl.getText();
-        .then(val => {
+      await page.heroEl.click();
-          page.heroName = val;
+      expect(await page.heroCardEl.isDisplayed()).toBe(true);
-        })
-        .then(() => page.heroEl.click())
-        .then(() => {
-          expect(page.heroCardEl.isDisplayed()).toBe(true);
-        });
     });
 
-    it('hero tax-return should have first hero\'s name', () => {
+    it('hero tax-return should have first hero\'s name', async () => {
       // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
-      expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
+      expect(await page.taxReturnNameEl.getText()).toEqual(page.heroName);
     });
 
-    it('should be able to cancel change', () => {
+    it('should be able to cancel change', async () => {
-      page.incomeInputEl.clear()
+      await page.incomeInputEl.clear();
-        .then(() => page.incomeInputEl.sendKeys('777'))
+      await page.incomeInputEl.sendKeys('777');
-        .then(() => {
+      expect(await page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
-          expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
+
-          return page.cancelButtonEl.click();
+      await page.cancelButtonEl.click();
-        })
+      expect(await page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
-        .then(() => {
-          expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
-        });
     });
 
-    it('should be able to save change', () => {
+    it('should be able to save change', async () => {
-      page.incomeInputEl.clear()
+      await page.incomeInputEl.clear();
-        .then(() => page.incomeInputEl.sendKeys('999'))
+      await page.incomeInputEl.sendKeys('999');
-        .then(() => {
+      expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
-          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
+
-          return page.saveButtonEl.click();
+      await page.saveButtonEl.click();
-        })
+      expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
-        .then(() => {
-          expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
-        });
     });
 
-    it('should be able to close tax-return', () => {
+    it('should be able to close tax-return', async () => {
-      page.saveButtonEl.click()
+      await page.saveButtonEl.click();
-        .then(() => {
+      expect(await element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
-          expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
-        });
     });
 
   });
 
   describe('Villains Scenario', () => {
-    it('should list multiple villains', () => {
+    it('should list multiple villains', async () => {
-      expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1);
+      expect(await element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1);
     });
   });
 
   describe('Cars Scenario', () => {
 
-    it('A-component should use expected services', () => {
+    it('A-component should use expected services', async () => {
-      expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1');
+      expect(await element(by.css('a-car')).getText()).toContain('C1-E1-T1');
     });
 
-    it('B-component should use expected services', () => {
+    it('B-component should use expected services', async () => {
-      expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1');
+      expect(await element(by.css('b-car')).getText()).toContain('C2-E2-T1');
     });
 
-    it('C-component should use expected services', () => {
+    it('C-component should use expected services', async () => {
-      expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1');
+      expect(await element(by.css('c-car')).getText()).toContain('C3-E2-T1');
     });
   });
 });

aio/content/examples/http/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, ElementFinder } from 'protractor';
+import { browser, element, by } from 'protractor';
 import { resolve } from 'path';
 
 const page = {
@@ -24,115 +24,113 @@ const page = {
   uploadMessage: element(by.css('app-uploader p'))
 };
 
-const checkLogForMessage = (message: string) => {
+const checkLogForMessage = async (message: string) => {
-  expect(page.logList.getText()).toContain(message);
+  expect(await page.logList.getText()).toContain(message);
 };
 
 describe('Http Tests', () => {
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Heroes', () => {
-    it('retrieves the list of heroes at startup', () => {
+    it('retrieves the list of heroes at startup', async () => {
-      expect(page.heroesListItems.count()).toBe(4);
+      expect(await page.heroesListItems.count()).toBe(4);
-      expect(page.heroesListItems.get(0).getText()).toContain('Dr Nice');
+      expect(await page.heroesListItems.get(0).getText()).toContain('Dr Nice');
-      checkLogForMessage('GET "api/heroes"');
+      await checkLogForMessage('GET "api/heroes"');
     });
 
-    it('makes a POST to add a new hero', () => {
+    it('makes a POST to add a new hero', async () => {
-      page.heroesListInput.sendKeys('Magneta');
+      await page.heroesListInput.sendKeys('Magneta');
-      page.heroesListAddButton.click();
+      await page.heroesListAddButton.click();
-      expect(page.heroesListItems.count()).toBe(5);
+      expect(await page.heroesListItems.count()).toBe(5);
-      checkLogForMessage('POST "api/heroes"');
+      await checkLogForMessage('POST "api/heroes"');
     });
 
-    it('makes a GET to search for a hero', () => {
+    it('makes a GET to search for a hero', async () => {
-      page.heroesListInput.sendKeys('Celeritas');
+      await page.heroesListInput.sendKeys('Celeritas');
-      page.heroesListSearchButton.click();
+      await page.heroesListSearchButton.click();
-      checkLogForMessage('GET "api/heroes?name=Celeritas"');
+      await checkLogForMessage('GET "api/heroes?name=Celeritas"');
     });
   });
 
   describe('Messages', () => {
-    it('can clear the logs', () => {
+    it('can clear the logs', async () => {
-      expect(page.logListItems.count()).toBe(1);
+      expect(await page.logListItems.count()).toBe(1);
-      page.logClearButton.click();
+      await page.logClearButton.click();
-      expect(page.logListItems.count()).toBe(0);
+      expect(await page.logListItems.count()).toBe(0);
     });
   });
 
   describe('Configuration', () => {
-    it('can fetch the configuration JSON file', () => {
+    it('can fetch the configuration JSON file', async () => {
-      page.configGetButton.click();
+      await page.configGetButton.click();
-      checkLogForMessage('GET "assets/config.json"');
+      await checkLogForMessage('GET "assets/config.json"');
-      expect(page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"');
+      expect(await page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"');
-      expect(page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"');
+      expect(await page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"');
     });
 
-    it('can fetch the configuration JSON file with headers', () => {
+    it('can fetch the configuration JSON file with headers', async () => {
-      page.configGetResponseButton.click();
+      await page.configGetResponseButton.click();
-      checkLogForMessage('GET "assets/config.json"');
+      await checkLogForMessage('GET "assets/config.json"');
-      expect(page.configSpan.getText()).toContain('Response headers:');
+      expect(await page.configSpan.getText()).toContain('Response headers:');
-      expect(page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8');
+      expect(await page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8');
     });
 
-    it('can clear the configuration log', () => {
+    it('can clear the configuration log', async () => {
-      page.configGetResponseButton.click();
+      await page.configGetResponseButton.click();
-      expect(page.configSpan.getText()).toContain('Response headers:');
+      expect(await page.configSpan.getText()).toContain('Response headers:');
-      page.configClearButton.click();
+      await page.configClearButton.click();
-      expect(page.configSpan.isPresent()).toBeFalsy();
+      expect(await page.configSpan.isPresent()).toBeFalsy();
     });
 
-    it('throws an error for a non valid url', () => {
+    it('throws an error for a non valid url', async () => {
-      page.configErrorButton.click();
+      await page.configErrorButton.click();
-      checkLogForMessage('GET "not/a/real/url"');
+      await checkLogForMessage('GET "not/a/real/url"');
-      expect(page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."');
+      expect(await page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."');
     });
   });
 
   describe('Download', () => {
-    it('can download a txt file and show it', () => {
+    it('can download a txt file and show it', async () => {
-      page.downloadButton.click();
+      await page.downloadButton.click();
-      checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"');
+      await checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"');
-      checkLogForMessage('GET "assets/textfile.txt"');
+      await checkLogForMessage('GET "assets/textfile.txt"');
-      expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
+      expect(await page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
     });
 
-    it('can clear the log of the download', () => {
+    it('can clear the log of the download', async () => {
-      page.downloadButton.click();
+      await page.downloadButton.click();
-      expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
+      expect(await page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
-      page.downloadClearButton.click();
+      await page.downloadClearButton.click();
-      expect(page.downloadMessage.isPresent()).toBeFalsy();
+      expect(await page.downloadMessage.isPresent()).toBeFalsy();
     });
   });
 
   describe('Upload', () => {
-    it('can upload a file', () => {
+    it('can upload a file', async () => {
       const filename = 'app.po.ts';
       const url = resolve(__dirname, filename);
-      page.uploadInput.sendKeys(url);
+      await page.uploadInput.sendKeys(url);
-      checkLogForMessage('POST "/upload/file" succeeded in');
+      await checkLogForMessage('POST "/upload/file" succeeded in');
-      expect(page.uploadMessage.getText()).toContain(
+      expect(await page.uploadMessage.getText()).toContain(
         `File "${filename}" was completely uploaded!`);
     });
   });
 
   describe('PackageSearch', () => {
-    it('can search for npm package and find in cache', () => {
+    it('can search for npm package and find in cache', async () => {
       const packageName = 'angular';
-      page.searchInput.sendKeys(packageName);
+      await page.searchInput.sendKeys(packageName);
-      checkLogForMessage(
+      await checkLogForMessage(
         'Caching response from "https://npmsearch.com/query?q=angular"');
-      expect(page.searchListItems.count()).toBeGreaterThan(1, 'angular items');
+      expect(await page.searchListItems.count()).toBeGreaterThan(1, 'angular items');
 
-      page.searchInput.clear();
+      await page.searchInput.clear();
-      page.searchInput.sendKeys(' ');
+      await page.searchInput.sendKeys(' ');
-      expect(page.searchListItems.count()).toBe(0, 'search empty');
+      expect(await page.searchListItems.count()).toBe(0, 'search empty');
 
-      page.searchInput.clear();
+      await page.searchInput.clear();
-      page.searchInput.sendKeys(packageName);
+      await page.searchInput.sendKeys(packageName);
-      checkLogForMessage(
+      await checkLogForMessage(
         'Found cached response for "https://npmsearch.com/query?q=angular"');
     });
   });

aio/content/examples/i18n/e2e/src/app.e2e-spec.ts

@@ -2,44 +2,42 @@ import { browser, element, by } from 'protractor';
 
 describe('i18n E2E Tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display i18n translated welcome: Bonjour !', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
   });
 
-  it('should display i18n translated welcome: Bonjour !', () => {
+  it('should display the node texts without elements', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
+    expect(await element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
   });
 
-  it('should display the node texts without elements', () => {
+  it('should display the translated title attribute', async () => {
-    expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
+    const title = await element(by.css('img')).getAttribute('title');
-  });
-
-  it('should display the translated title attribute', () => {
-    const title = element(by.css('img')).getAttribute('title');
     expect(title).toBe(`Logo d'Angular`);
   });
 
-  it('should display the ICU plural expression', () => {
+  it('should display the ICU plural expression', async () => {
-    expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
+    expect(await element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
   });
 
-  it('should display the ICU select expression', () => {
+  it('should display the ICU select expression', async () => {
     const selectIcuExp = element.all(by.css('span')).get(1);
-    expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
+    expect(await selectIcuExp.getText()).toBe(`L'auteur est une femme`);
-    element.all(by.css('button')).get(2).click();
+    await element.all(by.css('button')).get(2).click();
-    expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
+    expect(await selectIcuExp.getText()).toBe(`L'auteur est un homme`);
   });
 
-  it('should display the nested expression', () => {
+  it('should display the nested expression', async () => {
     const nestedExp = element.all(by.css('span')).get(2);
     const incBtn = element.all(by.css('button')).get(0);
-    expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
+    expect(await nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
-    incBtn.click();
+    await incBtn.click();
-    expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
+    expect(await nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
-    incBtn.click();
+    await incBtn.click();
-    incBtn.click();
+    await incBtn.click();
-    element.all(by.css('button')).get(4).click();
+    await element.all(by.css('button')).get(4).click();
-    expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
+    expect(await nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
   });
 
 });

aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts

@@ -1,14 +1,11 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, logging } from 'protractor';
-import { logging } from 'selenium-webdriver';
 
 describe('Inputs and Outputs', () => {
 
-
   beforeEach(() => browser.get(''));
 
-
    // helper function used to test what's logged to the console
-  async function logChecker(button, contents) {
+  async function logChecker(contents) {
     const logs = await browser
       .manage()
       .logs()
@@ -17,9 +14,9 @@ describe('Inputs and Outputs', () => {
     expect(messages.length).toBeGreaterThan(0);
   }
 
-  it('should have title Inputs and Outputs', () => {
+  it('should have title Inputs and Outputs', async () => {
     const title = element.all(by.css('h1')).get(0);
-    expect(title.getText()).toEqual('Inputs and Outputs');
+    expect(await title.getText()).toEqual('Inputs and Outputs');
   });
 
   it('should add 123 to the parent list', async () => {
@@ -28,36 +25,35 @@ describe('Inputs and Outputs', () => {
     const addedItem = element.all(by.css('li')).get(4);
     await addToListInput.sendKeys('123');
     await addToParentButton.click();
-    expect(addedItem.getText()).toEqual('123');
+    expect(await addedItem.getText()).toEqual('123');
   });
 
   it('should delete item', async () => {
     const deleteButton = element.all(by.css('button')).get(1);
     const contents = 'Child';
     await deleteButton.click();
-    await logChecker(deleteButton, contents);
+    await logChecker(contents);
   });
 
   it('should log buy the item', async () => {
     const buyButton = element.all(by.css('button')).get(2);
     const contents = 'Child';
     await buyButton.click();
-    await logChecker(buyButton, contents);
+    await logChecker(contents);
   });
 
   it('should save item for later', async () => {
     const saveButton = element.all(by.css('button')).get(3);
     const contents = 'Child';
     await saveButton.click();
-    await logChecker(saveButton, contents);
+    await logChecker(contents);
   });
 
   it('should add item to wishlist', async () => {
     const addToParentButton = element.all(by.css('button')).get(4);
     const addedItem = element.all(by.css('li')).get(6);
     await addToParentButton.click();
-    expect(addedItem.getText()).toEqual('Television');
+    expect(await addedItem.getText()).toEqual('Television');
   });
 
 });
-

aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts

@@ -2,46 +2,44 @@ import { browser, element, by } from 'protractor';
 
 describe('Interpolation e2e tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display Interpolation and Template Expressions', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
   });
 
-  it('should display Interpolation and Template Expressions', () => {
+  it('should display Current customer: Maria', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
+    expect(await element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
   });
 
-  it('should display Current customer: Maria', () => {
+  it('should display The sum of 1 + 1 is not 4.', async () => {
-    expect(element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
+    expect(await element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`);
   });
 
-  it('should display The sum of 1 + 1 is not 4.', () => {
+  it('should display Expression Context', async () => {
-    expect(element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`);
+    expect(await element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
   });
 
-  it('should display Expression Context', () => {
+  it('should display a list of customers', async () => {
-    expect(element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
+    expect(await element.all(by.css('li')).get(0).getText()).toBe(`Maria`);
   });
 
-  it('should display a list of customers', () => {
+  it('should display two pictures', async () => {
-    expect(element.all(by.css('li')).get(0).getText()).toBe(`Maria`);
-  });
-
-  it('should display two pictures', () => {
     const pottedPlant = element.all(by.css('img')).get(0);
     const lamp = element.all(by.css('img')).get(1);
 
-    expect(pottedPlant.getAttribute('src')).toContain('potted-plant');
+    expect(await pottedPlant.getAttribute('src')).toContain('potted-plant');
-    expect(pottedPlant.isDisplayed()).toBe(true);
+    expect(await pottedPlant.isDisplayed()).toBe(true);
 
-    expect(lamp.getAttribute('src')).toContain('lamp');
+    expect(await lamp.getAttribute('src')).toContain('lamp');
-    expect(lamp.isDisplayed()).toBe(true);
+    expect(await lamp.isDisplayed()).toBe(true);
   });
 
-  it('should support user input', () => {
+  it('should support user input', async () => {
     const input = element(by.css('input'));
     const label = element(by.css('label'));
-    expect(label.getText()).toEqual('Type something:');
+    expect(await label.getText()).toEqual('Type something:');
-    input.sendKeys('abc');
+    await input.sendKeys('abc');
-    expect(label.getText()).toEqual('Type something: abc');
+    expect(await label.getText()).toEqual('Type something: abc');
   });
 });

aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,5 @@
+import { element, by } from 'protractor';
 import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
 
 
 describe('providers App', () => {
@@ -7,41 +7,34 @@ describe('providers App', () => {
   const buttons = element.all(by.css('button'));
   const customersButton = buttons.get(0);
   const ordersButton = buttons.get(1);
-  const homeButton = buttons.get(2);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     page = new AppPage();
+    await page.navigateTo();
   });
 
-  it('should display message saying app works', () => {
+  it('should display message saying app works', async () => {
-    page.navigateTo();
+    expect(await page.getTitleText()).toEqual('Lazy loading feature modules');
-    expect(page.getTitleText()).toEqual('Lazy loading feature modules');
   });
 
   describe('Customers', () => {
-    beforeEach(() => {
+    beforeEach(() => customersButton.click());
-      customersButton.click();
-    });
 
-    it('should show customers when the button is clicked', () => {
+    it('should show customers when the button is clicked', async () => {
       const customersMessage = element(by.css('app-customers > p'));
-        expect(customersMessage.getText()).toBe('customers works!');
+      expect(await customersMessage.getText()).toBe('customers works!');
     });
 
   });
 
   describe('Orders', () => {
-    beforeEach(() => {
+    beforeEach(() => ordersButton.click());
-      ordersButton.click();
-    });
 
-    it('should show orders when the button is clicked', () => {
+    it('should show orders when the button is clicked', async () => {
       const ordersMessage = element(by.css('app-orders > p'));
-        expect(ordersMessage.getText()).toBe('orders works!');
+      expect(await ordersMessage.getText()).toBe('orders works!');
     });
 
   });
 
 });
-
-

aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts

@@ -1,40 +1,41 @@
 import { browser, element, ElementFinder, by } from 'protractor';
 
 describe('Lifecycle hooks', () => {
-  const sendKeys = (el: ElementFinder, input: string) =>
+  const sendKeys = async (el: ElementFinder, input: string) => {
-    input.split('').reduce((prev, c) => prev.then(() => el.sendKeys(c)), Promise.resolve());
+    for (const c of input.split('')) {
+      await el.sendKeys(c);
+    }
+  };
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should open correctly', () => {
+  it('should open correctly', async () => {
-    expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
+    expect(await element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
   });
 
   it('should support peek-a-boo', async () => {
     const pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
-    expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
+    expect(await pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
 
     const pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
     const updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
-    expect(pabButton.getText()).toContain('Create Peek');
+    expect(await pabButton.getText()).toContain('Create Peek');
 
     await pabButton.click();
-    expect(pabButton.getText()).toContain('Destroy Peek');
+    expect(await pabButton.getText()).toContain('Destroy Peek');
-    expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
+    expect(await pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
-    expect(pabComp.getText()).toContain('Windstorm');
+    expect(await pabComp.getText()).toContain('Windstorm');
-    expect(pabComp.getText()).not.toContain('Windstorm!');
+    expect(await pabComp.getText()).not.toContain('Windstorm!');
-    expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
+    expect(await updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
 
     await updateHeroButton.click();
-    expect(pabComp.getText()).toContain('Windstorm!');
+    expect(await pabComp.getText()).toContain('Windstorm!');
 
     await pabButton.click();
-    expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
+    expect(await pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
   });
 
-  it('should support OnChanges hook', () => {
+  it('should support OnChanges hook', async () => {
     const onChangesViewEle = element.all(by.css('on-changes div')).get(0);
     const inputEles = element.all(by.css('on-changes-parent input'));
     const heroNameInputEle = inputEles.get(1);
@@ -42,15 +43,15 @@ describe('Lifecycle hooks', () => {
     const titleEle = onChangesViewEle.element(by.css('p'));
     const changeLogEles = onChangesViewEle.all(by.css('div'));
 
-    expect(titleEle.getText()).toContain('Windstorm can sing');
+    expect(await titleEle.getText()).toContain('Windstorm can sing');
-    expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
+    expect(await changeLogEles.count()).toEqual(2, 'should start with 2 messages');
-    heroNameInputEle.sendKeys('-foo-');
+    await heroNameInputEle.sendKeys('-foo-');
-    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(await titleEle.getText()).toContain('Windstorm-foo- can sing');
-    expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
+    expect(await changeLogEles.count()).toEqual(2, 'should still have 2 messages');
-    powerInputEle.sendKeys('-bar-');
+    await powerInputEle.sendKeys('-bar-');
-    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+    expect(await titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
     // 7 == 2 previously + length of '-bar-'
-    expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
+    expect(await changeLogEles.count()).toEqual(7, 'should have 7 messages now');
   });
 
   it('should support DoCheck hook', async () => {
@@ -62,7 +63,7 @@ describe('Lifecycle hooks', () => {
     const changeLogEles = doCheckViewEle.all(by.css('div'));
     let logCount: number;
 
-    expect(titleEle.getText()).toContain('Windstorm can sing');
+    expect(await titleEle.getText()).toContain('Windstorm can sing');
 
     let count = await changeLogEles.count();
     // 3 messages to start
@@ -71,13 +72,13 @@ describe('Lifecycle hooks', () => {
     logCount = count;
     await sendKeys(heroNameInputEle, '-foo-');
     count = await changeLogEles.count();
-    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(await titleEle.getText()).toContain('Windstorm-foo- can sing');
     expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke');
 
     logCount = count;
     await sendKeys(powerInputEle, '-bar-');
     count = await changeLogEles.count();
-    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+    expect(await titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
     expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke');
   });
 
@@ -89,15 +90,15 @@ describe('Lifecycle hooks', () => {
     const childViewInputEle = parentEle.element(by.css('app-child-view input'));
     let logCount: number;
 
-    expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+    expect(await childViewInputEle.getAttribute('value')).toContain('Magneta');
-    expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+    expect(await commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
     logCount = await logEles.count();
     await childViewInputEle.sendKeys('-test-');
 
-    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(await childViewInputEle.getAttribute('value')).toContain('-test-');
-    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+    expect(await commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-    expect(commentEle.getText()).toContain('long name');
+    expect(await commentEle.getText()).toContain('long name');
 
     const count = await logEles.count();
     expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added');
@@ -105,7 +106,7 @@ describe('Lifecycle hooks', () => {
 
     logCount = count;
     await buttonEle.click();
-    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+    expect(await logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
   });
 
   it('should support AfterContent hooks', async () => {
@@ -116,19 +117,19 @@ describe('Lifecycle hooks', () => {
     const childViewInputEle = parentEle.element(by.css('app-child input'));
     let logCount = await logEles.count();
 
-    expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
+    expect(await childViewInputEle.getAttribute('value')).toContain('Magneta');
-    expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
+    expect(await commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
     await sendKeys(childViewInputEle, '-test-');
     const count = await logEles.count();
-    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(await childViewInputEle.getAttribute('value')).toContain('-test-');
-    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+    expect(await commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-    expect(commentEle.getText()).toContain('long name');
+    expect(await commentEle.getText()).toContain('long name');
     expect(count).toBeGreaterThanOrEqual(logCount + 5, 'additional log messages should have been added');
 
     logCount = count;
     await buttonEle.click();
-    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
+    expect(await logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
   });
 
   it('should support spy\'s OnInit & OnDestroy hooks', async () => {
@@ -138,18 +139,18 @@ describe('Lifecycle hooks', () => {
     const heroEles = element.all(by.css('spy-parent div[appSpy'));
     const logEles = element.all(by.css('spy-parent h4 ~ div'));
 
-    expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
+    expect(await heroEles.count()).toBe(2, 'should have two heroes displayed');
-    expect(logEles.count()).toBe(2, 'should have two log entries');
+    expect(await logEles.count()).toBe(2, 'should have two log entries');
 
     await inputEle.sendKeys('-test-');
     await addHeroButtonEle.click();
-    expect(heroEles.count()).toBe(3, 'should have added one hero');
+    expect(await heroEles.count()).toBe(3, 'should have added one hero');
-    expect(heroEles.get(2).getText()).toContain('-test-');
+    expect(await heroEles.get(2).getText()).toContain('-test-');
-    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+    expect(await logEles.count()).toBe(3, 'should now have 3 log entries');
 
     await resetHeroesButtonEle.click();
-    expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
+    expect(await heroEles.count()).toBe(0, 'should no longer have any heroes');
-    expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
+    expect(await logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
   });
 
   it('should support "spy counter"', async () => {
@@ -158,15 +159,15 @@ describe('Lifecycle hooks', () => {
     const textEle = element(by.css('counter-parent app-counter > div'));
     const logEles = element.all(by.css('counter-parent h4 ~ div'));
 
-    expect(textEle.getText()).toContain('Counter = 0');
+    expect(await textEle.getText()).toContain('Counter = 0');
-    expect(logEles.count()).toBe(2, 'should start with two log entries');
+    expect(await logEles.count()).toBe(2, 'should start with two log entries');
 
     await updateCounterButtonEle.click();
-    expect(textEle.getText()).toContain('Counter = 1');
+    expect(await textEle.getText()).toContain('Counter = 1');
-    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+    expect(await logEles.count()).toBe(3, 'should now have 3 log entries');
 
     await resetCounterButtonEle.click();
-    expect(textEle.getText()).toContain('Counter = 0');
+    expect(await textEle.getText()).toContain('Counter = 0');
-    expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
+    expect(await logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
   });
 });

aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts

@@ -56,116 +56,109 @@ describe('NgModule-example', () => {
   // tests
   function appTitleTests(color: string, name?: string) {
     return () => {
-      it('should have a gray header', () => {
+      it('should have a gray header', async () => {
         const commons = getCommonsSectionStruct();
-        expect(commons.title.getCssValue('backgroundColor')).toBe(color);
+        expect(await commons.title.getCssValue('backgroundColor')).toBe(color);
       });
 
-      it('should welcome us', () => {
+      it('should welcome us', async () => {
         const commons = getCommonsSectionStruct();
-        expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Miss Marple'));
+        expect(await commons.subtitle.getText()).toBe(`Welcome, ${name || 'Miss Marple'}`);
       });
     };
   }
 
   function contactTests(color: string, name?: string) {
     return () => {
-      it('shows the contact\'s owner', () => {
+      it('shows the contact\'s owner', async () => {
         const contacts = getContactSectionStruct();
-        expect(contacts.header.getText()).toBe((name ||  'Miss Marple') + '\'s Contacts');
+        expect(await contacts.header.getText()).toBe(`${name || 'Miss Marple'}'s Contacts`);
       });
 
-      it('can cycle between contacts', () => {
+      it('can cycle between contacts', async () => {
         const contacts = getContactSectionStruct();
         const nextButton = contacts.nextContactButton;
-        expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha');
+        expect(await contacts.contactNameHeader.getText()).toBe('Awesome Yasha');
-        expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
+        expect(await contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
-        nextButton.click().then(() => {
+
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia');
+        await nextButton.click();
-          return nextButton.click();
+        expect(await contacts.contactNameHeader.getText()).toBe('Awesome Iulia');
-        }).then(() => {
+
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina');
+        await nextButton.click();
-        });
+        expect(await contacts.contactNameHeader.getText()).toBe('Awesome Karina');
       });
 
-      it('can create a new contact', () => {
+      it('can create a new contact', async () => {
         const contacts = getContactSectionStruct();
         const newContactButton = contacts.newContactButton;
         const nextButton = contacts.nextContactButton;
         const input = contacts.input;
         const saveButton = contacts.saveButton;
 
-        newContactButton.click().then(() => {
+        await newContactButton.click();
-          input.click();
+        await input.click();
-          nextButton.click();
+        await nextButton.click();
-          expect(contacts.validationError.getText()).toBe('Name is required.');
+        expect(await contacts.validationError.getText()).toBe('Name is required.');
-          input.click();
-          contacts.input.sendKeys('Watson');
-          saveButton.click();
-          expect(contacts.contactNameHeader.getText()).toBe('Awesome Watson');
 
-        });
+        await input.click();
+        await contacts.input.sendKeys('Watson');
+        await saveButton.click();
+        expect(await contacts.contactNameHeader.getText()).toBe('Awesome Watson');
       });
     };
   }
 
   describe('index.html', () => {
-    beforeEach(() => {
+    beforeEach(() => browser.get(''));
-      browser.get('');
-    });
 
     describe('app-title', appTitleTests(white, 'Miss Marple'));
 
     describe('contact', contactTests(lightgray, 'Miss Marple'));
 
     describe('item center', () => {
-      beforeEach(() => {
+      beforeEach(() => getCommonsSectionStruct().itemButton.click());
-        getCommonsSectionStruct().itemButton.click();
+
+      it('shows a list of items', async () => {
+        const item = getItemSectionStruct();
+        expect(await item.title.getText()).toBe('Items List');
+        expect(await item.items.count()).toBe(4);
+        expect(await item.items.get(0).getText()).toBe('1 - Sticky notes');
       });
 
-      it('shows a list of items', () => {
+      it('can navigate to one item details', async () => {
         const item = getItemSectionStruct();
-        expect(item.title.getText()).toBe('Items List');
-        expect(item.items.count()).toBe(4);
-        expect(item.items.get(0).getText()).toBe('1 - Sticky notes');
-      });
 
-      it('can navigate to one item details', () => {
+        await item.items.get(0).click();
-        const item = getItemSectionStruct();
+        expect(await item.itemId.getText()).toBe('Item id: 1');
-        item.items.get(0).click().then(() => {
+
-          expect(item.itemId.getText()).toBe('Item id: 1');
+        await item.listLink.click();
-          return item.listLink.click();
-        }).then(() => {
         // We are back to the list
-          expect(item.items.count()).toBe(4);
+        expect(await item.items.count()).toBe(4);
-        });
       });
     });
 
     describe('customers', () => {
-      beforeEach(() => {
+      beforeEach(() => getCommonsSectionStruct().customersButton.click());
-        getCommonsSectionStruct().customersButton.click();
+
+      it('shows a list of customers', async () => {
+        const customers = getCustomersSectionStruct();
+        expect(await customers.header.getText()).toBe('Customers of Miss Marple times 2');
+        expect(await customers.title.getText()).toBe('Customer List');
+        expect(await customers.items.count()).toBe(6);
+        expect(await customers.items.get(0).getText()).toBe('11 - Julian');
       });
 
-      it('shows a list of customers', () => {
+      it('can navigate and edit one customer details', async () => {
         const customers = getCustomersSectionStruct();
-        expect(customers.header.getText()).toBe('Customers of Miss Marple times 2');
-        expect(customers.title.getText()).toBe('Customer List');
-        expect(customers.items.count()).toBe(6);
-        expect(customers.items.get(0).getText()).toBe('11 - Julian');
-      });
 
-      it('can navigate and edit one customer details', () => {
+        await customers.items.get(0).click();
-        const customers = getCustomersSectionStruct();
+        expect(await customers.itemId.getText()).toBe('Id: 11');
-        customers.items.get(0).click().then(() => {
+
-          expect(customers.itemId.getText()).toBe('Id: 11');
+        await customers.itemInput.sendKeys(' try');
-          customers.itemInput.sendKeys(' try');
+        await customers.listLink.click();
-          return customers.listLink.click();
-        }).then(() => {
         // We are back to the list
-          expect(customers.items.count()).toBe(6);
+        expect(await customers.items.count()).toBe(6);
-          expect(customers.items.get(0).getText()).toBe('11 - Julian try');
+        expect(await customers.items.get(0).getText()).toBe('11 - Julian try');
-        });
       });
     });
   });

aio/content/examples/pipes/e2e/src/app.e2e-spec.ts

@@ -1,114 +1,108 @@
 import { browser, element, by } from 'protractor';
-const { version: angularVersion } = require('@angular/core/package.json');
 
 describe('Pipes', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
+
+  it('should open correctly', async () => {
+    expect(await element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
+    expect(await element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
   });
 
-  it('should open correctly', () => {
+  it('should show 4 heroes', async () => {
-    expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
+    expect(await element.all(by.css('app-hero-list div')).count()).toEqual(4);
-    expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
   });
 
-  it('should show 4 heroes', () => {
+  it('should show a familiar hero in json', async () => {
-    expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
+    expect(await element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
   });
 
-  it('should show a familiar hero in json', () => {
+  it('should show alternate birthday formats', async () => {
-    expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
+    expect(await element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed())
+        .toBe(true);
+    expect(await element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed())
+        .toBe(true);
   });
 
-  it('should show alternate birthday formats', () => {
+  it('should be able to toggle birthday formats', async () => {
-    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
-    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
-  });
-
-  it('should be able to toggle birthday formats', () => {
     const birthDayEle = element(by.css('app-hero-birthday2 > p'));
-    if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884)
+    expect(await birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
-      expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
+
-    } else {
-      expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
-    }
     const buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format'));
-    expect(buttonEle.isDisplayed()).toBe(true);
+    expect(await buttonEle.isDisplayed()).toBe(true);
-    buttonEle.click().then(() => {
+
-      expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
+    await buttonEle.click();
-    });
+    expect(await birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
   });
 
-  it('should be able to chain and compose pipes', () => {
+  it('should be able to chain and compose pipes', async () => {
     const chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`));
-    expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
+    expect(await chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
-    expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
+    expect(await chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
-    expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
+    expect(await chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
-    expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
+    expect(await chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
   });
 
-  it('should be able to use ExponentialStrengthPipe pipe', () => {
+  it('should be able to use ExponentialStrengthPipe pipe', async () => {
     const ele = element(by.css('app-power-booster p'));
-    expect(ele.getText()).toContain('Super power boost: 1024');
+    expect(await ele.getText()).toContain('Super power boost: 1024');
   });
 
-  it('should be able to use the exponential calculator', () => {
+  it('should be able to use the exponential calculator', async () => {
     const eles = element.all(by.css('app-power-boost-calculator input'));
     const baseInputEle = eles.get(0);
     const factorInputEle = eles.get(1);
     const outputEle = element(by.css('app-power-boost-calculator p'));
-    baseInputEle.clear().then(() => {
+
-      baseInputEle.sendKeys('7');
+    await baseInputEle.clear();
-      return factorInputEle.clear();
+    await baseInputEle.sendKeys('7');
-    }).then(() => {
+    await factorInputEle.clear();
-      factorInputEle.sendKeys('3');
+    await factorInputEle.sendKeys('3');
-      expect(outputEle.getText()).toContain('343');
+    expect(await outputEle.getText()).toContain('343');
-    });
   });
 
 
-  it('should support flying heroes (pure) ', () => {
+  it('should support flying heroes (pure) ', async () => {
     const nameEle = element(by.css('app-flying-heroes input[type="text"]'));
     const canFlyCheckEle = element(by.css('app-flying-heroes #can-fly'));
     const mutateCheckEle = element(by.css('app-flying-heroes #mutate'));
     const resetEle = element(by.css('app-flying-heroes button'));
     const flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div'));
 
-    expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+    expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
-    expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+    expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
-    expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+    expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
 
-    nameEle.sendKeys('test1\n');
+    await nameEle.sendKeys('test1\n');
-    expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
+    expect(await flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
-    mutateCheckEle.click().then(() => {
+
-      nameEle.sendKeys('test2\n');
+    await mutateCheckEle.click();
-      expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
+    await nameEle.sendKeys('test2\n');
-      expect(flyingHeroesEle.get(2).getText()).toContain('test1');
+    expect(await flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
-      expect(flyingHeroesEle.get(3).getText()).toContain('test2');
+    expect(await flyingHeroesEle.get(2).getText()).toContain('test1');
-      return resetEle.click();
+    expect(await flyingHeroesEle.get(3).getText()).toContain('test2');
-    })
+
-    .then(() => {
+    await resetEle.click();
-       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
+    expect(await flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
-    });
   });
 
 
-  it('should support flying heroes (impure) ', () => {
+  it('should support flying heroes (impure) ', async () => {
     const nameEle = element(by.css('app-flying-heroes-impure input[type="text"]'));
     const canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly'));
     const mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate'));
     const flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div'));
 
-    expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
+    expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
-    expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
+    expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
-    expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
+    expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
 
-    nameEle.sendKeys('test1\n');
+    await nameEle.sendKeys('test1\n');
-    expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
+    expect(await flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
   });
 
-  it('should show an async hero message', () => {
+  it('should show an async hero message', async () => {
-    expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
+    expect(await element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
   });
 
 });

aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts

@@ -3,52 +3,50 @@ import { browser, element, by } from 'protractor';
 
 describe('Property binding e2e tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display Property Binding with Angular', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Property Binding with Angular');
   });
 
-  it('should display Property Binding with Angular', () => {
+  it('should display four phone pictures', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Property Binding with Angular');
+    expect(await element.all(by.css('img')).isPresent()).toBe(true);
+    expect(await element.all(by.css('img')).count()).toBe(4);
   });
 
-  it('should display four phone pictures', () => {
+  it('should display Disabled button', async () => {
-    expect(element.all(by.css('img')).isPresent()).toBe(true);
+    expect(await element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`);
-    expect(element.all(by.css('img')).count()).toBe(4);
-
   });
 
-  it('should display Disabled button', () => {
+  it('should display Binding to a property of a directive', async () => {
-    expect(element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`);
+    expect(await element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`);
   });
 
-  it('should display Binding to a property of a directive', () => {
+  it('should display blue', async () => {
-    expect(element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`);
+    expect(await element.all(by.css('p')).get(0).getText()).toContain(`blue`);
   });
 
-  it('should display Your item is: lamp', () => {
+  it('should display Your item is: lamp', async () => {
-    expect(element.all(by.css('p')).get(0).getText()).toContain(`blue`);
+    expect(await element.all(by.css('p')).get(1).getText()).toContain(`Your item is: lamp`);
-  });
-  it('should display Your item is: lamp', () => {
-    expect(element.all(by.css('p')).get(1).getText()).toContain(`Your item is: lamp`);
   });
 
-  it('should display Your item is: parentItem', () => {
+  it('should display Your item is: parentItem', async () => {
-    expect(element.all(by.css('p')).get(2).getText()).toBe(`Your item is: parentItem`);
+    expect(await element.all(by.css('p')).get(2).getText()).toBe(`Your item is: parentItem`);
   });
 
-  it('should display a ul', () => {
+  it('should display a ul', async () => {
-    expect(element.all(by.css('ul')).get(0).getText()).toContain(`tv`);
+    expect(await element.all(by.css('ul')).get(0).getText()).toContain(`tv`);
   });
 
-  it('should display a ul containing phone', () => {
+  it('should display a ul containing phone', async () => {
-    expect(element.all(by.css('ul')).get(1).getText()).toBe(`21 phone`);
+    expect(await element.all(by.css('ul')).get(1).getText()).toBe(`21 phone`);
   });
 
-  it('should display one-time initialized string', () => {
+  it('should display one-time initialized string', async () => {
-    expect(element.all(by.css('p')).get(3).getText()).toContain(`one-time initialized`);
+    expect(await element.all(by.css('p')).get(3).getText()).toContain(`one-time initialized`);
   });
 
-  it('should display Malicious content', () => {
+  it('should display Malicious content', async () => {
-    expect(element.all(by.css('h2')).get(8).getText()).toBe(`Malicious content`);
+    expect(await element.all(by.css('h2')).get(8).getText()).toBe(`Malicious content`);
   });
 });

aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts

@@ -1,24 +1,19 @@
 import { browser, element, by } from 'protractor';
-import { logging } from 'selenium-webdriver';
 
 describe('Providers and ViewProviders', () => {
 
+  beforeEach(() => browser.get(''));
 
-  beforeEach(() => {
+  it('shows basic flower emoji', async () => {
-    browser.get('');
+    expect(await element.all(by.css('p')).get(0).getText()).toContain('🌺');
   });
 
-  it('shows basic flower emoji', () => {
+  it('shows whale emoji', async () => {
-    expect(element.all(by.css('p')).get(0).getText()).toContain('🌺');
+    expect(await element.all(by.css('p')).get(1).getText()).toContain('🐳');
   });
 
-  it('shows whale emoji', () => {
+  it('shows sunflower from FlowerService', async () => {
-    expect(element.all(by.css('p')).get(1).getText()).toContain('🐳');
+    expect(await element.all(by.css('p')).get(8).getText()).toContain('🌻');
-  });
-
-  it('shows sunflower from FlowerService', () => {
-    expect(element.all(by.css('p')).get(8).getText()).toContain('🌻');
   });
 
 });
-

aio/content/examples/providers/e2e/src/app.e2e-spec.ts

@@ -1,37 +1,23 @@
+import { element, by } from 'protractor';
 import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
 
 describe('providers App', () => {
   let page: AppPage;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     page = new AppPage();
+    await page.navigateTo();
   });
 
-  function getUsersStruct() {
+  it('should display header that says Users list', async () => {
-    return {
+    expect(await page.getTitleText()).toEqual('Users list');
-      user: element.all(by.css('ng-component li')).get(0),
-      userId: element.all(by.css('ng-component span')).get(0)
-    };
-  }
-
-  function getListSectionStruct() {
-    return {
-      items: element.all(by.css('app-root li'))
-    };
-  }
-
-  it('should display header that says Users list', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Users list');
   });
 
-
+  it('shows a list of customers', async () => {
-  it('shows a list of customers', () => {
+    const items = element.all(by.css('app-root li'));
-    const list = getListSectionStruct();
+    expect(await items.count()).toBe(10);
-    expect(list.items.count()).toBe(10);
+    expect(await items.get(0).getText()).toBe('1 Maria');
-    expect(list.items.get(0).getText()).toBe('1 Maria');
+    expect(await items.get(9).getText()).toBe('10 Seth');
-    expect(list.items.get(9).getText()).toBe('10 Seth');
   });
 
 });

aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts

@@ -6,9 +6,7 @@ describe('Reactive forms', () => {
   const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor'));
   const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor'));
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
   describe('Name Editor', () => {
     const nameInput = nameEditor.element(by.css('input'));
@@ -55,7 +53,6 @@ describe('Reactive forms', () => {
 
   describe('Profile Editor', () => {
     const firstNameInput = getInput('firstName');
-    const lastNameInput = getInput('lastName');
     const streetInput = getInput('street');
     const addAliasButton = element(by.buttonText('Add Alias'));
     const updateButton = profileEditor.element(by.buttonText('Update Profile'));
@@ -117,7 +114,7 @@ describe('Reactive forms', () => {
 
     it('should update the displayed form value when form inputs are updated', async () => {
       const aliasText = 'Johnny';
-      const inputs = await Promise.all(
+      await Promise.all(
         Object.keys(profile)
           .map(key =>
             getInput(key).sendKeys(`${profile[key]}`)

aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts

@@ -2,20 +2,18 @@ import { browser, element, by } from 'protractor';
 
 describe('Resolution-modifiers-example', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
+
+  it('shows basic flower emoji', async () => {
+    expect(await element.all(by.css('p')).get(0).getText()).toContain('🌸');
   });
 
-  it('shows basic flower emoji', () => {
+  it('shows basic leaf emoji', async () => {
-    expect(element.all(by.css('p')).get(0).getText()).toContain('🌸');
+    expect(await element.all(by.css('p')).get(1).getText()).toContain('🌿');
   });
 
-  it('shows basic leaf emoji', () => {
+  it('shows yellow flower in host child', async () => {
-    expect(element.all(by.css('p')).get(1).getText()).toContain('🌿');
+    expect(await element.all(by.css('p')).get(9).getText()).toContain('🌼');
-  });
-
-  it('shows yellow flower in host child', () => {
-    expect(element.all(by.css('p')).get(9).getText()).toContain('🌼');
   });
 
 });

aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts

@@ -2,41 +2,39 @@ import { browser, element, by } from 'protractor';
 
 describe('Router basic tutorial e2e tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
+
+  it('should display Angular Router Sample', async () => {
+    expect(await element(by.css('h1')).getText()).toBe('Angular Router Sample');
   });
 
-  it('should display Angular Router Sample', () => {
+  it('should display Crisis Center button', async () => {
-    expect(element(by.css('h1')).getText()).toBe('Angular Router Sample');
+    expect(await element.all(by.css('a')).get(0).getText()).toBe('Crisis Center');
   });
 
-  it('should display Crisis Center button', () => {
+  it('should display Heroes button', async () => {
-    expect(element.all(by.css('a')).get(0).getText()).toBe('Crisis Center');
+    expect(await element.all(by.css('a')).get(1).getText()).toBe('Heroes');
   });
 
-  it('should display Heroes button', () => {
+  it('should display HEROES', async () => {
-    expect(element.all(by.css('a')).get(1).getText()).toBe('Heroes');
+    expect(await element(by.css('h3')).getText()).toBe('HEROES');
-  });
-
-  it('should display HEROES', () => {
-    expect(element(by.css('h3')).getText()).toBe('HEROES');
   });
 
   it('should change to display crisis list component', async () => {
     const crisisButton = element.all(by.css('a')).get(0);
     await crisisButton.click();
-    expect(element(by.css('h3')).getText()).toBe('CRISIS CENTER');
+    expect(await element(by.css('h3')).getText()).toBe('CRISIS CENTER');
   });
 
   it('should change to display heroes component', async () => {
     const heroesButton = element.all(by.css('a')).get(1);
     await heroesButton.click();
-    expect(element(by.css('h3')).getText()).toBe('HEROES');
+    expect(await element(by.css('h3')).getText()).toBe('HEROES');
   });
 
   it('should use wildcard route', async () => {
-    browser.get('/fake-page');
+    await browser.get('/fake-page');
-    expect(browser.getCurrentUrl()).toContain('fake-page');
+    expect(await browser.getCurrentUrl()).toContain('fake-page');
-    expect(element(by.css('h2')).getText()).toBe('Page Not Found');
+    expect(await element(by.css('h2')).getText()).toBe('Page Not Found');
   });
 });

aio/content/examples/router/e2e/src/app.e2e-spec.ts

@@ -1,9 +1,8 @@
-import { browser, element, by, ExpectedConditions } from 'protractor';
+import { browser, element, by, ExpectedConditions as EC } from 'protractor';
 
 const numDashboardTabs = 5;
 const numCrises = 4;
 const numHeroes = 10;
-const EC = ExpectedConditions;
 
 describe('Router', () => {
 
@@ -43,43 +42,43 @@ describe('Router', () => {
     };
   }
 
-  it('has expected dashboard tabs', () => {
+  it('has expected dashboard tabs', async () => {
     const page = getPageStruct();
-    expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
+    expect(await page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
-    expect(page.crisisHref.getText()).toEqual('Crisis Center');
+    expect(await page.crisisHref.getText()).toEqual('Crisis Center');
-    expect(page.heroesHref.getText()).toEqual('Heroes');
+    expect(await page.heroesHref.getText()).toEqual('Heroes');
-    expect(page.adminHref.getText()).toEqual('Admin');
+    expect(await page.adminHref.getText()).toEqual('Admin');
-    expect(page.loginHref.getText()).toEqual('Login');
+    expect(await page.loginHref.getText()).toEqual('Login');
-    expect(page.contactHref.getText()).toEqual('Contact');
+    expect(await page.contactHref.getText()).toEqual('Contact');
   });
 
-  it('has heroes selected as opening tab', () => {
+  it('has heroes selected as opening tab', async () => {
     const page = getPageStruct();
-    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(await page.activeHref.getText()).toEqual('Heroes');
   });
 
   it('has crises center items', async () => {
     const page = getPageStruct();
     await page.crisisHref.click();
-    expect(page.activeHref.getText()).toEqual('Crisis Center');
+    expect(await page.activeHref.getText()).toEqual('Crisis Center');
-    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
+    expect(await page.crisisList.count()).toBe(numCrises, 'crisis list count');
   });
 
   it('has hero items', async () => {
     const page = getPageStruct();
     await page.heroesHref.click();
-    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(await page.activeHref.getText()).toEqual('Heroes');
-    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
+    expect(await page.heroesList.count()).toBe(numHeroes, 'hero list count');
   });
 
   it('toggles views', async () => {
     const page = getPageStruct();
     await page.crisisHref.click();
-    expect(page.activeHref.getText()).toEqual('Crisis Center');
+    expect(await page.activeHref.getText()).toEqual('Crisis Center');
-    expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
+    expect(await page.crisisList.count()).toBe(numCrises, 'crisis list count');
     await page.heroesHref.click();
-    expect(page.activeHref.getText()).toEqual('Heroes');
+    expect(await page.activeHref.getText()).toEqual('Heroes');
-    expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
+    expect(await page.heroesList.count()).toBe(numHeroes, 'hero list count');
   });
 
   it('saves changed crisis details', async () => {
@@ -107,17 +106,17 @@ describe('Router', () => {
 
     await heroEle.click();
     await browser.sleep(600);
-    expect(page.heroesList.count()).toBe(0, 'hero list count');
+    expect(await page.heroesList.count()).toBe(0, 'hero list count');
-    expect(page.heroDetail.isPresent()).toBe(true, 'hero detail');
+    expect(await page.heroDetail.isPresent()).toBe(true, 'hero detail');
-    expect(page.heroDetailTitle.getText()).toContain(heroText);
+    expect(await page.heroDetailTitle.getText()).toContain(heroText);
     const inputEle = page.heroDetail.element(by.css('input'));
     await inputEle.sendKeys('-foo');
-    expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
+    expect(await page.heroDetailTitle.getText()).toContain(heroText + '-foo');
 
     const buttonEle = page.heroDetail.element(by.css('button'));
     await buttonEle.click();
     await browser.sleep(600);
-    expect(heroEle.getText()).toContain(heroText + '-foo');
+    expect(await heroEle.getText()).toContain(heroText + '-foo');
   });
 
   it('sees preloaded modules', async () => {
@@ -125,7 +124,7 @@ describe('Router', () => {
     await page.loginHref.click();
     await page.loginButton.click();
     const list = page.adminPreloadList;
-    expect(list.count()).toBe(1, 'preloaded module');
+    expect(await list.count()).toBe(1, 'preloaded module');
     expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module');
   });
 
@@ -133,8 +132,8 @@ describe('Router', () => {
     const page = getPageStruct();
     await page.heroesHref.click();
     await page.contactHref.click();
-    expect(page.primaryOutlet.count()).toBe(1, 'primary outlet');
+    expect(await page.primaryOutlet.count()).toBe(1, 'primary outlet');
-    expect(page.secondaryOutlet.count()).toBe(1, 'secondary outlet');
+    expect(await page.secondaryOutlet.count()).toBe(1, 'secondary outlet');
   });
 
   it('should redirect with secondary route', async () => {
@@ -159,7 +158,7 @@ describe('Router', () => {
     await page.loginButton.click();
 
     expect(await page.adminPage.isDisplayed()).toBeTruthy();
-    expect(page.secondaryOutlet.count()).toBeTruthy();
+    expect(await page.secondaryOutlet.count()).toBeTruthy();
   });
 
   async function crisisCenterEdit(index: number, save: boolean) {
@@ -172,8 +171,8 @@ describe('Router', () => {
     const crisisText = text.substr(text.indexOf(' ')).trim();
 
     await crisisEle.click();
-    expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
+    expect(await page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
-    expect(page.crisisDetailTitle.getText()).toContain(crisisText);
+    expect(await page.crisisDetailTitle.getText()).toContain(crisisText);
     const inputEle = page.crisisDetail.element(by.css('input'));
     await inputEle.sendKeys('-foo');
 
@@ -181,11 +180,11 @@ describe('Router', () => {
     await buttonEle.click();
     crisisEle = page.crisisList.get(index);
     if (save) {
-      expect(crisisEle.getText()).toContain(crisisText + '-foo');
+      expect(await crisisEle.getText()).toContain(crisisText + '-foo');
     } else {
       await browser.wait(EC.alertIsPresent(), 4000);
       await browser.switchTo().alert().accept();
-      expect(crisisEle.getText()).toContain(crisisText);
+      expect(await crisisEle.getText()).toContain(crisisText);
     }
   }
 

aio/content/examples/security/e2e/src/app.e2e-spec.ts

@@ -3,33 +3,33 @@ import { browser, element, By } from 'protractor';
 describe('Security E2E Tests', () => {
   beforeAll(() => browser.get(''));
 
-  it('sanitizes innerHTML', () => {
+  it('sanitizes innerHTML', async () => {
     const interpolated = element(By.className('e2e-inner-html-interpolated'));
-    expect(interpolated.getText())
+    expect(await interpolated.getText())
         .toContain('Template <script>alert("0wned")</script> <b>Syntax</b>');
     const bound = element(By.className('e2e-inner-html-bound'));
-    expect(bound.getText()).toContain('Template Syntax');
+    expect(await bound.getText()).toContain('Template Syntax');
     const bold = element(By.css('.e2e-inner-html-bound b'));
-    expect(bold.getText()).toContain('Syntax');
+    expect(await bold.getText()).toContain('Syntax');
   });
 
-  it('escapes untrusted URLs', () => {
+  it('escapes untrusted URLs', async () => {
     const untrustedUrl = element(By.className('e2e-dangerous-url'));
-    expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/);
+    expect(await untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/);
   });
 
-  it('binds trusted URLs', () => {
+  it('binds trusted URLs', async () => {
     const trustedUrl = element(By.className('e2e-trusted-url'));
-    expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/);
+    expect(await trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/);
   });
 
-  it('escapes untrusted resource URLs', () => {
+  it('escapes untrusted resource URLs', async () => {
     const iframe = element(By.className('e2e-iframe-untrusted-src'));
-    expect(iframe.getAttribute('src')).toBe('');
+    expect(await iframe.getAttribute('src')).toBe('');
   });
 
-  it('binds trusted resource URLs', () => {
+  it('binds trusted resource URLs', async () => {
     const iframe = element(By.className('e2e-iframe-trusted-src'));
-    expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//);
+    expect(await iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//);
   });
 });

aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts

@@ -1,45 +1,44 @@
 import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
+import { element, by } from 'protractor';
 
 
 describe('sw-example App', () => {
   let page: AppPage;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     page = new AppPage();
+    await page.navigateTo();
   });
 
-  it('should display welcome message', () => {
+  it('should display welcome message', async () => {
-    page.navigateTo();
+    expect(await page.getTitleText()).toEqual('Welcome to Service Workers!');
-    expect(page.getTitleText()).toEqual('Welcome to Service Workers!');
   });
 
-  it('should display the Angular logo', () => {
+  it('should display the Angular logo', async () => {
     const logo = element(by.css('img'));
-    page.navigateTo();
+    expect(await logo.isPresent()).toBe(true);
-    expect(logo.isPresent()).toBe(true);
   });
 
-  it('should show a header for the list of links', () => {
+  it('should show a header for the list of links', async () => {
     const listHeader = element(by.css('app-root > h2'));
-    expect(listHeader.getText()).toEqual('Here are some links to help you start:');
+    expect(await listHeader.getText()).toEqual('Here are some links to help you start:');
   });
 
-  it('should show a list of links', () => {
+  it('should show a list of links', async () => {
-      element.all(by.css('ul > li > h2 > a')).then((items) => {
+    const items = await element.all(by.css('ul > li > h2 > a'));
+
     expect(items.length).toBe(4);
-        expect(items[0].getText()).toBe('Angular Service Worker Intro');
+    expect(await items[0].getText()).toBe('Angular Service Worker Intro');
-        expect(items[1].getText()).toBe('Tour of Heroes');
+    expect(await items[1].getText()).toBe('Tour of Heroes');
-        expect(items[2].getText()).toBe('CLI Documentation');
+    expect(await items[2].getText()).toBe('CLI Documentation');
-        expect(items[3].getText()).toBe('Angular blog');
+    expect(await items[3].getText()).toBe('Angular blog');
-      });
   });
 
   // Check for a rejected promise as the service worker is not enabled
-  it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
+  it('SwUpdate.checkForUpdate() should return a rejected promise', async () => {
     const button = element(by.css('button'));
     const rejectMessage = element(by.css('p'));
-    button.click();
+    await button.click();
-    expect(rejectMessage.getText()).toContain('rejected: ');
+    expect(await rejectMessage.getText()).toContain('rejected: ');
   });
 });

aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts

@@ -1,26 +1,21 @@
-import { browser, element, by, ElementFinder } from 'protractor';
+import { browser, element, by } from 'protractor';
 
 describe('Set Document Title', () => {
 
-  beforeAll(() => browser.get(''));
+  beforeEach(() => browser.get(''));
-
-  it('should set the document title', () => {
 
+  it('should set the document title', async () => {
+    const elems = await element.all(by.css('ul li a'));
     const titles = [
       'Good morning!',
       'Good afternoon!',
-      'Good evening!'
+      'Good evening!',
     ];
 
-    element.all( by.css( 'ul li a' ) ).each(
+    for (let i = 0; i < elems.length; i++) {
-      function iterator( elem: ElementFinder, i: number ) {
+      await elems[i].click();
-
+      expect(await browser.getTitle()).toEqual(titles[i]);
-        elem.click();
-        expect( browser.getTitle() ).toEqual( titles[ i ] );
-
     }
-    );
-
   });
 
 });

aio/content/examples/set-document-title/src/app/app.component.ts

@@ -6,8 +6,8 @@ import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
-template:
+  template: `
-  `<p>
+    <p>
       Select a title to set on the current HTML document:
     </p>
 
@@ -16,7 +16,7 @@ template:
       <li><a (click)="setTitle('Good afternoon!')">Good afternoon</a>.</li>
       <li><a (click)="setTitle('Good evening!')">Good evening</a>.</li>
     </ul>
-  `
+  `,
 })
 // #docregion class
 export class AppComponent {

aio/content/examples/setup/e2e/src/app.e2e-spec.ts

@@ -4,12 +4,10 @@ describe('QuickStart E2E Tests', () => {
 
   const expectedMsg = 'Hello Angular';
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-  });
 
-  it(`should display: ${expectedMsg}`, () => {
+  it(`should display: ${expectedMsg}`, async () => {
-    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+    expect(await element(by.css('h1')).getText()).toEqual(expectedMsg);
   });
 
 });

aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts

@@ -2,55 +2,52 @@ import { browser, element, by } from 'protractor';
 
 describe('Structural Directives', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('first div should show hero name with *ngIf', () => {
+  it('first div should show hero name with *ngIf', async () => {
     const allDivs = element.all(by.tagName('div'));
-    expect(allDivs.get(0).getText()).toEqual('Dr Nice');
+    expect(await allDivs.get(0).getText()).toEqual('Dr Nice');
   });
 
-  it('first li should show hero name with *ngFor', () => {
+  it('first li should show hero name with *ngFor', async () => {
     const allLis = element.all(by.tagName('li'));
-    expect(allLis.get(0).getText()).toEqual('Dr Nice');
+    expect(await allLis.get(0).getText()).toEqual('Dr Nice');
   });
 
-  it('ngSwitch have two <happy-hero> instances', () => {
+  it('ngSwitch have two <happy-hero> instances', async () => {
     const happyHeroEls = element.all(by.tagName('app-happy-hero'));
-    expect(happyHeroEls.count()).toEqual(2);
+    expect(await happyHeroEls.count()).toEqual(2);
   });
 
-  it('should toggle *ngIf="hero" with a button', () => {
+  it('should toggle *ngIf="hero" with a button', async () => {
     const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0);
     const paragraph = element.all(by.cssContainingText('p', 'I turned the corner'));
-    expect(paragraph.get(0).getText()).toContain('I waved');
+    expect(await paragraph.get(0).getText()).toContain('I waved');
-    toggleHeroButton.click().then(() => {
+    await toggleHeroButton.click();
-      expect(paragraph.get(0).getText()).not.toContain('I waved');
+    expect(await paragraph.get(0).getText()).not.toContain('I waved');
-    });
   });
 
-  it('should have only one "Hip!" (the other is erased)', () => {
+  it('should have only one "Hip!" (the other is erased)', async () => {
     const paragraph = element.all(by.cssContainingText('p', 'Hip!'));
-    expect(paragraph.count()).toEqual(1);
+    expect(await paragraph.count()).toEqual(1);
   });
 
-  it('appUnless should show 3 paragraph (A)s and (B)s at the start', () => {
+  it('appUnless should show 3 paragraph (A)s and (B)s at the start', async () => {
     const paragraph = element.all(by.css('p.unless'));
-    expect(paragraph.count()).toEqual(3);
+    expect(await paragraph.count()).toEqual(3);
     for (let i = 0; i < 3; i++) {
-      expect(paragraph.get(i).getText()).toContain('(A)');
+      expect(await paragraph.get(i).getText()).toContain('(A)');
     }
   });
 
-  it('appUnless should show 1 paragraph (B) after toggling condition', () => {
+  it('appUnless should show 1 paragraph (B) after toggling condition', async () => {
     const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
     const paragraph = element.all(by.css('p.unless'));
 
-    toggleConditionButton.click().then(() => {
+    await toggleConditionButton.click();
-      expect(paragraph.count()).toEqual(1);
+
-      expect(paragraph.get(0).getText()).toContain('(B)');
+    expect(await paragraph.count()).toEqual(1);
-    });
+    expect(await paragraph.get(0).getText()).toContain('(B)');
   });
 });
 

aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts

@@ -1,147 +1,147 @@
 import { browser, element, by } from 'protractor';
 
 describe('Style Guide', () => {
-  it('01-01', () => {
+  it('01-01', async () => {
-    browser.get('#/01-01');
+    await browser.get('#/01-01');
 
     const pre = element(by.tagName('toh-heroes > pre'));
-    expect(pre.getText()).toContain('Bombasto');
+    expect(await pre.getText()).toContain('Bombasto');
-    expect(pre.getText()).toContain('Tornado');
+    expect(await pre.getText()).toContain('Tornado');
-    expect(pre.getText()).toContain('Magneta');
+    expect(await pre.getText()).toContain('Magneta');
   });
 
-  it('02-07', () => {
+  it('02-07', async () => {
-    browser.get('#/02-07');
+    await browser.get('#/02-07');
 
     const hero = element(by.tagName('toh-hero > div'));
     const users = element(by.tagName('admin-users > div'));
 
-    expect(hero.getText()).toBe('hero component');
+    expect(await hero.getText()).toBe('hero component');
-    expect(users.getText()).toBe('users component');
+    expect(await users.getText()).toBe('users component');
   });
 
-  it('02-08', () => {
+  it('02-08', async () => {
-    browser.get('#/02-08');
+    await browser.get('#/02-08');
 
     const input = element(by.tagName('input[tohvalidate]'));
-    expect(input.isPresent()).toBe(true);
+    expect(await input.isPresent()).toBe(true);
   });
 
-  it('04-10', () => {
+  it('04-10', async () => {
-    browser.get('#/04-10');
+    await browser.get('#/04-10');
 
     const div = element(by.tagName('sg-app > toh-heroes > div'));
-    expect(div.getText()).toBe('This is heroes component');
+    expect(await div.getText()).toBe('This is heroes component');
   });
 
-  it('05-02', () => {
+  it('05-02', async () => {
-    browser.get('#/05-02');
+    await browser.get('#/05-02');
 
     const button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('Hero button');
+    expect(await button.getText()).toBe('Hero button');
   });
 
-  it('05-03', () => {
+  it('05-03', async () => {
-    browser.get('#/05-03');
+    await browser.get('#/05-03');
 
     const button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('Hero button');
+    expect(await button.getText()).toBe('Hero button');
   });
 
-  it('05-04', () => {
+  it('05-04', async () => {
-    browser.get('#/05-04');
+    await browser.get('#/05-04');
 
     const h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
-    expect(h2.getText()).toBe('My Heroes');
+    expect(await h2.getText()).toBe('My Heroes');
   });
 
-  it('05-12', () => {
+  it('05-12', async () => {
-    browser.get('#/05-12');
+    await browser.get('#/05-12');
 
     const button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
+    expect(await button.getText()).toBe('OK');
   });
 
-  it('05-13', () => {
+  it('05-13', async () => {
-    browser.get('#/05-13');
+    await browser.get('#/05-13');
 
     const button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
+    expect(await button.getText()).toBe('OK');
   });
 
-  it('05-14', () => {
+  it('05-14', async () => {
-    browser.get('#/05-14');
+    await browser.get('#/05-14');
 
     const toast = element(by.tagName('sg-app > toh-toast'));
-    expect(toast.getText()).toBe('...');
+    expect(await toast.getText()).toBe('...');
   });
 
-  it('05-15', () => {
+  it('05-15', async () => {
-    browser.get('#/05-15');
+    await browser.get('#/05-15');
 
     const heroList = element(by.tagName('sg-app > toh-hero-list'));
-    expect(heroList.getText()).toBe('...');
+    expect(await heroList.getText()).toBe('...');
   });
 
-  it('05-16', () => {
+  it('05-16', async () => {
-    browser.get('#/05-16');
+    await browser.get('#/05-16');
 
     const hero = element(by.tagName('sg-app > toh-hero'));
-    expect(hero.getText()).toBe('...');
+    expect(await hero.getText()).toBe('...');
   });
 
-  it('05-17', () => {
+  it('05-17', async () => {
-    browser.get('#/05-17');
+    await browser.get('#/05-17');
 
     const section = element(by.tagName('sg-app > toh-hero-list > section'));
-    expect(section.getText()).toContain('Our list of heroes');
+    expect(await section.getText()).toContain('Our list of heroes');
-    expect(section.getText()).toContain('Total powers');
+    expect(await section.getText()).toContain('Total powers');
-    expect(section.getText()).toContain('Average power');
+    expect(await section.getText()).toContain('Average power');
   });
 
-  it('06-01', () => {
+  it('06-01', async () => {
-    browser.get('#/06-01');
+    await browser.get('#/06-01');
 
     const div = element(by.tagName('sg-app > div[tohhighlight]'));
-    expect(div.getText()).toBe('Bombasta');
+    expect(await div.getText()).toBe('Bombasta');
   });
 
-  it('06-03', () => {
+  it('06-03', async () => {
-    browser.get('#/06-03');
+    await browser.get('#/06-03');
 
     const input = element(by.tagName('input[tohvalidator]'));
-    expect(input.isPresent()).toBe(true);
+    expect(await input.isPresent()).toBe(true);
   });
 
   // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
-  xit('07-01', () => {
+  xit('07-01', async () => {
-    browser.get('#/07-01');
+    await browser.get('#/07-01');
 
     const lis = element.all(by.tagName('sg-app > ul > li'));
-    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(await lis.get(0).getText()).toBe('Windstorm');
-    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(await lis.get(1).getText()).toBe('Bombasto');
-    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(await lis.get(2).getText()).toBe('Magneta');
-    expect(lis.get(3).getText()).toBe('Tornado');
+    expect(await lis.get(3).getText()).toBe('Tornado');
   });
 
-  it('07-03', () => {
+  it('07-03', async () => {
-    browser.get('#/07-03');
+    await browser.get('#/07-03');
 
     const pre = element(by.tagName('toh-heroes > pre'));
-    expect(pre.getText()).toContain('[]');
+    expect(await pre.getText()).toContain('[]');
   });
 
-  it('07-04', () => {
+  it('07-04', async () => {
-    browser.get('#/07-04');
+    await browser.get('#/07-04');
 
     const pre = element(by.tagName('toh-app > pre'));
-    expect(pre.getText()).toContain('[]');
+    expect(await pre.getText()).toContain('[]');
   });
 
-  it('09-01', () => {
+  it('09-01', async () => {
-    browser.get('#/09-01');
+    await browser.get('#/09-01');
 
     const button = element(by.tagName('sg-app > toh-hero-button > button'));
-    expect(button.getText()).toBe('OK');
+    expect(await button.getText()).toBe('OK');
   });
 });

aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts

@@ -1,31 +1,27 @@
 import { browser, element, by } from 'protractor';
-import { logging } from 'selenium-webdriver';
 
 describe('Template Expression Operators', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should have title Inputs and Outputs', () => {
+  it('should have title Inputs and Outputs', async () => {
     const title = element.all(by.css('h1')).get(0);
-    expect(title.getText()).toEqual('Template Expression Operators');
+    expect(await title.getText()).toEqual('Template Expression Operators');
   });
 
-  it('should display json data', () => {
+  it('should display json data', async () => {
     const jsonDate = element.all(by.css('p')).get(4);
-    expect(jsonDate.getText()).toContain('1980');
+    expect(await jsonDate.getText()).toContain('1980');
   });
 
-  it('should display $98', () => {
+  it('should display $98', async () => {
     const jsonDate = element.all(by.css('p')).get(5);
-    expect(jsonDate.getText()).toContain('$98.00');
+    expect(await jsonDate.getText()).toContain('$98.00');
   });
 
-  it('should display Telephone', () => {
+  it('should display Telephone', async () => {
     const jsonDate = element.all(by.css('p')).get(6);
-    expect(jsonDate.getText()).toContain('Telephone');
+    expect(await jsonDate.getText()).toContain('Telephone');
   });
 
-
 });

aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts

@@ -1,11 +1,10 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, logging } from 'protractor';
-import { logging } from 'selenium-webdriver';
 
 describe('Template-reference-variables-example', () => {
   beforeEach(() => browser.get(''));
 
   // helper function used to test what's logged to the console
-  async function logChecker(button, contents) {
+  async function logChecker(contents) {
     const logs = await browser
       .manage()
       .logs()
@@ -14,8 +13,8 @@ describe('Template-reference-variables-example', () => {
     expect(messages.length).toBeGreaterThan(0);
   }
 
-  it('should display Template reference variables', () => {
+  it('should display Template reference variables', async () => {
-    expect(element(by.css('h1')).getText()).toEqual(
+    expect(await element(by.css('h1')).getText()).toEqual(
       'Template reference variables'
     );
   });
@@ -26,7 +25,7 @@ describe('Template-reference-variables-example', () => {
     await phoneInput.sendKeys('123');
     await callButton.click();
     const contents = 'Calling 123 ...';
-    await logChecker(callButton, contents);
+    await logChecker(contents);
   });
 
   it('should log a Faxing 123 ... message', async () => {
@@ -35,12 +34,12 @@ describe('Template-reference-variables-example', () => {
     await faxInput.sendKeys('123');
     await faxButton.click();
     const contents = 'Faxing 123 ...';
-    await logChecker(faxButton, contents);
+    await logChecker(contents);
   });
 
-  it('should display a disabled button', () => {
+  it('should display a disabled button', async () => {
     const disabledButton = element.all(by.css('button')).get(2);
-    expect(disabledButton.isEnabled()).toBe(false);
+    expect(await disabledButton.isEnabled()).toBe(false);
   });
 
   it('should submit form', async () => {
@@ -48,8 +47,7 @@ describe('Template-reference-variables-example', () => {
     const nameInput = element.all(by.css('input')).get(2);
     await nameInput.sendKeys('123');
     await submitButton.click();
-    expect(element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}');
+    expect(await element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}');
   });
 
-
 });

aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts

@@ -3,30 +3,28 @@ import { browser, element, by } from 'protractor';
 // TODO Not yet complete
 describe('Template Syntax', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should be able to use interpolation with a hero', () => {
+  it('should be able to use interpolation with a hero', async () => {
     const heroInterEle = element.all(by.css('h2+p')).get(0);
-    expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
+    expect(await heroInterEle.getText()).toEqual('My current hero is Hercules');
   });
 
-  it('should be able to use interpolation with a calculation', () => {
+  it('should be able to use interpolation with a calculation', async () => {
     const theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
-    expect(theSumEles.count()).toBe(2);
+    expect(await theSumEles.count()).toBe(2);
-    expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
+    expect(await theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
-    expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
+    expect(await theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
   });
 
-  it('should be able to use class binding syntax', () => {
+  it('should be able to use class binding syntax', async () => {
     const specialEle = element(by.cssContainingText('div', 'Special'));
-    expect(specialEle.getAttribute('class')).toMatch('special');
+    expect(await specialEle.getAttribute('class')).toMatch('special');
   });
 
-  it('should be able to use style binding syntax', () => {
+  it('should be able to use style binding syntax', async () => {
     const specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
-    expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
+    expect(await specialButtonEle.getAttribute('style')).toMatch('color: red');
   });
 
   it('should two-way bind to sizer', async () => {
@@ -34,15 +32,15 @@ describe('Template Syntax', () => {
     const incButton = div.element(by.buttonText('+'));
     const input = div.element(by.css('input'));
     const initSize = await input.getAttribute('value');
-    incButton.click();
+    await incButton.click();
-    expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
+    expect(await input.getAttribute('value')).toEqual((+initSize + 1).toString());
   });
 
   it('should change SVG rectangle\'s fill color on click', async () => {
     const div = element(by.css('app-svg'));
     const colorSquare = div.element(by.css('rect'));
     const initialColor = await colorSquare.getAttribute('fill');
-    colorSquare.click();
+    await colorSquare.click();
-    expect(colorSquare.getAttribute('fill')).not.toEqual(initialColor);
+    expect(await colorSquare.getAttribute('fill')).not.toEqual(initialColor);
   });
 });

aio/content/examples/testing/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, ElementFinder } from 'protractor';
+import { browser, element, by } from 'protractor';
 
 describe('Testing Example', () => {
   const expectedViewNames = ['Dashboard', 'Heroes', 'About'];
@@ -6,11 +6,8 @@ describe('Testing Example', () => {
   beforeAll(() => browser.get(''));
 
   function getPageElts() {
-    const navElts = element.all(by.css('app-root nav a'));
-
     return {
-      navElts,
+      navElts: element.all(by.css('app-root nav a')),
-
       appDashboard: element(by.css('app-root app-dashboard')),
     };
   }
@@ -20,14 +17,14 @@ describe('Testing Example', () => {
   });
 
   it(`has views ${expectedViewNames}`, async () => {
-    const viewNames = getPageElts().navElts.map(async (el: ElementFinder) => await el.getText());
+    const viewNames = await getPageElts().navElts.map(el => el.getText());
 
     expect(viewNames).toEqual(expectedViewNames);
   });
 
-  it('has dashboard as the active view', () => {
+  it('has dashboard as the active view', async () => {
     const page = getPageElts();
 
-    expect(page.appDashboard.isPresent()).toBeTruthy();
+    expect(await page.appDashboard.isPresent()).toBeTruthy();
   });
 });

aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts

@@ -3,8 +3,8 @@ import { browser, element, by } from 'protractor';
 describe('Tour of Heroes', () => {
   beforeEach(() => browser.get('/'));
 
-  it('should display "Tour of Heroes"', () => {
+  it('should display "Tour of Heroes"', async () => {
-    const title = element(by.css('app-root h1')).getText();
+    const title = await element(by.css('app-root h1')).getText();
     expect(title).toEqual('Tour of Heroes');
   });
 });

aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -23,9 +22,9 @@ class Hero {
 }
 
 const nameSuffix = 'X';
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
 describe('Tutorial part 1', () => {
@@ -34,12 +33,12 @@ describe('Tutorial part 1', () => {
 
   beforeAll(() => browser.get(''));
 
-  it(`has title '${expectedTitle}'`, () => {
+  it(`has title '${expectedTitle}'`, async () => {
-    expect(browser.getTitle()).toEqual(expectedTitle);
+    expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h1 '${expectedH1}'`, () => {
+  it(`has h1 '${expectedH1}'`, async () => {
-    const hText = element(by.css('h1')).getText();
+    const hText = await element(by.css('h1')).getText();
     expect(hText).toEqual(expectedH1, 'h1');
   });
 
@@ -51,7 +50,7 @@ describe('Tutorial part 1', () => {
   });
 
   it(`shows updated hero name`, async () => {
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
     const page = getPageElts();
     const hero = await Hero.fromDetail(page.heroDetail);
     const newName = expectedHero.name + nameSuffix;

aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -42,41 +41,41 @@ describe('Tutorial part 2', () => {
 });
 
 function initialPageTests() {
-  it(`has title '${expectedTitle}'`, () => {
+  it(`has title '${expectedTitle}'`, async () => {
-      expect(browser.getTitle()).toEqual(expectedTitle);
+    expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h1 '${expectedH1}'`, () => {
+  it(`has h1 '${expectedH1}'`, async () => {
-      expectHeading(1, expectedH1);
+    await expectHeading(1, expectedH1);
   });
 
-  it(`has h2 '${expectedH2}'`, () => {
+  it(`has h2 '${expectedH2}'`, async () => {
-    expectHeading(2, expectedH2);
+    await expectHeading(2, expectedH2);
   });
 
-  it('has the right number of heroes', () => {
+  it('has the right number of heroes', async () => {
     const page = getPageElts();
-    expect(page.heroes.count()).toEqual(10);
+    expect(await page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', () => {
+  it('has no selected hero and no hero details', async () => {
     const page = getPageElts();
-    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(await page.selected.isPresent()).toBeFalsy('selected hero');
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+    expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, () => {
+  it(`selects ${targetHero.name} from hero list`, async () => {
     const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
-    hero.click();
+    await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, () => {
+  it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(page.selected.getText()).toBe(expectedText);
+    expect(await page.selected.getText()).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -88,8 +87,8 @@ function selectHeroTests() {
 }
 
 function updateHeroTests() {
-  it(`can update hero name`, () => {
+  it(`can update hero name`, async () => {
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
     // Nothing specific to expect other than lack of exceptions.
   });
 
@@ -111,14 +110,14 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
-function expectHeading(hLevel: number, expectedText: string): void {
+async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
   const hTag = `h${hLevel}`;
-    const hText = element(by.css(hTag)).getText();
+  const hText = await element(by.css(hTag)).getText();
   expect(hText).toEqual(expectedText, hTag);
 }
 

aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -42,41 +41,41 @@ describe('Tutorial part 3', () => {
 });
 
 function initialPageTests() {
-  it(`has title '${expectedTitle}'`, () => {
+  it(`has title '${expectedTitle}'`, async () => {
-      expect(browser.getTitle()).toEqual(expectedTitle);
+      expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h1 '${expectedH1}'`, () => {
+  it(`has h1 '${expectedH1}'`, async () => {
-      expectHeading(1, expectedH1);
+    await expectHeading(1, expectedH1);
   });
 
-  it(`has h2 '${expectedH2}'`, () => {
+  it(`has h2 '${expectedH2}'`, async () => {
-    expectHeading(2, expectedH2);
+    await expectHeading(2, expectedH2);
   });
 
-  it('has the right number of heroes', () => {
+  it('has the right number of heroes', async () => {
     const page = getPageElts();
-    expect(page.heroes.count()).toEqual(10);
+    expect(await page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', () => {
+  it('has no selected hero and no hero details', async () => {
     const page = getPageElts();
-    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(await page.selected.isPresent()).toBeFalsy('selected hero');
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+    expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, () => {
+  it(`selects ${targetHero.name} from hero list`, async () => {
     const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
-    hero.click();
+    await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, () => {
+  it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(page.selected.getText()).toBe(expectedText);
+    expect(await page.selected.getText()).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -88,8 +87,8 @@ function selectHeroTests() {
 }
 
 function updateHeroTests() {
-  it(`can update hero name`, () => {
+  it(`can update hero name`, async () => {
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
     // Nothing specific to expect other than lack of exceptions.
   });
 
@@ -111,14 +110,14 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
-function expectHeading(hLevel: number, expectedText: string): void {
+async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
   const hTag = `h${hLevel}`;
-    const hText = element(by.css(hTag)).getText();
+  const hText = await element(by.css(hTag)).getText();
   expect(hText).toEqual(expectedText, hTag);
 }
 

aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -42,58 +41,57 @@ describe('Tutorial part 4', () => {
 });
 
 function initialPageTests() {
-  it(`has title '${expectedTitle}'`, () => {
+  it(`has title '${expectedTitle}'`, async () => {
-      expect(browser.getTitle()).toEqual(expectedTitle);
+    expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h1 '${expectedH1}'`, () => {
+  it(`has h1 '${expectedH1}'`, async () => {
-      expectHeading(1, expectedH1);
+    await expectHeading(1, expectedH1);
   });
 
-  it(`has h2 '${expectedH2}'`, () => {
+  it(`has h2 '${expectedH2}'`, async () => {
-    expectHeading(2, expectedH2);
+    await expectHeading(2, expectedH2);
   });
 
-  it('has the right number of heroes', () => {
+  it('has the right number of heroes', async () => {
     const page = getPageElts();
-    expect(page.heroes.count()).toEqual(10);
+    expect(await page.heroes.count()).toEqual(10);
   });
 
-  it('has no selected hero and no hero details', () => {
+  it('has no selected hero and no hero details', async () => {
     const page = getPageElts();
-    expect(page.selected.isPresent()).toBeFalsy('selected hero');
+    expect(await page.selected.isPresent()).toBeFalsy('selected hero');
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+    expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 }
 
 function selectHeroTests() {
-  it(`selects ${targetHero.name} from hero list`, () => {
+  it(`selects ${targetHero.name} from hero list`, async () => {
     const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
-    hero.click();
+    await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
 
-  it(`has selected ${targetHero.name}`, () => {
+  it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(page.selected.getText()).toBe(expectedText);
+    expect(await page.selected.getText()).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
     const page = getPageElts();
-    const message = getMessage();
+    const message = await getMessage();
     const hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
     // Message text contain id number matches the hero.id number
-    expect(message.getText()).toContain(hero.id);
+    expect(await message.getText()).toContain(hero.id);
-
   });
 }
 
 function updateHeroTests() {
-  it(`can update hero name`, () => {
+  it(`can update hero name`, async () => {
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
     // Nothing specific to expect other than lack of exceptions.
   });
 
@@ -115,14 +113,14 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
-function expectHeading(hLevel: number, expectedText: string): void {
+async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
   const hTag = `h${hLevel}`;
-    const hText = element(by.css(hTag)).getText();
+  const hText = await element(by.css(hTag)).getText();
   expect(hText).toEqual(expectedText, hTag);
 }
 
@@ -134,8 +132,8 @@ function getPageElts() {
   };
 }
 
-function getMessage() {
+async function getMessage() {
   const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
-  hero.click();
+  await hero.click();
   return element.all(by.css('app-root > app-messages > div > div')).get(1);
 }

aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -58,23 +57,23 @@ describe('Tutorial part 5', () => {
 
   describe('Initial page', () => {
 
-    it(`has title '${expectedTitle}'`, () => {
+    it(`has title '${expectedTitle}'`, async () => {
-        expect(browser.getTitle()).toEqual(expectedTitle);
+        expect(await browser.getTitle()).toEqual(expectedTitle);
     });
 
-    it(`has h1 '${expectedH1}'`, () => {
+    it(`has h1 '${expectedH1}'`, async () => {
-        expectHeading(1, expectedH1);
+      await expectHeading(1, expectedH1);
     });
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
-    it(`has views ${expectedViewNames}`, () => {
+    it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
-    it('has dashboard as the active view', () => {
+    it('has dashboard as the active view', async () => {
       const page = getPageElts();
-      expect(page.appDashboard.isPresent()).toBeTruthy();
+      expect(await page.appDashboard.isPresent()).toBeTruthy();
     });
 
   });
@@ -83,19 +82,19 @@ describe('Tutorial part 5', () => {
 
     beforeAll(() => browser.get(''));
 
-    it('has top heroes', () => {
+    it('has top heroes', async () => {
       const page = getPageElts();
-      expect(page.topHeroes.count()).toEqual(4);
+      expect(await page.topHeroes.count()).toEqual(4);
     });
 
     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+    it(`saves and shows ${newHeroName} in Dashboard`, async () => {
-      element(by.buttonText('go back')).click();
+      await element(by.buttonText('go back')).click();
       const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-      expect(targetHeroElt.getText()).toEqual(newHeroName);
+      expect(await targetHeroElt.getText()).toEqual(newHeroName);
     });
 
   });
@@ -104,18 +103,18 @@ describe('Tutorial part 5', () => {
 
     beforeAll(() => browser.get(''));
 
-    it('can switch to Heroes view', () => {
+    it('can switch to Heroes view', async () => {
-      getPageElts().appHeroesHref.click();
+      await getPageElts().appHeroesHref.click();
       const page = getPageElts();
-      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(await page.appHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+      expect(await page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
 
     it('can route to hero details', async () => {
-      getHeroLiEltById(targetHero.id).click();
+      await getHeroLiEltById(targetHero.id).click();
 
       const page = getPageElts();
-      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       const hero = await Hero.fromDetail(page.heroDetail);
       expect(hero.id).toEqual(targetHero.id);
       expect(hero.name).toEqual(targetHero.name.toUpperCase());
@@ -123,21 +122,21 @@ describe('Tutorial part 5', () => {
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`shows ${newHeroName} in Heroes list`, () => {
+    it(`shows ${newHeroName} in Heroes list`, async () => {
-      element(by.buttonText('go back')).click();
+      await element(by.buttonText('go back')).click();
       const expectedText = `${targetHero.id} ${newHeroName}`;
-      expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
+      expect(await getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText);
     });
 
   });
 
   async function dashboardSelectTargetHero() {
     const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    expect(await targetHeroElt.getText()).toEqual(targetHero.name);
-    targetHeroElt.click();
+    await targetHeroElt.click();
 
     const page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
     const hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
@@ -145,7 +144,7 @@ describe('Tutorial part 5', () => {
 
   async function updateHeroNameInDetailView() {
     // Assumes that the current view is the hero details view.
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
 
     const page = getPageElts();
     const hero = await Hero.fromDetail(page.heroDetail);
@@ -155,14 +154,14 @@ describe('Tutorial part 5', () => {
 
 });
 
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
-function expectHeading(hLevel: number, expectedText: string): void {
+async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
   const hTag = `h${hLevel}`;
-    const hText = element(by.css(hTag)).getText();
+  const hText = await element(by.css(hTag)).getText();
   expect(hText).toEqual(expectedText, hTag);
 }
 

aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
 import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
-import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
@@ -70,23 +69,23 @@ describe('Tutorial part 6', () => {
 
   describe('Initial page', () => {
 
-    it(`has title '${expectedTitle}'`, () => {
+    it(`has title '${expectedTitle}'`, async () => {
-      expect(browser.getTitle()).toEqual(expectedTitle);
+      expect(await browser.getTitle()).toEqual(expectedTitle);
     });
 
-    it(`has h1 '${expectedH1}'`, () => {
+    it(`has h1 '${expectedH1}'`, async () => {
-        expectHeading(1, expectedH1);
+      await expectHeading(1, expectedH1);
     });
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
-    it(`has views ${expectedViewNames}`, () => {
+    it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
-    it('has dashboard as the active view', () => {
+    it('has dashboard as the active view', async () => {
       const page = getPageElts();
-      expect(page.appDashboard.isPresent()).toBeTruthy();
+      expect(await page.appDashboard.isPresent()).toBeTruthy();
     });
 
   });
@@ -95,33 +94,33 @@ describe('Tutorial part 6', () => {
 
     beforeAll(() => browser.get(''));
 
-    it('has top heroes', () => {
+    it('has top heroes', async () => {
       const page = getPageElts();
-      expect(page.topHeroes.count()).toEqual(4);
+      expect(await page.topHeroes.count()).toEqual(4);
     });
 
     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
+    it(`cancels and shows ${targetHero.name} in Dashboard`, async () => {
-      element(by.buttonText('go back')).click();
+      await element(by.buttonText('go back')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+      await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-      expect(targetHeroElt.getText()).toEqual(targetHero.name);
+      expect(await targetHeroElt.getText()).toEqual(targetHero.name);
     });
 
     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+    it(`saves and shows ${newHeroName} in Dashboard`, async () => {
-      element(by.buttonText('save')).click();
+      await element(by.buttonText('save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+      await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-      expect(targetHeroElt.getText()).toEqual(newHeroName);
+      expect(await targetHeroElt.getText()).toEqual(newHeroName);
     });
 
   });
@@ -130,18 +129,18 @@ describe('Tutorial part 6', () => {
 
     beforeAll(() => browser.get(''));
 
-    it('can switch to Heroes view', () => {
+    it('can switch to Heroes view', async () => {
-      getPageElts().appHeroesHref.click();
+      await getPageElts().appHeroesHref.click();
       const page = getPageElts();
-      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(await page.appHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+      expect(await page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
 
     it('can route to hero details', async () => {
-      getHeroLiEltById(targetHero.id).click();
+      await getHeroLiEltById(targetHero.id).click();
 
       const page = getPageElts();
-      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       const hero = await Hero.fromDetail(page.heroDetail);
       expect(hero.id).toEqual(targetHero.id);
       expect(hero.name).toEqual(targetHero.name.toUpperCase());
@@ -149,21 +148,21 @@ describe('Tutorial part 6', () => {
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`shows ${newHeroName} in Heroes list`, () => {
+    it(`shows ${newHeroName} in Heroes list`, async () => {
-      element(by.buttonText('save')).click();
+      await element(by.buttonText('save')).click();
-      browser.waitForAngular();
+      await browser.waitForAngular();
       const expectedText = `${targetHero.id} ${newHeroName}`;
-      expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
+      expect(await getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
     });
 
     it(`deletes ${newHeroName} from Heroes list`, async () => {
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const li = getHeroLiEltById(targetHero.id);
-      li.element(by.buttonText('x')).click();
+      await li.element(by.buttonText('x')).click();
 
       const page = getPageElts();
-      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(await page.appHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
+      expect(await page.allHeroes.count()).toEqual(9, 'number of heroes');
       const heroesAfter = await toHeroArray(page.allHeroes);
       // console.log(await Hero.fromLi(page.allHeroes[0]));
       const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
@@ -176,8 +175,8 @@ describe('Tutorial part 6', () => {
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const numHeroes = heroesBefore.length;
 
-      element(by.css('input')).sendKeys(addedHeroName);
+      await element(by.css('input')).sendKeys(addedHeroName);
-      element(by.buttonText('add')).click();
+      await element(by.buttonText('add')).click();
 
       const page = getPageElts();
       const heroesAfter = await toHeroArray(page.allHeroes);
@@ -190,25 +189,25 @@ describe('Tutorial part 6', () => {
     });
 
     it('displays correctly styled buttons', async () => {
-      element.all(by.buttonText('x')).then(buttons => {
+      const buttons = await element.all(by.buttonText('x'));
+
       for (const button of buttons) {
         // Inherited styles from styles.css
-          expect(button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial');
-          expect(button.getCssValue('border')).toContain('none');
+        expect(await button.getCssValue('border')).toContain('none');
-          expect(button.getCssValue('padding')).toBe('5px 10px');
+        expect(await button.getCssValue('padding')).toBe('5px 10px');
-          expect(button.getCssValue('border-radius')).toBe('4px');
+        expect(await button.getCssValue('border-radius')).toBe('4px');
         // Styles defined in heroes.component.css
-          expect(button.getCssValue('left')).toBe('194px');
+        expect(await button.getCssValue('left')).toBe('194px');
-          expect(button.getCssValue('top')).toBe('-32px');
+        expect(await button.getCssValue('top')).toBe('-32px');
       }
-      });
 
       const addButton = element(by.buttonText('add'));
       // Inherited styles from styles.css
-      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial');
-      expect(addButton.getCssValue('border')).toContain('none');
+      expect(await addButton.getCssValue('border')).toContain('none');
-      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(await addButton.getCssValue('padding')).toBe('5px 10px');
-      expect(addButton.getCssValue('border-radius')).toBe('4px');
+      expect(await addButton.getCssValue('border-radius')).toBe('4px');
     });
 
   });
@@ -218,34 +217,34 @@ describe('Tutorial part 6', () => {
     beforeAll(() => browser.get(''));
 
     it(`searches for 'Ma'`, async () => {
-      getPageElts().searchBox.sendKeys('Ma');
+      await getPageElts().searchBox.sendKeys('Ma');
-      browser.sleep(1000);
+      await browser.sleep(1000);
 
-      expect(getPageElts().searchResults.count()).toBe(4);
+      expect(await getPageElts().searchResults.count()).toBe(4);
     });
 
     it(`continues search with 'g'`, async () => {
-      getPageElts().searchBox.sendKeys('g');
+      await getPageElts().searchBox.sendKeys('g');
-      browser.sleep(1000);
+      await browser.sleep(1000);
-      expect(getPageElts().searchResults.count()).toBe(2);
+      expect(await getPageElts().searchResults.count()).toBe(2);
     });
 
     it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
-      getPageElts().searchBox.sendKeys('n');
+      await getPageElts().searchBox.sendKeys('n');
-      browser.sleep(1000);
+      await browser.sleep(1000);
       const page = getPageElts();
-      expect(page.searchResults.count()).toBe(1);
+      expect(await page.searchResults.count()).toBe(1);
       const hero = page.searchResults.get(0);
-      expect(hero.getText()).toEqual(targetHero.name);
+      expect(await hero.getText()).toEqual(targetHero.name);
     });
 
     it(`navigates to ${targetHero.name} details view`, async () => {
       const hero = getPageElts().searchResults.get(0);
-      expect(hero.getText()).toEqual(targetHero.name);
+      expect(await hero.getText()).toEqual(targetHero.name);
-      hero.click();
+      await hero.click();
 
       const page = getPageElts();
-      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       const hero2 = await Hero.fromDetail(page.heroDetail);
       expect(hero2.id).toEqual(targetHero.id);
       expect(hero2.name).toEqual(targetHero.name.toUpperCase());
@@ -254,12 +253,12 @@ describe('Tutorial part 6', () => {
 
   async function dashboardSelectTargetHero() {
     const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    expect(await targetHeroElt.getText()).toEqual(targetHero.name);
-    targetHeroElt.click();
+    await targetHeroElt.click();
-    browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+    await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
     const page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
     const hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
@@ -267,7 +266,7 @@ describe('Tutorial part 6', () => {
 
   async function updateHeroNameInDetailView() {
     // Assumes that the current view is the hero details view.
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
 
     const page = getPageElts();
     const hero = await Hero.fromDetail(page.heroDetail);
@@ -277,14 +276,14 @@ describe('Tutorial part 6', () => {
 
 });
 
-function addToHeroName(text: string): promise.Promise<void> {
+async function addToHeroName(text: string): Promise<void> {
   const input = element(by.css('input'));
-  return input.sendKeys(text);
+  await input.sendKeys(text);
 }
 
-function expectHeading(hLevel: number, expectedText: string): void {
+async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
   const hTag = `h${hLevel}`;
-    const hText = element(by.css(hTag)).getText();
+  const hText = await element(by.css(hTag)).getText();
   expect(hText).toEqual(expectedText, hTag);
 }
 
@@ -299,7 +298,5 @@ function getHeroLiEltById(id: number): ElementFinder {
 }
 
 async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
-  const promisedHeroes = await allHeroes.map(Hero.fromLi);
+  return allHeroes.map(Hero.fromLi);
-  // The cast is necessary to get around issuing with the signature of Promise.all()
-  return Promise.all(promisedHeroes) as Promise<any>;
 }

aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts

@@ -2,41 +2,39 @@ import { browser, element, by } from 'protractor';
 
 describe('Two-way binding e2e tests', () => {
 
-  beforeEach(() => {
+  beforeEach(() => browser.get(''));
-    browser.get('');
-  });
 
   const minusButton = element.all(by.css('button')).get(0);
   const plusButton = element.all(by.css('button')).get(1);
   const minus2Button = element.all(by.css('button')).get(2);
   const plus2Button = element.all(by.css('button')).get(3);
 
-  it('should display Two-way Binding', () => {
+  it('should display Two-way Binding', async () => {
-    expect(element(by.css('h1')).getText()).toEqual('Two-way Binding');
+    expect(await element(by.css('h1')).getText()).toEqual('Two-way Binding');
   });
 
-  it('should display four buttons', () => {
+  it('should display four buttons', async () => {
-    expect(minusButton.getText()).toBe('-');
+    expect(await minusButton.getText()).toBe('-');
-    expect(plusButton.getText()).toBe('+');
+    expect(await plusButton.getText()).toBe('+');
-    expect(minus2Button.getText()).toBe('-');
+    expect(await minus2Button.getText()).toBe('-');
-    expect(plus2Button.getText()).toBe('+');
+    expect(await plus2Button.getText()).toBe('+');
   });
 
   it('should change font size labels', async () => {
     await minusButton.click();
-    expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px');
-    expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15');
+    expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15');
 
     await plusButton.click();
-    expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px');
+    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px');
-    expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16');
+    expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16');
 
     await minus2Button.click();
-    await expect(element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
   });
 
-  it('should display De-sugared two-way binding', () => {
+  it('should display De-sugared two-way binding', async () => {
-    expect(element(by.css('h2')).getText()).toEqual('De-sugared two-way binding');
+    expect(await element(by.css('h2')).getText()).toEqual('De-sugared two-way binding');
   });
 
 });

aio/content/examples/universal/e2e/src/app.e2e-spec.ts

@@ -52,74 +52,74 @@ describe('Universal', () => {
   describe('Initial page', () => {
     beforeAll(() => browser.get(''));
 
-    it(`has title '${expectedTitle}'`, () => {
+    it(`has title '${expectedTitle}'`, async () => {
-      expect(browser.getTitle()).toEqual(expectedTitle);
+      expect(await browser.getTitle()).toEqual(expectedTitle);
     });
 
-    it(`has h1 '${expectedH1}'`, () => {
+    it(`has h1 '${expectedH1}'`, async () => {
-        expectHeading(1, expectedH1);
+      await expectHeading(1, expectedH1);
     });
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
-    it(`has views ${expectedViewNames}`, () => {
+    it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
-    it('has dashboard as the active view', () => {
+    it('has dashboard as the active view', async () => {
       const page = getPageElts();
-      expect(page.appDashboard.isPresent()).toBeTruthy();
+      expect(await page.appDashboard.isPresent()).toBeTruthy();
     });
   });
 
   describe('Dashboard tests', () => {
     beforeAll(() => browser.get(''));
 
-    it('has top heroes', () => {
+    it('has top heroes', async () => {
       const page = getPageElts();
-      expect(page.topHeroes.count()).toEqual(4);
+      expect(await page.topHeroes.count()).toEqual(4);
     });
 
     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
+    it(`cancels and shows ${targetHero.name} in Dashboard`, async () => {
-      element(by.buttonText('go back')).click();
+      await element(by.buttonText('go back')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+      await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-      expect(targetHeroElt.getText()).toEqual(targetHero.name);
+      expect(await targetHeroElt.getText()).toEqual(targetHero.name);
     });
 
     it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+    it(`saves and shows ${newHeroName} in Dashboard`, async () => {
-      element(by.buttonText('save')).click();
+      await element(by.buttonText('save')).click();
-      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+      await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
       const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-      expect(targetHeroElt.getText()).toEqual(newHeroName);
+      expect(await targetHeroElt.getText()).toEqual(newHeroName);
     });
   });
 
   describe('Heroes tests', () => {
     beforeAll(() => browser.get(''));
 
-    it('can switch to Heroes view', () => {
+    it('can switch to Heroes view', async () => {
-      getPageElts().appHeroesHref.click();
+      await getPageElts().appHeroesHref.click();
       const page = getPageElts();
-      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(await page.appHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+      expect(await page.allHeroes.count()).toEqual(10, 'number of heroes');
     });
 
     it('can route to hero details', async () => {
-      getHeroLiEltById(targetHero.id).click();
+      await getHeroLiEltById(targetHero.id).click();
 
       const page = getPageElts();
-      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       const hero = await Hero.fromDetail(page.heroDetail);
       expect(hero.id).toEqual(targetHero.id);
       expect(hero.name).toEqual(targetHero.name.toUpperCase());
@@ -127,26 +127,26 @@ describe('Universal', () => {
 
     it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
 
-    it(`shows ${newHeroName} in Heroes list`, () => {
+    it(`shows ${newHeroName} in Heroes list`, async () => {
-      element(by.buttonText('save')).click();
+      await element(by.buttonText('save')).click();
-      browser.waitForAngular();
+      await browser.waitForAngular();
       const expectedText = `${targetHero.id} ${newHeroName}`;
-      expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
+      expect(await getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
     });
 
     it(`deletes ${newHeroName} from Heroes list`, async () => {
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const li = getHeroLiEltById(targetHero.id);
-      li.element(by.buttonText('x')).click();
+      await li.element(by.buttonText('x')).click();
 
       const page = getPageElts();
-      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(await page.appHeroes.isPresent()).toBeTruthy();
-      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
+      expect(await page.allHeroes.count()).toEqual(9, 'number of heroes');
       const heroesAfter = await toHeroArray(page.allHeroes);
       // console.log(await Hero.fromLi(page.allHeroes[0]));
       const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
       expect(heroesAfter).toEqual(expectedHeroes);
-      // expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
+      // expect(await page.selectedHeroSubview.isPresent()).toBeFalsy();
     });
 
     it(`adds back ${targetHero.name}`, async () => {
@@ -154,8 +154,8 @@ describe('Universal', () => {
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const numHeroes = heroesBefore.length;
 
-      element(by.css('input')).sendKeys(updatedHeroName);
+      await element(by.css('input')).sendKeys(updatedHeroName);
-      element(by.buttonText('add')).click();
+      await element(by.buttonText('add')).click();
 
       const page = getPageElts();
       const heroesAfter = await toHeroArray(page.allHeroes);
@@ -168,25 +168,25 @@ describe('Universal', () => {
     });
 
     it('displays correctly styled buttons', async () => {
-      element.all(by.buttonText('x')).then(buttons => {
+      const buttons = await element.all(by.buttonText('x'));
+
       for (const button of buttons) {
         // Inherited styles from styles.css
-          expect(button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial');
-          expect(button.getCssValue('border')).toContain('none');
+        expect(await button.getCssValue('border')).toContain('none');
-          expect(button.getCssValue('padding')).toBe('5px 10px');
+        expect(await button.getCssValue('padding')).toBe('5px 10px');
-          expect(button.getCssValue('border-radius')).toBe('4px');
+        expect(await button.getCssValue('border-radius')).toBe('4px');
         // Styles defined in heroes.component.css
-          expect(button.getCssValue('left')).toBe('194px');
+        expect(await button.getCssValue('left')).toBe('194px');
-          expect(button.getCssValue('top')).toBe('-32px');
+        expect(await button.getCssValue('top')).toBe('-32px');
       }
-      });
 
       const addButton = element(by.buttonText('add'));
       // Inherited styles from styles.css
-      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial');
-      expect(addButton.getCssValue('border')).toContain('none');
+      expect(await addButton.getCssValue('border')).toContain('none');
-      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(await addButton.getCssValue('padding')).toBe('5px 10px');
-      expect(addButton.getCssValue('border-radius')).toBe('4px');
+      expect(await addButton.getCssValue('border-radius')).toBe('4px');
     });
   });
 
@@ -194,34 +194,34 @@ describe('Universal', () => {
     beforeAll(() => browser.get(''));
 
     it(`searches for 'Ma'`, async () => {
-      getPageElts().searchBox.sendKeys('Ma');
+      await getPageElts().searchBox.sendKeys('Ma');
-      browser.sleep(1000);
+      await browser.sleep(1000);
 
-      expect(getPageElts().searchResults.count()).toBe(4);
+      expect(await getPageElts().searchResults.count()).toBe(4);
     });
 
     it(`continues search with 'g'`, async () => {
-      getPageElts().searchBox.sendKeys('g');
+      await getPageElts().searchBox.sendKeys('g');
-      browser.sleep(1000);
+      await browser.sleep(1000);
-      expect(getPageElts().searchResults.count()).toBe(2);
+      expect(await getPageElts().searchResults.count()).toBe(2);
     });
 
     it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
-      getPageElts().searchBox.sendKeys('n');
+      await getPageElts().searchBox.sendKeys('n');
-      browser.sleep(1000);
+      await browser.sleep(1000);
       const page = getPageElts();
-      expect(page.searchResults.count()).toBe(1);
+      expect(await page.searchResults.count()).toBe(1);
       const hero = page.searchResults.get(0);
-      expect(hero.getText()).toEqual(targetHero.name);
+      expect(await hero.getText()).toEqual(targetHero.name);
     });
 
     it(`navigates to ${targetHero.name} details view`, async () => {
       const hero = getPageElts().searchResults.get(0);
-      expect(hero.getText()).toEqual(targetHero.name);
+      expect(await hero.getText()).toEqual(targetHero.name);
-      hero.click();
+      await hero.click();
 
       const page = getPageElts();
-      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
       const hero2 = await Hero.fromDetail(page.heroDetail);
       expect(hero2.id).toEqual(targetHero.id);
       expect(hero2.name).toEqual(targetHero.name.toUpperCase());
@@ -229,26 +229,26 @@ describe('Universal', () => {
   });
 
   // Helpers
-  function addToHeroName(text: string): Promise<void> {
+  async function addToHeroName(text: string): Promise<void> {
-    return element(by.css('input')).sendKeys(text) as Promise<void>;
+    await element(by.css('input')).sendKeys(text);
   }
 
   async function dashboardSelectTargetHero(): Promise<void> {
     const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
-    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    expect(await targetHeroElt.getText()).toEqual(targetHero.name);
-    targetHeroElt.click();
+    await targetHeroElt.click();
-    browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+    await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
 
     const page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
     const hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
   }
 
-  function expectHeading(hLevel: number, expectedText: string): void {
+  async function expectHeading(hLevel: number, expectedText: string): Promise<void> {
       const hTag = `h${hLevel}`;
-      const hText = element(by.css(hTag)).getText();
+      const hText = await element(by.css(hTag)).getText();
       expect(hText).toEqual(expectedText, hTag);
   }
 
@@ -290,7 +290,7 @@ describe('Universal', () => {
 
   async function updateHeroNameInDetailView(): Promise<void> {
     // Assumes that the current view is the hero details view.
-    addToHeroName(nameSuffix);
+    await addToHeroName(nameSuffix);
 
     const page = getPageElts();
     const hero = await Hero.fromDetail(page.heroDetail);

aio/content/examples/upgrade-module/e2e-spec.ts

@@ -4,48 +4,40 @@ describe('Upgrade Tests', () => {
 
   describe('AngularJS Auto-bootstrap', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-ng-app.html'));
-      browser.get('/index-ng-app.html');
-    });
 
-    it('bootstraps as expected', () => {
+    it('bootstraps as expected', async () => {
-      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+      expect(await element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
   describe('AngularJS JavaScript Bootstrap', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-bootstrap.html'));
-      browser.get('/index-bootstrap.html');
-    });
 
-    it('bootstraps as expected', () => {
+    it('bootstraps as expected', async () => {
-      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+      expect(await element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
   describe('AngularJS-Angular Hybrid Bootstrap', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-ajs-a-hybrid-bootstrap.html'));
-      browser.get('/index-ajs-a-hybrid-bootstrap.html');
-    });
 
-    it('bootstraps as expected', () => {
+    it('bootstraps as expected', async () => {
-      expect(element(by.css('#message')).getText()).toEqual('Hello world');
+      expect(await element(by.css('#message')).getText()).toEqual('Hello world');
     });
 
   });
 
-  describe('Upgraded static component', () => {
+  describe('Upgraded static component', async () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-upgrade-static.html'));
-      browser.get('/index-upgrade-static.html');
-    });
 
-    it('renders', () => {
+    it('renders', async () => {
-      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+      expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
   });
@@ -53,17 +45,15 @@ describe('Upgrade Tests', () => {
 
   describe('Upgraded component with IO', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-upgrade-io.html'));
-      browser.get('/index-upgrade-io.html');
+
+    it('has inputs', async () => {
+      expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
-    it('has inputs', () => {
+    it('has outputs', async () => {
-      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+      await element(by.buttonText('Delete')).click();
-    });
+      expect(await element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!');
-
-    it('has outputs', () => {
-      element(by.buttonText('Delete')).click();
-      expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!');
     });
 
   });
@@ -71,33 +61,29 @@ describe('Upgrade Tests', () => {
 
   describe('Downgraded static component', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-downgrade-static.html'));
-      browser.get('/index-downgrade-static.html');
-    });
 
-    it('renders', () => {
+    it('renders', async () => {
-      expect(element(by.css('h2')).getText()).toEqual('Windstorm details!');
+      expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!');
     });
 
   });
 
   describe('Downgraded component with IO', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-downgrade-io.html'));
-      browser.get('/index-downgrade-io.html');
+
+    it('has inputs', async () => {
+      expect(await element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
     });
 
-    it('has inputs', () => {
+    it('has outputs', async () => {
-      expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
+      await element.all(by.buttonText('Delete')).first().click();
+      expect(await element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
     });
 
-    it('has outputs', () => {
+    it('supports ng-repeat', async () => {
-      element.all(by.buttonText('Delete')).first().click();
+      expect(await element.all(by.css('hero-detail')).count()).toBe(3);
-      expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!');
-    });
-
-    it('supports ng-repeat', () => {
-      expect(element.all(by.css('hero-detail')).count()).toBe(3);
     });
 
   });
@@ -105,12 +91,10 @@ describe('Upgrade Tests', () => {
 
   describe('Downgraded component with content projection', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-ajs-to-a-projection.html'));
-      browser.get('/index-ajs-to-a-projection.html');
-    });
 
-    it('can be transcluded into', () => {
+    it('can be transcluded into', async () => {
-      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+      expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
     });
 
   });
@@ -118,12 +102,10 @@ describe('Upgrade Tests', () => {
 
   describe('Upgraded component with transclusion', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-a-to-ajs-transclusion.html'));
-      browser.get('/index-a-to-ajs-transclusion.html');
-    });
 
-    it('can be projected into', () => {
+    it('can be projected into', async () => {
-      expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
+      expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds');
     });
 
   });
@@ -131,12 +113,10 @@ describe('Upgrade Tests', () => {
 
   describe('Upgrading AngularJS Providers', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-ajs-to-a-providers.html'));
-      browser.get('/index-ajs-to-a-providers.html');
-    });
 
-    it('works', () => {
+    it('works', async () => {
-      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+      expect(await element(by.css('h2')).getText()).toBe('1: Windstorm');
     });
 
   });
@@ -144,12 +124,10 @@ describe('Upgrade Tests', () => {
 
   describe('Downgrading Angular Providers', () => {
 
-    beforeAll(() => {
+    beforeAll(() => browser.get('/index-a-to-ajs-providers.html'));
-      browser.get('/index-a-to-ajs-providers.html');
-    });
 
-    it('works', () => {
+    it('works', async () => {
-      expect(element(by.css('h2')).getText()).toBe('1: Windstorm');
+      expect(await element(by.css('h2')).getText()).toBe('1: Windstorm');
     });
 
   });

aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts

@@ -11,41 +11,39 @@ describe('PhoneCat Application', () => {
     browser.rootEl = 'body';
   });
 
-  it('should redirect `index.html` to `index.html#!/phones', () => {
+  it('should redirect `index.html` to `index.html#!/phones', async () => {
-    browser.get('index.html');
+    await browser.get('index.html');
-    expect(browser.getLocationAbsUrl()).toBe('/phones');
+    expect(await browser.getLocationAbsUrl()).toBe('/phones');
   });
 
   describe('View: Phone list', () => {
 
     // Helpers
-    const waitForCount = (elems: ElementArrayFinder, count: number) => {
+    const waitForCount = async (elems: ElementArrayFinder, count: number) => {
       // Wait for the list to stabilize, which may take a while (e.g. due to animations).
-      browser.wait(() => elems.count().then(c => c === count), 5000);
+      await browser.wait(async () => await elems.count() === count, 5000);
     };
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones'));
-      browser.get('index.html#!/phones');
-    });
 
-    it('should filter the phone list as a user types into the search box', () => {
+    it('should filter the phone list as a user types into the search box', async () => {
       const phoneList = element.all(by.repeater('phone in $ctrl.phones'));
       const query = element(by.model('$ctrl.query'));
 
-      waitForCount(phoneList, 20);
+      await waitForCount(phoneList, 20);
-      expect(phoneList.count()).toBe(20);
+      expect(await phoneList.count()).toBe(20);
 
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
-      waitForCount(phoneList, 1);
+      await waitForCount(phoneList, 1);
-      expect(phoneList.count()).toBe(1);
+      expect(await phoneList.count()).toBe(1);
 
-      query.clear();
+      await query.clear();
-      query.sendKeys('motorola');
+      await query.sendKeys('motorola');
-      waitForCount(phoneList, 8);
+      await waitForCount(phoneList, 8);
-      expect(phoneList.count()).toBe(8);
+      expect(await phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', () => {
+    it('should be possible to control phone order via the drop-down menu', async () => {
       const queryField = element(by.model('$ctrl.query'));
       const orderSelect = element(by.model('$ctrl.orderProp'));
       const nameOption = orderSelect.element(by.css('option[value="name"]'));
@@ -55,63 +53,61 @@ describe('PhoneCat Application', () => {
         return phoneNameColumn.map((elem: ElementFinder) => elem.getText());
       }
 
-      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
+      await queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
-      waitForCount(phoneNameColumn, 2);
+      await waitForCount(phoneNameColumn, 2);
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'Motorola XOOM\u2122 with Wi-Fi',
         'MOTOROLA XOOM\u2122'
       ]);
 
-      nameOption.click();
+      await nameOption.click();
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'MOTOROLA XOOM\u2122',
         'Motorola XOOM\u2122 with Wi-Fi'
       ]);
     });
 
-    it('should render phone specific links', () => {
+    it('should render phone specific links', async () => {
       const phoneList = element.all(by.repeater('phone in $ctrl.phones'));
       const query = element(by.model('$ctrl.query'));
 
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
-      waitForCount(phoneList, 1);
+      await waitForCount(phoneList, 1);
 
       const nexusPhone = phoneList.first();
       const detailLink = nexusPhone.all(by.css('a')).first();
 
-      detailLink.click();
+      await detailLink.click();
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      expect(await browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
     });
 
   });
 
   describe('View: Phone detail', () => {
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones/nexus-s'));
-      browser.get('index.html#!/phones/nexus-s');
+
+    it('should display the `nexus-s` page', async () => {
+      expect(await element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
     });
 
-    it('should display the `nexus-s` page', () => {
+    it('should display the first phone image as the main phone image', async () => {
-      expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
-    });
-
-    it('should display the first phone image as the main phone image', () => {
       const mainImage = element(by.css('img.phone.selected'));
 
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', () => {
+    it('should swap the main image when clicking on a thumbnail image', async () => {
       const mainImage = element(by.css('img.phone.selected'));
       const thumbnails = element.all(by.css('.phone-thumbs img'));
 
-      thumbnails.get(2).click();
+      await thumbnails.get(2).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
 
-      thumbnails.get(0).click();
+      await thumbnails.get(0).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
   });

aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts

@@ -5,33 +5,31 @@ import { browser, element, by } from 'protractor';
 
 describe('PhoneCat Application', () => {
 
-  it('should redirect `index.html` to `index.html#!/phones', () => {
+  it('should redirect `index.html` to `index.html#!/phones', async () => {
-    browser.get('index.html');
+    await browser.get('index.html');
-    browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+    await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
-    expect(browser.getCurrentUrl()).toMatch(/\/phones$/);
+    expect(await browser.getCurrentUrl()).toMatch(/\/phones$/);
   });
 
   describe('View: Phone list', () => {
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones'));
-      browser.get('index.html#!/phones');
-    });
 
-    it('should filter the phone list as a user types into the search box', () => {
+    it('should filter the phone list as a user types into the search box', async () => {
       const phoneList = element.all(by.css('.phones li'));
       const query = element(by.css('input'));
 
-      expect(phoneList.count()).toBe(20);
+      expect(await phoneList.count()).toBe(20);
 
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
-      expect(phoneList.count()).toBe(1);
+      expect(await phoneList.count()).toBe(1);
 
-      query.clear();
+      await query.clear();
-      query.sendKeys('motorola');
+      await query.sendKeys('motorola');
-      expect(phoneList.count()).toBe(8);
+      expect(await phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', () => {
+    it('should be possible to control phone order via the drop-down menu', async () => {
       const queryField = element(by.css('input'));
       const orderSelect = element(by.css('select'));
       const nameOption = orderSelect.element(by.css('option[value="name"]'));
@@ -41,57 +39,55 @@ describe('PhoneCat Application', () => {
         return phoneNameColumn.map((elem) => elem.getText());
       }
 
-      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
+      await queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'Motorola XOOM\u2122 with Wi-Fi',
         'MOTOROLA XOOM\u2122'
       ]);
 
-      nameOption.click();
+      await nameOption.click();
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'MOTOROLA XOOM\u2122',
         'Motorola XOOM\u2122 with Wi-Fi'
       ]);
     });
 
-    it('should render phone specific links', () => {
+    it('should render phone specific links', async () => {
       const query = element(by.css('input'));
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
 
-      element.all(by.css('.phones li a')).first().click();
+      await element.all(by.css('.phones li a')).first().click();
-      browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+      await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
-      expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/);
+      expect(await browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/);
     });
 
   });
 
   describe('View: Phone detail', () => {
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones/nexus-s'));
-      browser.get('index.html#!/phones/nexus-s');
+
+    it('should display the `nexus-s` page', async () => {
+      expect(await element(by.css('h1')).getText()).toBe('Nexus S');
     });
 
-    it('should display the `nexus-s` page', () => {
+    it('should display the first phone image as the main phone image', async () => {
-      expect(element(by.css('h1')).getText()).toBe('Nexus S');
-    });
-
-    it('should display the first phone image as the main phone image', () => {
       const mainImage = element(by.css('img.phone.selected'));
 
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', () => {
+    it('should swap the main image when clicking on a thumbnail image', async () => {
       const mainImage = element(by.css('img.phone.selected'));
       const thumbnails = element.all(by.css('.phone-thumbs img'));
 
-      thumbnails.get(2).click();
+      await thumbnails.get(2).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
 
-      thumbnails.get(0).click();
+      await thumbnails.get(0).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
   });

aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts

@@ -6,36 +6,33 @@ import { browser, element, by } from 'protractor';
 describe('PhoneCat Application', () => {
 
   // #docregion redirect
-  it('should redirect `index.html` to `index.html#!/phones', () => {
+  it('should redirect `index.html` to `index.html#!/phones', async () => {
-    browser.get('index.html');
+    await browser.get('index.html');
-    browser.waitForAngular();
+    await browser.waitForAngular();
-    browser.getCurrentUrl().then((url: string) => {
+    const url = await browser.getCurrentUrl();
     expect(url.endsWith('/phones')).toBe(true);
   });
-  });
   // #enddocregion redirect
 
   describe('View: Phone list', () => {
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones'));
-      browser.get('index.html#!/phones');
-    });
 
-    it('should filter the phone list as a user types into the search box', () => {
+    it('should filter the phone list as a user types into the search box', async () => {
       const phoneList = element.all(by.css('.phones li'));
       const query = element(by.css('input'));
 
-      expect(phoneList.count()).toBe(20);
+      expect(await phoneList.count()).toBe(20);
 
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
-      expect(phoneList.count()).toBe(1);
+      expect(await phoneList.count()).toBe(1);
 
-      query.clear();
+      await query.clear();
-      query.sendKeys('motorola');
+      await query.sendKeys('motorola');
-      expect(phoneList.count()).toBe(8);
+      expect(await phoneList.count()).toBe(8);
     });
 
-    it('should be possible to control phone order via the drop-down menu', () => {
+    it('should be possible to control phone order via the drop-down menu', async () => {
       const queryField = element(by.css('input'));
       const orderSelect = element(by.css('select'));
       const nameOption = orderSelect.element(by.css('option[value="name"]'));
@@ -45,59 +42,56 @@ describe('PhoneCat Application', () => {
         return phoneNameColumn.map((elem) => elem.getText());
       }
 
-      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
+      await queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'Motorola XOOM\u2122 with Wi-Fi',
         'MOTOROLA XOOM\u2122'
       ]);
 
-      nameOption.click();
+      await nameOption.click();
 
-      expect(getNames()).toEqual([
+      expect(await getNames()).toEqual([
         'MOTOROLA XOOM\u2122',
         'Motorola XOOM\u2122 with Wi-Fi'
       ]);
     });
 
     // #docregion links
-    it('should render phone specific links', () => {
+    it('should render phone specific links', async () => {
       const query = element(by.css('input'));
-      query.sendKeys('nexus');
+      await query.sendKeys('nexus');
-      element.all(by.css('.phones li a')).first().click();
+      await element.all(by.css('.phones li a')).first().click();
-      browser.getCurrentUrl().then((url: string) => {
+      const url = await browser.getCurrentUrl();
       expect(url.endsWith('/phones/nexus-s')).toBe(true);
     });
-    });
     // #enddocregion links
 
   });
 
   describe('View: Phone detail', () => {
 
-    beforeEach(() => {
+    beforeEach(() => browser.get('index.html#!/phones/nexus-s'));
-      browser.get('index.html#!/phones/nexus-s');
+
+    it('should display the `nexus-s` page', async () => {
+      expect(await element(by.css('h1')).getText()).toBe('Nexus S');
     });
 
-    it('should display the `nexus-s` page', () => {
+    it('should display the first phone image as the main phone image', async () => {
-      expect(element(by.css('h1')).getText()).toBe('Nexus S');
-    });
-
-    it('should display the first phone image as the main phone image', () => {
       const mainImage = element(by.css('img.phone.selected'));
 
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
-    it('should swap the main image when clicking on a thumbnail image', () => {
+    it('should swap the main image when clicking on a thumbnail image', async () => {
       const mainImage = element(by.css('img.phone.selected'));
       const thumbnails = element.all(by.css('.phone-thumbs img'));
 
-      thumbnails.get(2).click();
+      await thumbnails.get(2).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
 
-      thumbnails.get(0).click();
+      await thumbnails.get(0).click();
-      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+      expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
     });
 
   });

aio/content/examples/user-input/e2e/src/app.e2e-spec.ts

@@ -2,96 +2,88 @@ import { browser, element, by, protractor } from 'protractor';
 
 describe('User Input Tests', () => {
 
-  beforeAll(() => {
+  beforeAll(() => browser.get(''));
-    browser.get('');
-  });
 
-  it('should support the click event', () => {
+  it('should support the click event', async () => {
     const mainEle = element(by.css('app-click-me'));
     const buttonEle = element(by.css('app-click-me button'));
-    expect(mainEle.getText()).not.toContain('You are my hero!');
+    expect(await mainEle.getText()).not.toContain('You are my hero!');
-    buttonEle.click().then(() => {
+    await buttonEle.click();
-      expect(mainEle.getText()).toContain('You are my hero!');
+    expect(await mainEle.getText()).toContain('You are my hero!');
-    });
   });
 
-  it('should support the click event with an event payload', () => {
+  it('should support the click event with an event payload', async () => {
     const mainEle = element(by.css('app-click-me2'));
     const buttonEle = element(by.css('app-click-me2 button'));
-    expect(mainEle.getText()).not.toContain('Event target is ');
+    expect(await mainEle.getText()).not.toContain('Event target is ');
-    buttonEle.click().then(() => {
+    await buttonEle.click();
-      expect(mainEle.getText()).toContain('Event target is BUTTON');
+    expect(await mainEle.getText()).toContain('Event target is BUTTON');
-    });
   });
 
-  it('should support the keyup event ', () => {
+  it('should support the keyup event ', async () => {
     const mainEle = element(by.css('app-key-up1'));
     const inputEle = mainEle.element(by.css('input'));
     const outputTextEle = mainEle.element(by.css('p'));
-    expect(outputTextEle.getText()).toEqual('');
+    expect(await outputTextEle.getText()).toEqual('');
-    inputEle.sendKeys('abc');
+    await inputEle.sendKeys('abc');
-    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
+    expect(await outputTextEle.getText()).toEqual('a | ab | abc |');
   });
 
-  it('should support user input from a local template let (loopback)', () => {
+  it('should support user input from a local template let (loopback)', async () => {
     const mainEle = element(by.css('app-loop-back'));
     const inputEle = mainEle.element(by.css('input'));
     const outputTextEle = mainEle.element(by.css('p'));
-    expect(outputTextEle.getText()).toEqual('');
+    expect(await outputTextEle.getText()).toEqual('');
-    inputEle.sendKeys('abc');
+    await inputEle.sendKeys('abc');
-    expect(outputTextEle.getText()).toEqual('abc');
+    expect(await outputTextEle.getText()).toEqual('abc');
   });
 
-  it('should be able to combine click event with a local template var', () => {
+  it('should be able to combine click event with a local template var', async () => {
     const mainEle = element(by.css('app-key-up2'));
     const inputEle = mainEle.element(by.css('input'));
     const outputTextEle = mainEle.element(by.css('p'));
-    expect(outputTextEle.getText()).toEqual('');
+    expect(await outputTextEle.getText()).toEqual('');
-    inputEle.sendKeys('abc');
+    await inputEle.sendKeys('abc');
-    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
+    expect(await outputTextEle.getText()).toEqual('a | ab | abc |');
   });
 
-  it('should be able to filter key events', () => {
+  it('should be able to filter key events', async () => {
     const mainEle = element(by.css('app-key-up3'));
     const inputEle = mainEle.element(by.css('input'));
     const outputTextEle = mainEle.element(by.css('p'));
-    expect(outputTextEle.getText()).toEqual('');
+    expect(await outputTextEle.getText()).toEqual('');
-    inputEle.sendKeys('abc');
+    await inputEle.sendKeys('abc');
-    expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
+    expect(await outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
     // broken atm, see https://github.com/angular/angular/issues/9419
-    inputEle.sendKeys(protractor.Key.ENTER);
+    await inputEle.sendKeys(protractor.Key.ENTER);
-    expect(outputTextEle.getText()).toEqual('abc');
+    expect(await outputTextEle.getText()).toEqual('abc');
   });
 
-  it('should be able to filter blur events', () => {
+  it('should be able to filter blur events', async () => {
     const prevInputEle = element(by.css('app-key-up3 input'));
     const mainEle = element(by.css('app-key-up4'));
     const inputEle = mainEle.element(by.css('input'));
     const outputTextEle = mainEle.element(by.css('p'));
-    expect(outputTextEle.getText()).toEqual('');
+    expect(await outputTextEle.getText()).toEqual('');
-    inputEle.sendKeys('abc');
+    await inputEle.sendKeys('abc');
-    expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
+    expect(await outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
     // change the focus
-    prevInputEle.click().then(() => {
+    await prevInputEle.click();
-      expect(outputTextEle.getText()).toEqual('abc');
+    expect(await outputTextEle.getText()).toEqual('abc');
-    });
   });
 
-  it('should be able to compose little tour of heroes', () => {
+  it('should be able to compose little tour of heroes', async () => {
     const mainEle = element(by.css('app-little-tour'));
     const inputEle = mainEle.element(by.css('input'));
     const addButtonEle = mainEle.element(by.css('button'));
     const heroEles = mainEle.all(by.css('li'));
-    let numHeroes: number;
+    const numHeroes = await heroEles.count();
-    expect(heroEles.count()).toBeGreaterThan(0);
+    expect(numHeroes).toBeGreaterThan(0);
-    heroEles.count().then((count: number) => {
+
-      numHeroes = count;
+    await inputEle.sendKeys('abc');
-      inputEle.sendKeys('abc');
+    await addButtonEle.click();
-      return addButtonEle.click();
+    expect(await heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added');
-    }).then(() => {
+    expect(await heroEles.get(numHeroes).getText()).toContain('abc');
-      expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added');
-      expect(heroEles.get(numHeroes).getText()).toContain('abc');
-    });
   });
 });
 

aio/tools/examples/shared/boilerplate/cli-ajs/package.json

@@ -35,7 +35,6 @@
     "@types/angular": "1.7.3",
     "@types/angular-route": "1.7.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js

@@ -16,6 +16,7 @@ exports.config = {
     browserName: 'chrome'
   },
   directConnect: true,
+  SELENIUM_PROMISE_MANAGER: false,
   baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {

aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json

@@ -7,7 +7,6 @@
     "target": "es2018",
     "types": [
       "jasmine",
-      "jasminewd2",
       "node"
     ]
   }

aio/tools/examples/shared/boilerplate/cli/package.json

@@ -31,7 +31,6 @@
     "@angular/cli": "~11.0.2",
     "@angular/compiler-cli": "~11.0.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/boilerplate/elements/package.json

@@ -33,7 +33,6 @@
     "@angular/cli": "~11.0.2",
     "@angular/compiler-cli": "~11.0.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/boilerplate/i18n/package.json

@@ -35,7 +35,6 @@
     "@angular/cli": "~11.0.2",
     "@angular/compiler-cli": "~11.0.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/boilerplate/service-worker/package.json

@@ -32,7 +32,6 @@
     "@angular/cli": "~11.0.2",
     "@angular/compiler-cli": "~11.0.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/boilerplate/systemjs/package.json

@@ -49,7 +49,6 @@
     "@types/angular-resource": "1.5.16",
     "@types/angular-route": "1.7.1",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "concurrently": "^5.0.1",
     "http-server": "^0.12.0",

aio/tools/examples/shared/boilerplate/universal/package.json

@@ -40,7 +40,6 @@
     "@nguniversal/builders": "^11.0.0",
     "@types/express": "^4.17.8",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",

aio/tools/examples/shared/package.json

@@ -58,7 +58,6 @@
     "@types/angular-route": "1.7.1",
     "@types/express": "^4.17.8",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
     "@types/jquery": "3.5.1",
     "@types/node": "^12.11.1",
     "canonical-path": "1.0.0",

aio/tools/examples/shared/yarn.lock

@@ -1696,22 +1696,11 @@
   dependencies:
     "@types/node" "*"
 
-"@types/jasmine@*":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.2.tgz#6e6d4cb183cd55c7a1ad6270bced10fdd5367a3c"
-
 "@types/jasmine@~3.6.0":
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.6.2.tgz#02f64450016f7de70f145d698be311136d7c6374"
   integrity sha512-AzfesNFLvOs6Q1mHzIsVJXSeUnqVh4ZHG8ngygKJfbkcSLwzrBVm/LKa+mR8KrOfnWtUL47112gde1MC0IXqpQ==
 
-"@types/jasminewd2@~2.0.3":
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.8.tgz#67afe5098d5ef2386073a7b7384b69a840dfe93b"
-  integrity sha512-d9p31r7Nxk0ZH0U39PTH0hiDlJ+qNVGjlt1ucOoTUptxb2v+Y5VMnsxfwN+i3hK4yQnqBi3FMmoMFcd1JHDxdg==
-  dependencies:
-    "@types/jasmine" "*"
-
 "@types/jquery@3.5.1":
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.1.tgz#cebb057acf5071c40e439f30e840c57a30d406c3"