The process of ensuring an element is ready for interaction in Selenium with Javascript

I am currently working on creating an automated test for a Single Page Application built with VueJs. When I click on the registration button, a form is loaded onto the page with various elements. However, since the elements are loaded dynamically, they are not immediately present on the page. Although adding a driver.sleep function after clicking the registration button solves the issue, I have been exploring alternative solutions. I've experimented with ImplicitWaits and elementIsEnabled methods, but so far, I haven't achieved the desired results. Here is a snippet of my code:

const { Builder, By, Key, until } = require('selenium-webdriver')

async function test() {

const driver = await new Builder().forBrowser('chrome').build()

await driver.get('https://dez.dev.dav.med.br/login')

let element = (By.xpath('//*[contains(text(), "Register")]'))
let query = await robo(element, driver)
await query.click()

await driver.sleep(2000)

element = (By.xpath('//*[contains(@title, "Name")]'))
query = await robo(element, driver)
await query.sendKeys("TestingVictor2")

// Additional code...

}

test()

async function robo(element, driver, TIMEOUT=10000){

    const locator = await driver.wait(until.elementLocated(element, TIMEOUT))
    
    const query = await driver.wait(until.elementIsVisible(locator, TIMEOUT))
    
    return query
    

}

Answer №1

This code provides a Java solution to check if an element is clickable.

public boolean IsElementClickable(WebElement element)      
{
    try
    {
        WebDriverWait wait = new WebDriverWait(driver, 5);
        wait.until(ExpectedConditions.elementToBeClickable(element));
        return true;
    }
    catch (Exception ex)
    {
        return false;
    }
}

To achieve similar functionality in JavaScript, you can use the following code snippet:

var buttonElement = driver.wait(until.elementLocated(By.id('button'))); buttonElement.click();

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

Utilize JSON data to display markers on Leaflet maps

I am exploring the world of Leaflet and I have a question about loading markers from a database into a leaflet map using PHP. In my PHP code, I extract latitude and longitude data from the database based on the selected ward and encode it in JSON format. ...

What steps should I follow to initialize the generated code?

Is there a way to dynamically add elements that respond to click events after the Vue instance has been initialized? Using v-html to append to the DOM works, but the new v-on attributes are not processed, causing the buttons to be non-functional. <!D ...

What is the method for incorporating an onmouseover event into child states while extending the parent state controller?

I have a basic angularjs controller coupled with jquery that triggers a console log message when the mouse hovers over an anchor element: app.controller('MenuController', function() { $("a").on('mouseover', function (e) { c ...

Here is a unique rewrite of the text: "Finding and selecting a specific <li> element from a list (<ul>) can be achieved by using the findElemem

Struggling to automate the selection process and have the 2nd item automatically chosen when the div pops up, but encountering difficulties. I need 'Mr.' to be selected instead of '--None--'. Please provide assistance. The HTML code is ...

Tips for displaying a modal to a user only once

I've developed a Flask application that enables multiple users to register and log in. To achieve this, I have incorporated sessions into my code. When new users land on the initial page, they are greeted with a modal introducing them to the platform. ...

ng-repeat and $scope problem

I am having an issue with my page where I display 3 images in a row using Ng-repeat. When I click on any image, it only shows the first image that was displayed in that particular row. Template: <div id="galscrolldiv" class="row" ng-repeat="image in i ...

Internet Explorer IE 11 encounters an "Error: Object does not support property or method" issue

Recently, I started using the jquery circleChart.min.js plugin for creating a circle chart. It's been working perfectly on all browsers except for Internet Explorer 11 (IE11). I keep getting an error message when trying to run it in IE11. Can anyone h ...

Is it possible to obtain the X-Y coordinates of the ray collision location in relation to the targeted face?

I have been working on determining the ray collision coordinate in relation to the targeted face... The following is my code snippet: var fMouseX = (iX / oCanvas.width) * 2 - 1; var fMouseY = -(iY / oCanvas.height) * 2 + 1; //Utilizing OrthographicCamer ...

Automating the process of reading text labels associated with a toggle switch using Python in Selenium

I'm currently working on a task that involves toggling a switch on/off using Selenium code. However, I'm facing a challenge as I need to locate the toggle switch based on its "text label" instead of its ID or Name. Below is the HTML code for the ...

Utilizing data from an external JavaScript file in an Express application

I am currently developing an application using Node.js Express, where I need to pass some data from Express and utilize it in an external JavaScript file. Below is my app.js: const express=require('express'); const path=require('path&apos ...

"Scraping Request Dysfunction: An Inconvenient Gl

I'm utilizing selenium and Scrapy to scrape data from this website. My task involves going through each company name, accessing the company information page, extracting relevant data, and also navigating to the Marketing Contacts page to gather speci ...

Upon utilizing @nuxtjs/auth for logging in, I noticed that it sends a request with a URL that deviates from the one I initially provided

The Issue at Hand Utilizing the Nuxt.js module @nuxtjs/auth' for login authentication has resulted in an unexpected error. Specifically, upon using the loginWith method, instead of redirecting to the URL specified in the configuration, it redirects t ...

Progressively modifying related elements over time intervals

I have a specific list of p elements in my HTML code that I need to modify sequentially with a time interval of 1 second. Here is the HTML: <p>Changing first sentence!</p> <p>Second sentence ready!</p> <p>Third one coming up ...

Gain access to the "computed style" of elements in a directive

I recently created a directive for a loader element, but I am facing issues with undefined styles. Is there a way to access the "computed styles" of an element within the directive? export const ElementLoader = { componentUpdated(el, binding) { if ...

Issue: $injector:unpr Angular Provider Not Recognized

I've recently developed an MVC project and encountered an issue regarding the loading of Menu Categories within the layout. <html data-ng-app="app"> . . . //menu section <li class="dropdown" ng-controller="menuCategoriesCtrl as vmCat"> ...

A guide on manipulating an input field to trigger md-datepicker upon clicking

What is the best way to convert an input text into a fire md-datepicker and achieve a similar result like this? ...

Using Meteor methods in a Meteor and Ionic application: A guide

After building the web app with Meteor, I am now looking to develop a new app utilizing both Meteor and Ionic technologies. My goal is to leverage the existing Meteor methods in my Ionic app without duplicating efforts for mobile development. Any suggestio ...

Moving various divisions through Javascript by clicking various buttons although sharing the same identifier

I am working with the script below: $(document).ready(function() { $('.expandButton').click(function() { $('.expandableSection').toggle("slide"); }); }); My goal is to apply this script to multiple sections. However, ...

Utilizing MongoDB and Express to access collections within a controller

Is there a way to access the collection in the controller using mongodb and express? I came across this code snippet in the mongodb documentation db.getCollection("countries");, but how do you import the database name: db into a controller? serv ...

Transforming an array of strings into a Name/Value object using JavaScript

Recently, I encountered a Web Service that sends an array of strings to the client. My goal is to transform this array into an object where each string has a name for future reference. Let's start with: var result = ["test", "hello", "goodbye"]; An ...