An issue with asynchronous execution in Protractor


I have been using and learning protractor for over a month now.

Despite the documentation stating that Protractor waits for Angular calls to complete (http://www.protractortest.org/#/), ensuring all steps are executed synchronously, I have not found it to be true in my scripts.

Many times, Protractor seems to run ahead, such as when clicking on a link, getting the current URL, and then verifying the URL.

Often, the URL value is stale, indicating that it was not executed after clicking the link. Below is a sample of my code from the page object and corresponding test.

I am looking for suggestions on how to ensure that all test steps are executed in order.

Page Object
this.getSPageLink(){
    return element(by.xpath("//a[@title='S']"));
};
this.getLPageLink(){
    return element(by.xpath("//a[@title='L']"));
};
this.goToSPage = function() {
    (this.getSPageLink()).click();
    *//ERROR here, sometimes second click (below) doesn't wait for first 
    click to complete, and complains that link for 2nd click (below) is 
    not   found*
    (this.getSLPageLink()).click();
    return browser.currentURL();
    *//ERROR HERE url line (e) is sometimes executed before*
}

Test Class
it('::test SL  page', function() {
        pageObject.goToSpage();
        var currentURL=browser.getCurrentURL();
        expect(currentURL).toContain("SLink");
        *//ERROR HERE value in this variable "currentURL" is most of the 
        time Stale*
});

it('::test SL2  page', function() {
        pageObject.goToLpage();
        var currentURL=browser.getCurrentURL();
        expect(currentURL).toContain("Link");
        console.log("this line is always executed first"));
        //ERROR here , this print line is always executed first
});

Answer №1

Understanding Protractor documentation can be a bit confusing, particularly when it comes to synchronization. It appears that Protractor only waits for page synchronization when using the get or refresh commands. If you are using the click command to navigate to a new page, Protractor will not wait for synchronization before moving on. You can find more information about this behavior from a Protractor developer here.

In order to handle this in your test, you can implement a solution either directly in your test script or within a page object. One approach is to add the following code snippet after the click action:

browser.wait(function () {
    return browser.driver.getCurrentUrl().then(function (url) {
        return /SLink/.test(url);
    });
}, 10000);

This code will continuously check the current URL for the presence of the "Slink" string every 500 milliseconds for up to 10 seconds. Once the string is found, the next command will be executed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I use to create a peer-to-peer communications platform with PHP, MySQL database, and JavaScript?

Currently, I am encountering the challenge of creating a communication channel between two users on a website (such as a gaming site) using only the technologies specified in the title. I recently created an online chess platform with the aim of allowing ...

Mapping choices array in ReactJS using the id as a key reference

Looking for assistance with JavaScript as I am relatively new to it. I have a page displaying scheduled exams, and clicking on "Learn more" opens a modal where you can edit exam details. Currently, the modal displays selected equipment and allows changing ...

Quickest method for arranging a multi-dimensional array with dates in sequential order

I have a list of appointments with dates and times as shown below: [ ["John Doe", "10 Sep. 2017 2:00 PM"], ["Jane Smith", "10 Sep. 2017 2:00 PM"], ["Alice Johnson", "10 Sep. 2017 1:00 PM"], ["Bob Williams", "10 Sep. 2017 8:00 AM"], ["M ...

Stop ngRepeat flashing by implementing promises in AngularJS

I have a collection of items, let's call them Products, that I can manage using $resource. When displaying the collection on an index page, I want to show the items if there are any, and display a helpful message if the collection is empty. Controlle ...

How to extract the complete URL from the API endpoint in nextjs

I'm curious if there is a way to fetch the complete URL of the current request within the API route (pages/api/myapi). The only response I have found that comes close to what I need is the req.headers.referer, but I am uncertain if this value will alw ...

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

Install Chakra UI in the latest Next.js project directory

Recently, I decided to incorporate Chakra UI v2.4.9 into my Next.js project running on version v13.1.6. To ensure a seamless integration, I followed the detailed instructions provided in Chakra UI's official guide for Next.js. However, I encountered s ...

Securing an AngularJS page with Spring Security is not achievable

I've implemented Spring Security to secure my application using the configuration below in an attempt to display the default Spring login page: spring-security.xml <beans:beans xmlns="http://www.springframework.org/schema/security" xmlns: ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

Caution: Refs cannot be assigned to function components

I'm currently using the latest version of Next.js to create my blog website, but I keep encountering an error when trying to implement a form. The error message reads as follows: Warning: Function components cannot be given refs. Attempts to access t ...

Which one should I utilize for a single-page application with login separation: $stateProvider or $routeProvider?

I am trying to build a single page app with login separation, meaning that certain views can only be accessed by authenticated users. My initial code looks like this: .config(function ($routeProvider) { $routeProvider .when('/', { ...

What steps do I need to take to execute a script that utilizes the mootools library within an asp.net environment

I've been working on a website that includes a mail form. I'm using the Mootools 1.4.3 library along with FormCheck 1.6.js. However, when I click the button, nothing happens except for the page refreshing. I really like this form and want to make ...

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

Permission to create a database in 'master' database on SQL Server 2008 R2 denied

I am attempting to create a simple login demo similar to http://www.codeproject.com/Articles/1032226/CRUD-Operation-in-ASP-NET-MVC-and-AngularJS However, when the page loads, I encounter an error: 'create database permission denied in database &ap ...

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

What could be causing the jQuery code to not function properly when the left or right keys are pressed during mousedown?

Explanation of HTML code: <div class="wrap"> </div> Description of JavaScript code: $(document).ready(function() { $("body").mousedown(function(event) { switch (event.which) { case 1: alert('hel ...

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

Getting the value of a button using JavaScript

Is there a way to retrieve the value of a button when multiple buttons are generated dynamically? I have a JavaScript function that creates buttons in a list based on my search history, with each button labeled as a city name. However, after clicking on o ...

What could be causing the block to fail in the event of an AJAX request?

I have encountered an issue with my PHP file and AJAX setup. The if block in my code is working properly, but the else block seems to be not functioning as expected. Even after changing the condition from data!= null to data== null, the problem persists wh ...