Protractor- async/await- for non angular page

Question

Our login screen is non-angular, after login its redirecting to angular application. We are using the following script in conf.js to login. Which was working perfectly without any issues. All sudden same script is started failing.

onPrepare: async function() {
    browser.ignoreSynchronization = true
        await browser.waitForAngularEnabled(false);
        await browser.get('http://abc.dev.xyz.com');
        await element(By.id('userName')).sendKeys('abcd');
        await element(By.className('btn btn-primary')).click();
        await element(By.id('password')).sendKeys('xyz@123');
        await element(By.className('btn btn-primary')).click();
        await browser.waitForAngularEnabled(true);
    browser.manage().window().maximize();
    jasmine.getEnv().addReporter(new HtmlReporter({
      baseDirectory: 'target/screenshots',
      preserveDirectory: false,
      takeScreenShotsOnlyForFailedSpecs: true,
      docTitle: 'UI Automation Test Report'
   }).getJasmine2Reporter());
  }

While running its just opening the browser and launching the URL. After that Immediately closing the browser. Earlier it was used to wait till the login page loads and continue. Now its not at all waiting till the page load. So failing to find username field. I don't want to use hardcoded wait here. Any idea why it is started failing? I have tried update webdiver-manager . Nothing worked

Gowtham Gowtham · Accepted Answer · 2020-05-14T12:48:46

It is because it would have taken time to load the username element in the DOM. Try to wait after calling the following line await browser.get('http://abc.dev.xyz.com');

First you need to import

import { browser, protractor } from 'protractor';
const { ExpectedConditions: until } = protractor

Add the following Code after await browser.get('http://abc.dev.xyz.com');

    await browser.wait(until.presenceOf(element(By.id('userName'))), 60000, 'Taking more time');

60000-> Max Time taken for particular component to load(Setting time limit).

Final Solution

import { browser, protractor } from 'protractor';
const { ExpectedConditions: until } = protractor

onPrepare: async function() {
    browser.ignoreSynchronization = true
        await browser.waitForAngularEnabled(false);
        await browser.get('http://abc.dev.xyz.com');
        await browser.wait(until.presenceOf(element(By.id('userName'))), 60000, 'Taking more time');
        await element(By.id('userName')).sendKeys('abcd');
        await element(By.className('btn btn-primary')).click();
        await element(By.id('password')).sendKeys('xyz@123');
        await element(By.className('btn btn-primary')).click();
        await browser.waitForAngularEnabled(true);
    browser.manage().window().maximize();
    jasmine.getEnv().addReporter(new HtmlReporter({
      baseDirectory: 'target/screenshots',
      preserveDirectory: false,
      takeScreenShotsOnlyForFailedSpecs: true,
      docTitle: 'UI Automation Test Report'
   }).getJasmine2Reporter());
  }

Protractor- async/await- for non angular page

1 Answers