Refactor Protractor to use async/await

crypto-pwa/e2e/pages/login.po.ts

@@ -37,16 +37,13 @@ export class LoginPage extends Page {
     this.password.clear();
   }
 
-  login(username: string, password: string) {
+  async login(username: string, password: string) {
     // Entering non angular site, tell webdriver to switch to synchronous mode.
     browser.waitForAngularEnabled(false);
-    this.username.isPresent().then(() => {
-      this.username.sendKeys(username);
-      this.password.sendKeys(password);
-      this.oktaLoginButton.click();
-    }).catch(error => {
-      browser.waitForAngularEnabled(true);
-    });
+    await this.username.isPresent();
+    await this.username.sendKeys(username);
+    await this.password.sendKeys(password);
+    await this.oktaLoginButton.click();
   }
 
   clickLoginButton() {

crypto-pwa/e2e/spec/app.e2e-spec.ts

@@ -9,18 +9,16 @@ describe('App', () => {
   });
 
   describe('default screen', () => {
-    beforeEach(() => {
-      page.navigateTo('/#/home');
+    beforeEach(async () => {
+      await page.navigateTo('/#/home');
     });
 
-    it('should redirect to login', () => {
-      browser.wait(ec.urlContains('/#/login'), 5000);
+    it('should redirect to login', async () => {
+      await browser.wait(ec.urlContains('/#/login'));
     });
 
-    it('should have the correct title', () => {
-      page.getTitle().then(title => {
-        expect(title).toEqual('Cryptocurrency PWA with Authentication');
-      });
+    it('should have the correct title', async () => {
+      await expect(page.getTitle()).toEqual('Cryptocurrency PWA with Authentication');
     });
   });
 });

crypto-pwa/e2e/spec/login.e2e-spec.ts

@@ -5,43 +5,41 @@ describe('Login', () => {
 
   let loginPage;
 
-  beforeAll(() => {
+  beforeAll(async () => {
     loginPage = new LoginPage();
-    loginPage.navigateTo('/');
-    browser.waitForAngular();
+    await loginPage.navigateTo('/');
+    await browser.waitForAngular();
   });
 
-  it('should show a login button', () => {
-    expect(loginPage.getHeader()).toMatch(/Login/);
-    expect(loginPage.loginButton.isPresent());
+  it('should show a login button', async () => {
+    expect(await loginPage.getHeader()).toMatch(/Login/);
+    expect(await loginPage.loginButton.isPresent());
   });
 
-  it('should fail to log in with bad password', () => {
-    loginPage.clickLoginButton();
+  it('should fail to log in with bad password', async () => {
+    await loginPage.clickLoginButton();
     loginPage.login('admin', 'foo');
     const error = element.all(by.css('.infobox-error')).first();
-    browser.wait(ec.visibilityOf(error), 2000).then(() => {
-      expect(error.getText()).toMatch("Sign in failed!");
-    });
+    await browser.wait(ec.visibilityOf(error));
+    expect(await error.getText()).toMatch("Sign in failed!");
   });
 
-  it('should log in successfully with demo account', () => {
+  it('should log in successfully with demo account', async () => {
     loginPage.clearUserName();
     loginPage.setUserName(process.env.E2E_USERNAME);
     loginPage.clearPassword();
     loginPage.setPassword(process.env.E2E_PASSWORD);
-    loginPage.oktaLoginButton.click();
+    await loginPage.oktaLoginButton.click();
 
     const welcome = /Welcome/; // Use /Welcome, First Last/ if you want to verify full name
     const success = element.all(by.css('h1')).first();
-    browser.wait(ec.visibilityOf(success), 5000).then(() => {
-      expect(success.getText()).toMatch(welcome);
-    });
+    await browser.wait(ec.visibilityOf(success));
+    expect(await success.getText()).toMatch(welcome);
   });
 
-  it('should log out successfully', () => {
-    loginPage.logout();
-    browser.wait(ec.urlContains('/#/login'), 2000);
-    expect(loginPage.loginButton.isPresent());
+  it('should log out successfully', async () => {
+    await loginPage.logout();
+    await browser.wait(ec.urlContains('/#/login'));
+    expect(await loginPage.loginButton.isPresent());
   })
 });

crypto-pwa/e2e/spec/manage.e2e-spec.ts

@@ -3,64 +3,64 @@ import { LoginPage } from '../pages/login.po';
 import { AddHoldingPage } from '../pages/add-holding.po';
 import { HomePage } from '../pages/home.po';
 
-describe('Manage Holdings', () => {
+fdescribe('Manage Holdings', () => {
 
   let loginPage, homePage, addHoldingPage;
 
-  beforeAll(() => {
+  beforeAll(async () => {
     loginPage = new LoginPage();
     homePage = new HomePage();
     addHoldingPage = new AddHoldingPage();
-    loginPage.navigateTo('/');
+    await loginPage.navigateTo('/');
     browser.waitForAngular();
   });
 
-  beforeEach(() => {
-    loginPage.clickLoginButton();
+  beforeEach(async () => {
+    await loginPage.clickLoginButton();
+    await browser.wait(ec.urlContains('oktapreview'));
     loginPage.login(process.env.E2E_USERNAME, process.env.E2E_PASSWORD);
-    loginPage.oktaLoginButton.click();
-
-    browser.wait(ec.urlContains('home'), 5000);
+    await loginPage.oktaLoginButton.click();
+    await browser.wait(ec.urlContains('home'));
   });
 
-  afterEach(() => {
-    loginPage.logout();
+  afterEach(async () => {
+    await loginPage.logout();
   });
 
-  it('should add and remove a holding', () => {
-    homePage.clickAddCoinsButton();
+  it('should add and remove a holding', async () => {
+    await homePage.clickAddCoinsButton();
 
-    browser.wait(ec.urlContains('add-holding'), 1000);
+    await browser.wait(ec.urlContains('add-holding'));
 
     addHoldingPage.setCryptoCode('BTC');
     addHoldingPage.setCurrency('USD');
     addHoldingPage.setAmount(3);
-    addHoldingPage.clickAddHoldingButton();
+    await addHoldingPage.clickAddHoldingButton();
 
     // wait for everything to happen
-    browser.wait(ec.urlContains('home'), 5000);
+    await browser.wait(ec.urlContains('home'));
 
     // verify message is removed and holding shows up
-    element.all(by.css('.message')).then((message) => {
-      expect(message.length).toBe(0);
-    });
+    const message = await element.all(by.css('.message'));
+    expect(message.length).toBe(0);
 
     // wait for holding to show up
     const addedHolding = element.all(by.css('ion-item')).last();
-    browser.wait(ec.presenceOf(addedHolding), 5000).then(() => {
-
-      // delete the holding - https://forum.ionicframework.com/t/move-ion-item-sliding-by-protractor/106918
-      browser.actions().mouseDown(addedHolding)
-        .mouseMove({x: -50, y: 0})
-        .mouseMove({x: -50, y: 0})
-        .mouseMove({x: -50, y: 0})
-        .mouseUp()
-        .perform();
+    await browser.wait(ec.presenceOf(addedHolding));
 
-      homePage.deleteButton.click();
-      element.all(by.css('.message')).then((message) => {
-        expect(message.length).toBe(1);
+    // delete the holding - https://forum.ionicframework.com/t/move-ion-item-sliding-by-protractor/106918
+    await browser.actions().mouseDown(addedHolding)
+      .mouseMove({x: -50, y: 0})
+      .mouseMove({x: -50, y: 0})
+      .mouseMove({x: -50, y: 0})
+      .mouseUp()
+      // workaround for async/await not working with browser.actions()
+      // https://github.com/angular/protractor/issues/4578
+      .perform().then(() => {
+        browser.actions().perform();
       });
-    });
+
+    await homePage.deleteButton.click();
+    expect(message.length).toBe(1);
   });
 });

crypto-pwa/test/protractor.conf.js

@@ -13,6 +13,7 @@ exports.config = {
   directConnect: true,
   baseUrl: 'http://localhost:8100/',
   framework: 'jasmine',
+  SELENIUM_PROMISE_MANAGER: false,
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,