Is there a way to wait for a WebElement to be clickable in WebDriverJS? I am familiar with waiting for the element to be "visible", but need it to be "clickable". Is there an equivalent of expected conditions in Python binding available in Webdriver Js API?
Python's
selenium.webdriver.support.expected_conditions.element_to_be_clickableChecking if the element is visible.
Verifying if the element is enabled.
In order to achieve a similar functionality, one can wait for both of these conditions to be met. The provided code snippet demonstrates how this can be implemented. It involves making an element invisible and disabled initially, setting timeouts to make it visible and enabled, and then waiting for the desired conditions.
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().
withCapabilities(webdriver.Capabilities.chrome()).
build();
driver.get('http://www.google.com');
// The following script showcases testing the wait operation. Initially, we make the element invisible
// and disable it. Subsequently, we set timeouts to ensure its visibility and enablement.
driver.executeScript("\
var q = document.getElementsByName('q')[0];\
q.style.display = 'none';\
q.disabled = true;\
setTimeout(function () {\
q.style.display = '';\
}, 2000);\
setTimeout(function () {\
q.disabled = false;\
}, 3000);\
");
driver.findElement(webdriver.By.name('q')).then(function (element) {
driver.wait(function () {
return element.isDisplayed().then(function (displayed) {
if (!displayed)
return false;
return element.isEnabled();
});
});
element.sendKeys('webdriver');
});
driver.findElement(webdriver.By.name('btnG')).click();
driver.wait(function() {
return driver.getTitle().then(function(title) {
return title === 'webdriver - Google Search';
});
}, 1000);
driver.quit();
The structure of the code may appear unfamiliar due to the asynchronous nature of promises. While promises are not inherently complex, they might require some time for adaptation especially for those accustomed to working with Python.
If you have no interest in clicking the object once it becomes available, here is an alternative approach:
function clickWhenClickable(locator, timeout){
driver.wait(function(){
return driver.findElement(locator).then(function(element){
return element.click().then(function(){
return true;
}, function(err){
return false;
})
}, function(err){
return false;
});
}, timeout, 'Timeout waiting for ' + locator.value); ;
}
If your goal is simply to verify if the element is clickable without actually clicking it, then this code may not be suitable for your needs. As of now, WebDriver JS may not offer a direct method for achieving this functionality. (If there are any insights on this matter, they are welcome)
UNTIL in webdriver js appears to be the most suitable option for this scenario:
Take a look at: https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html
Various waiting conditions have already been predefined. It is unclear which one should be considered as clickable.
I created a unique component and tried to implement it in AppBar, but the styles are not being overridden. I utilized the makeStyles hook which works perfectly fine outside of the AppBar, however, within the AppBar and ToolBar, I am encountering difficulti ...
Encountered a challenge with updating variables in runtimeConfig that rely on environment variables. When the application is built with values from the .env file like: API_URL=localhost:3000 The console displays localhost:3000. However, upon stopping th ...
Why is this jQuery code snippet not functioning as expected in Internet Explorer? It works flawlessly across all Webkit browsers. $('#logo').toggle(function() { $('#about').animate({'top': '-400px'},'slow&a ...
I am currently utilizing the IE driver with IE11. I have encountered an issue where the Click method for certain elements only selects the element without actually performing the click action. Interestingly, this script works fine with ChromeDriver and Fir ...
Can anyone help me figure out how to use Sir Trevor JS in Meteor for uploading images without encountering this error message? When attempting to load the image 'blob:http%3A//localhost%3A3000/a28ef7dc-ee51-4290-9941-6b8fc317e685', I am receivin ...
Yesterday, I attempted to create a code for sending messages via WhatsApp. However, no matter how many different approaches I tried to insert the message into the chat box, I kept encountering the same error message: "unknown error: call function result mi ...
I have successfully created a custom component in Angular 2 by implementing the CustomValueAccessor interface. This component, such as the Postcode component, consists of just one input field. <postcode label="Post Code" cssClass="form-control" formCon ...
I am facing an issue with making changes to the state while splicing an element from another array without affecting the state itself. To clarify, I want to remove one element from the array arrayWithFilters = [] without altering the state.selected.filte ...
Running an automated test that involves using multiple tabs has presented me with a challenge. Opening multiple tabs and interacting with the page content requires me to be logged in to the service. Typically, when I perform this action on my personal br ...
Hey, I've encountered something really strange - I'm receiving an error that says "Exception has occurred: JavascriptException / Message: javascript error: this.each is not a function" on a specific line in my code: waiting.until(EC.visibility_of ...
I've encountered an issue in my NextJS 13 application where Tailwind classes are no longer being applied after moving page.tsx/layout.tsx from the root directory to a (main) directory within the root. I suspect that there may be a configuration that i ...
$scope.msg = "Data Updated Successfully. Item ID: " + $scope.id; After successfully updating any data, a message will be displayed as "Data Updated Successfully. Item ID: 13456". I want to turn the ID into a clickable hyperlink. Here is what I have attem ...
This task might be a bit confusing, but it should have a straightforward solution. I am working with two API links in JSON format to pull data into a table. Currently, all data from API1 is inserted into the table first, followed by data from API2. Both ...
As a newcomer to the world of react and redux, I have been searching for answers but all I find is information on server-side rendering. However, that's not what I'm looking for (please correct me if I'm mistaken). What I really need help wi ...
Thank you for your patience. As a seasoned coder who has stuck to traditional methods for years, I am now diving into the world of AngularJS after putting off learning new technologies like JQuery. While going through tutorial videos and documentation, the ...
I'm currently developing a timeline feature using slick slider and I'm exploring ways to dynamically adjust the vertical line height for each event based on the text content. You can view the current timeline implementation at the following link ...
How can I extract data such as teamId from the "teams" array using datas.map() method in a multidimensional array? Any tips or help would be appreciated. Is there another way to map out this data? { "gameId": 3226262256, "platformId": "NA1", " ...
function display(): (number, string) { return {1,'my'} } The code above is displaying an error. I was hoping to use const {num, my} = print(). How can I correctly specify the return type? ...
In my Angular application, I am facing a challenge with accessing nested responses from the server. The data structure contains multiple responses within one parent object, and I am struggling to dig deeper into it. Here is the code snippet I have so far: ...
Encountering a problem with Selenium and Firefox, the error log displays: org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output: browser/extensions/[email protected] ...