Protractor button click not leading to the loading of the next page

Question

Protractor button click not leading to the loading of the next page

After writing the code to click a button on the first page and redirect to the next page, I encountered an issue where the second page took too long to load causing the test to fail.

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 -->

javascript selenium-webdriver protractor

Answer 1

Answer №1

Let's start by dissecting the code and understanding why this issue is occurring.

describe('Login', function() {
  it('should show Login homepage', 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'));

    // The click action is thenable, which is fine
    acrIdBtn.click().then(function() {
       // This promise is queued, however, since it's a void function, in JasmineWD,
       // the element finding and clicking functions are void, and the promise
       // is not awaited.
       browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();
    });
  });
});

A Quick Solution:

To quickly fix this, ensure that the callback returns the promise:

    acrIdBtn.click().then(function() {
       // By returning the click action, JasmineWD will await this callback.
       return browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

Moving Away from Control Flow

This still seems to rely on the control flow. As an alternative suggestion, consider moving away from the control flow by setting 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 helpful example of the configuration file and async/await usage.

describe('Login', () => {
  it('should display Login home', async () => {
    await browser.get('https://xxxxx.org/yyyy/');
    await browser.driver.manage().window().maximize();
    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();
  });
});

Answer 2

Let's start by dissecting the code and understanding why this issue is occurring.

describe('Login', function() {
  it('should show Login homepage', 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'));

    // The click action is thenable, which is fine
    acrIdBtn.click().then(function() {
       // This promise is queued, however, since it's a void function, in JasmineWD,
       // the element finding and clicking functions are void, and the promise
       // is not awaited.
       browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();
    });
  });
});

A Quick Solution:

To quickly fix this, ensure that the callback returns the promise:

    acrIdBtn.click().then(function() {
       // By returning the click action, JasmineWD will await this callback.
       return browser.driver.findElement(by.id('ContentPlaceHolder1_MFALoginControl1_UserIDView_txtUserid_UiInput')).click();

Moving Away from Control Flow

This still seems to rely on the control flow. As an alternative suggestion, consider moving away from the control flow by setting 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 helpful example of the configuration file and async/await usage.

describe('Login', () => {
  it('should display Login home', async () => {
    await browser.get('https://xxxxx.org/yyyy/');
    await browser.driver.manage().window().maximize();
    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();
  });
});

Answer 3

Answer №2

Before proceeding, it's essential to verify that the button can be clicked:

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

Answer 4

Before proceeding, it's essential to verify that the button can be clicked:

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

Protractor button click not leading to the loading of the next page

Answer №1

A Quick Solution:

Moving Away from Control Flow

Answer №2

Similar questions

AngularJS promise fails to resolve when attempting to read a file using the FileReader

The phenomena of endless looping between Hibernate and Thymeleaf

Display only one div panel, not both

Issues encountered while manipulating an array in a Vue prop with Filter, forEach, and Push methods

Is it possible to enable caching for CSS and JavaScript files while browsing?

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Extracting information from JSON and presenting it in a structured table format

A guide on utilizing buttons within ion list items to execute actions independently for both the button and the list item

Retrieving input data when utilizing ng-file-upload

Organize information by time intervals using JavaScript

Developing a fresh entity in the world of three.js

Using Strapi to run basic raw SQL queries with MySQL

The node.js util module is not compatible with my Vue project

JavaScript autostop timer feature

What is the process for excluding code lines from coverage analysis in vitest?

"Dilemma: Why won't the AJAX form post load inside the

Animating Card depth on hover with Material UI

Angular.js Form Submission Results in Error 405: POST Method is Not Permitted

What is the best way to transfer JSON objects from JavaScript to a C# server?

Is there a way to continuously click on a button 99 times or until the code finishes running?