Tips for making WebDriver pause until Sencha AJAX request finishes

While testing a page with Selenium WebDriver, I encountered an issue related to the Sencha JavaScript library being used on the underlying page. The problem arises when I input a value into a field and an AJAX call is made to validate that field. If the value is invalid, the field gets highlighted in red, but if it's valid, nothing changes on the page.

The challenge I'm facing is that my script attempts to navigate away from the page before the validation call completes. Although one solution could be to add an explicit wait time, that is not always the most effective approach.

Currently, for my Java driver, I have set these options (timeout is 120):

int timeout = 120;
driver.manage().timeouts().implicitlyWait(timeout, TimeUnit.SECONDS);
driver.manage().timeouts().setScriptTimeout(timeout, TimeUnit.SECONDS);
driver.manage().timeouts().pageLoadTimeout(timeout, TimeUnit.SECONDS);

I am aware that I can wait for jQuery AJAX calls using the following method:

JavascriptExecutor executer = (JavascriptExecutor) driver;
Boolean jqueryDone = (Boolean) executer.executeScript("return jQuery.active == 0");

and then encapsulate this within a Wait condition. However, I am curious if there is a similar check that can be made specifically for Sencha/ExtJS?

Answer №1

Success! After extensive searching, I finally located the solution. If you need to ensure that your code waits for an AJAX call to complete on a website utilizing ExtJS, simply utilize the following JavaScript function:

return Ext.Ajax.isLoading();

This function will return false once all AJAX calls have finished executing. With this in mind, my revised code now appears as follows:

JavascriptExecutor executor = (JavascriptExecutor) driver;
Boolean isAjaxRunning = ((Boolean) executor.executeScript("return Ext.Ajax.isLoading();"));

Answer №2

Perhaps a bit unconventional, yet worth exploring. You mentioned that the only feedback given to the user is the mouse cursor changing to a 'busy' state during the ajax request and then reverting back to 'normal'.

Perhaps this method is sufficient for testing purposes. Consider using JavaScript to monitor the current pointer value and wait until it transitions from auto to wait (when the request begins) and then back to auto (once the request is complete). Keep in mind that auto is the default setting, but there may be a different default set in your case.

You can retrieve the cursor value with:

window.getComputedStyle(document.body).cursor

For example: http://jsfiddle.net/2fVDP/

If the cursor style is not applied to the entire body, you'll need to adjust the DOM node accordingly.

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

the click event fails to trigger when the id or class is modified

Hey there, I'm new to working with jquery and I've encountered a problem. Here's the code snippet: http://jsfiddle.net/8guzD/ $('#test.off').click(function(){ $(this).removeClass('off').addClass('on'); }) ...

JavaScript and DOM element removal: Even after the element is removed visually, it still remains in the traversal

Our goal is to enable users to drag and drop items from a source list on the left to a destination list on the right, where they can add or remove items. The changes made to the list on the right are saved automatically. However, we are encountering an iss ...

Turn off integrity verification for local dependencies in package-lock.json

Is there a way to bypass the integrity check for a local dependency in package-lock.json? Within my project repository, I have a core library along with two Angular applications that both rely on this core library as a dependency. The problem arises beca ...

In JavaScript, combine two arrays of equal length to create a new array object value

Trying to figure out how to merge two arrays into a new object in JavaScript var array1 = ['apple', 'banana', 'orange']; var array2 = ['red', 'yellow', 'orange']; If array1[0] is 'apple&apos ...

What steps can I take to pinpoint the exact error location when running assetic:dump in Symfony2?

This error message indicates an issue with assetic:dump in Symfony2. [Assetic\Exception\FilterException] ...

Retrieve an array of database objects in PHP and send them to AJAX using Yii2

When I attempt to return an array of database objects to my AJAX and parse it, the result becomes an array of characters instead. For example, my json_encode output is [{'id':38, 'first_name':jana}], but when I try to parse it into an a ...

I'm curious to know which option - Ajax or Non-Ajax - will improve the speed and functionality of my website

I am considering the best approach to displaying the results of a database query in a table on my website. The query could potentially return up to 1000 rows with 10 columns each, although I anticipate that filter selections will reduce this number. My di ...

Incorporating JSON data into an array using d3

I'm currently working on mapping JSON data to an array variable in d3. Below is the JSON I am using: [ { "Impressions": "273909", "Clicks": "648", "CPM": 4.6388278388278, "Cost": 1266.4, "CPC": 1.9543209876543, "Campaign": "C ...

"Obtaining a URL that begins with using jQuery: A Step-by-

How can I extract the full URL that starts with http://sin1.g.adnxs.com Here is the code snippet: <div id="testingurl"> <div class="ads98E6LYS20621080"> <!-- This script is dynamically generated --> <iframe src="http://testing ...

Despite being in perfect condition, my If-Else statement is refusing to function properly

I had previously posted a similar question, but it was removed. However, I am still very curious about why something seemingly trivial is not functioning properly. This is the entirety of my HTML and JavaScript code... <!doctype html> <html lang=& ...

Struggles encountered while developing a JavaScript calendar

Hey guys, I'm encountering an issue with Uncaught TypeError: document.getElementById(...) is null. I believe the problem lies in the way types are being parsed for document.getElementById(dayOfWeek).appendChild(dayPTag);. This code is meant to display ...

When validating an array in JavaScript, it is important to note that not all elements may be displayed. Only the last variable of each element will

I am encountering an issue with validating an array of objects, specifically a table with rows where each row represents an object. The problem is that no error message appears if there is an error in the middle row of the table. However, if there's a ...

Angular animations: triggered by user interaction

I'm encountering some difficulties with animating elements in my Angular application. The issue involves a grid made up of cells (created using ng-repeat). What I'm aiming to achieve is a simple animation: when a cell is clicked, it should disapp ...

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI

Is there a way to move the toggle element to the other side in Material-UI's listItem without using the leftToggle option? The documentation does not specify a leftToggle attribute, so I am looking for alternative solutions. I would like to align the ...

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

Is there a way to use jQuery to adjust the text color once it has been clicked on?

I have been struggling to change the text color upon clicking on it without any success. Within my code, there are seven labels - one for the question, four for the answer options, one for the correct answer, and the last one for the explanation. The desi ...

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

Guide on parsing the obj variable into a webix .show() modal?

I have a piece of code that looks like this: $$('TLVab').attachEvent("onAfterEditStop", function(state, editor, ignoreUpdate) { $$('deleteLTMPopup').show();//TODO parse state into the pop up }); UI.deleteLTMPopup= {id:& ...

What is the best way to identify which JavaScript code is triggering or managing an event?

In the development of an HTML5 application framework designed for businesses to use on their intranet and extranet sites, a SAP JEE application server is utilized. The framework incorporates the grid system known as "Semantic UI" along with various JavaScr ...

Tips for organizing multiple TextField components within a Grid container using Material-UI

I utilize Material-UI for my front-end design needs. I have a query related to the Grid layout feature. My goal is to include 7 TextField elements, but they are appearing overlapped. When I modify all 7 TextField elements from xs={1} to xs={2}, they become ...