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

Deleting a zip file using PHP: A step-by-step guide

After downloading the 17111611185.zip file in my project using ajax, I need to remove it from my Linux server. To achieve this, after redirecting with window.location=data, another ajax call is made to pass 17111611185.zip back to the server. $.ajax({ ...

Using jQuery Modal Dialog with ASP.NET MVC 2

In my ASP.NET Mvc 2 application, I have a grid of user info. When a user is clicked, a jQuery Modal dialog opens allowing me to edit and save the user's information successfully. I am now looking for assistance on implementing validation on this moda ...

Execute a function within a different function once the ajax call has been completed

There's an issue with the timing of my function that runs inside another function. It seems like sometimes the ajax call to the server isn't completed before the function is called. function obtainPlans(row, user, id, type) { $.get( "/ ...

Testing for ajax failure using Q-Unit in a unit test

While utilizing jQuery's $.when method to manage ajax callbacks, I am also implementing mockjax for simulating various responses in my unit tests. One of these responses results in a status error of 500. Unfortunately, when catching this error using Q ...

Disabling the experimental app directory feature in NextJs

I've been working on a real-life project and decided to test out the new App directory feature that comes with Next.js version 13. However, I encountered some issues such as images and fonts not loading properly. Now, I'm looking to opt out of th ...

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

As I work on my app, I've implemented localization support for multiple languages. When initializing the datetimepicker in the app, I provide the current language like this: datetimepicker({ locale: languageObj.language, format: 'DD MMM ...

How can you merge the class attribute with the ng-class directive based on boolean values?

In my custom directive's link function, I have the following code that dynamically generates a map using d3... map.append("g") .selectAll("path") .data(topojson.feature(counties, counties.objects.counties).features) .enter() .append("path") .attr("d" ...

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

Get a file from a node.js web server by clicking a button to initiate the download

I am a beginner in nodejs and I am working on creating a web server using nodejs to host some static files. Here is the code I have used for this purpose: var http = require('http'); var finalhandler = require('finalhandler'); var ser ...

Element after jquery.load()

I am currently working on implementing ajax in WordPress using the jQuery.load() function. However, I have encountered an issue as Isotope does not seem to work after the page loads. Any suggestions on how to resolve this problem are greatly apprecia ...

Contrasting results when logging an element in Chrome versus IE

Running the script below in Internet Explorer gives the expected output for console.log(target_el): <div class="hidden"></div> However, when run in Chrome, the output changes to: <div class="visible"></div> To add a humorous twi ...

Exploring the World of Three.js Loaders

I downloaded the file package three.js-dev from threejs.org and I am trying to use it in my project like this: <script type="text/javascript" src="./build/three.js"></script> <script type="text/javascript" src="./src/loaders/JSONLoader.js" ...

Struggling to get the jQuery resize event to function properly

Ensuring that my charts remain responsive on different devices has been quite a challenge. Despite implementing a resize event handler in my function to dynamically adjust the charts, I encountered an issue where the page would go blank upon resizing the b ...

Miscalculation occurred when attempting to add or subtract values from various inputs

My goal is to calculate the sum and rest of two different values after adding or subtracting. For instance, I have a Total variable = 500, along with two input fields - one for MXN and the other for USD. Additionally, there is a USD variable set at 17.5. T ...

Ways to activate the JavaScript/AJAX script upon the dropdown value modification

I am currently working on a Django project where I want to execute a JavaScript/AJAX script when the value of a dropdown changes. Interestingly, the same code functions properly for a button but not for the dropdown. Below is the HTML code containing the ...

Utilizing JSDoc's "includePattern" for various file formats

Recently, I delved into JSDocs and decided to implement it in my Vue.js project. However, since my project involves multiple file types like .js and .vue, I encountered a syntax error while trying to add them to the "includePattern". Here's the snippe ...

"Bower fetches and installs specific versions of packages from the repository

I'm currently using npm 3.3.6 and bower 1.6.8 on Windows 10. Whenever I attempt to install a package like jquery or framework7, it ends up downloading and installing an archived version of the package. Here's an example: > bower install jquer ...

Using JSON Filtering with React

I am currently working on fetching JSON data and implementing a filtering feature for the displayed content. An error that I am encountering is: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined Any insights on what might be ...

Bot on Discord using Discord.Js that generates unique invites for users

I'm trying to find a way to generate an invite link for users to keep track of invites. The code I have currently is creating the invite for the Bot instead. const channel = client.channels.cache.find(channel => channel.id === config.server.channel ...