Next page not getting loaded after button click using protractor

Question

Here is the code I had used for clicking the button. In the first page I have an button, by clicking that it will redirect to next page. The second page is not loading for a long and the test is getting failed

describe('Login', function() {


it('should display Login home', function() {
browser.get('https://xxxxx.org/yyyy/');
browser.driver.manage().window().maximize();
var acrIdBtn  = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));

acrIdBtn.click().then(function() {
    browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

  });
});
});

HTML code:

<div class="col-sm-12">
<!-- ngIf: method.label.text !== ' *' && method.input.id.length > 0 --><input tabindex="0" class="form-control ng-pristine ng-scope ng-empty ng-invalid ng-invalid-required ng-touched" id="ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput" aria-invalid="true" required="" type="text" placeholder="Username" autocomplete="off" ng-if="method.label.text !== ' *' &amp;&amp; method.input.id.length > 0" ng-init="AuthMethod.getUser()" focus-if="" ng-disabled="false" ng-change="AuthMethod.getMethodOnChange(method.input.id)" ng-model="AuthMethod.user"><!-- end ngIf: method.label.text !== ' *' && method.input.id.length > 0 -->
<!-- ngIf: AuthMethod.forgotUser.link --><a class="help-block link--color ng-binding ng-scope" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$MFALoginControl1$UserIDView$ctl00$ContentPlaceHolder1_MFALoginControl1_UserIDView_hlinkUsernameLink','')" ng-if="AuthMethod.forgotUser.link">Forgot User ID</a><!-- end ngIf: AuthMethod.forgotUser.link -->

Please share the web page source that you are trying to automate that will help us to understand what exactly issue is? — akshay patil, Jan 17 '19 at 05:16
Did you try add `browser.sleep(10*1000) // wait 10 seconds` before `acrIdBtn.click()` — yong, Jan 17 '19 at 05:48
could click the acrIdBtn. But it is not waiting to load next page.. for entering text in the above given source.. — Deepak Sabastein, Jan 17 '19 at 05:59
Is the failure you are seeing related to a timeout? Could you post your error? — DublinDev, Jan 17 '19 at 07:34

score 1 · Answer 1 · answered Jan 17 '19 at 10:41

So first let's go through the code and understand why this is happening.

describe('Login', function() {
  it('should display Login home', function() {
    browser.get('https://xxxxx.org/yyyy/');
    browser.driver.manage().window().maximize();
    var acrIdBtn  = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));

    // click is thenable, this is okay
    acrIdBtn.click().then(function() {
       // This promise gets queued but this is a void function meaning. So in jasminwd, the
       // function to find the element and click is a void function and the promise
       // would not be awaited.         
       browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();
    });
  });
});

The quick fix:

So the quick fix, make sure the callback returns the promise:

    acrIdBtn.click().then(function() {
       // If we return the click, jasminewd should await this callback.
       return browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

Getting off of the control flow

This appears to still rely on the control flow. As a side note, I would suggest moving off of the control flow with SELENIUM_PROMISE_MANAGER: false, in your configuration file and using async await. See Protractor in STS IDE -> Could not find update-config.json for a pretty good example of the configuration file and async / await.

describe('Login', () => {
  it('should display Login home', async () => {
    await browser.get('https://xxxxx.org/yyyy/');
    await browser.driver.manage().window().maximize();
    // If you are using "element" but do not want to use wait for angular
    // think about using "await waitForAngularEnabled(false);"
    // If you prefer to use the WebDriver findElement version, then you could just keep it the same.
    // const acrIdBtn = browser.driver.findElement(by.css('a.btn.btn-lg.btn-success'));
    const acrIdBtn = element(by.css('a.btn.btn-lg.btn-success'));
    await acrIdBtn.click();
    const contentBtn = element(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput'));
    await contentBtn .click();
  });
});

score 0 · Answer 2 · answered Jan 17 '19 at 15:38

It is always good, to first check, the button to be clickable:

const button = element(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput'));
await browser.wait(ExpectedConditions.elementToBeClickable(button));
await button.click();

Next page not getting loaded after button click using protractor

2 Answers2

The quick fix:

Getting off of the control flow