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

Using v-model in Vue with jQuery integration

I wrote a jQuery code that is executed when the mounted hook runs mounted() { this.$progress.finish(); var geocoder = new google.maps.Geocoder(); var marker = null; var map = null; function initialize() { var $latitude = document.getEl ...

JavaScript and CSS tabs with smooth transition effect

I want to create tabs that smoothly fade between each other when switching. The code I have works, but there's a slight issue. When transitioning from one tab to the previous one, there is a momentary glitch where the last tab briefly changes state be ...

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Encountering issues with submitting file through ajax. Despite following instructions from various sources, the formdata does not seem to contain the file resulting in an 'undefined index 'image'' error. <form enctype: 'multip ...

The background on my modal remains unchanged

I have integrated a modal using Iframe for user login/registration on my website. Here is the HTML code: <div class="modal" id="ays-popin-connexion" aria-hidden="true"> <div class="modal-body" aria-hidden="true"> <iframe src=" ...

Is there a way to send a variable to the alert function using $.ajax()?

I need assistance with confirming the deletion of a record. When the user clicks on the button, it should send the value 'Yes' to a $_POST request in PHP for deleting the record. However, instead of working as expected, it is showing me the JavaS ...

Looping through a JSON array and encoding it using the `

I am looking to retrieve data from the database using AJAX and populate a 'select' tag with that data. Each name should be displayed in its own 'option'. Here is the code snippet: Index.php: <label>Select:</label> <sel ...

A guide on implementing nested child routes in AngularJS 2

I have successfully completed routing for two children, but now I want to display nested routes for those children. For example: home child1 child2 | grand child | grand child(1) ...

Ways to retrieve the content within the inner span element

I'm trying to extract an integer value from a span element using Python Selenium. The HTML tag I'm referring to is shown below. Any assistance would be greatly appreciated! <span class="pendingCount"> <img src="/static/m ...

AngularJS: Compile a particular template

One pre tag on the page contains dynamic text that is unknown during page load. This text may include ng commands, as shown below: <pre> Hello <span ng-click="test('args')">world</span> angular-JS! </pre> Since these ...

Enter information into the TextArea and jQuery dialog

I require assistance in populating a textarea with data obtained from querying a database. I have a jQuery dialog that contains another dialog, inside of which is a textarea. Here is some pseudocode: <MODAL> <modalB> <TextArea>s ...

attempting to retrieve the selected values from within an iframe

I'm attempting to access the values of an iframe element select within a dialog on my page. In my JS file, I wrote code to access a select with the ID "firstSelectms2side__sx", but it didn't work as expected. Setting aside the iframe, I also tr ...

Having a tough time getting Selenium to successfully complete the automated checkout process

After experimenting with Selenium and attempting to automate the checkout process, I've encountered a stumbling block in the final part of my code. Despite numerous configurations of 'sleeps' and 'implicit_waits', I keep receiving ...

Mastering the art of binding values within nested JSON structures

I am looking to establish two-way binding with my JSON data, so that when a value changes in an input field, it will also update the corresponding value in the 'data' section. I believe using the 'bind' directive is the best way to achi ...

Detecting drag events between connected angular ui-trees is a complex yet achievable task

How can I trigger an action when an item is dragged from tree#1 to tree#2 and dropped? I want to make a specific HTTP call to save the transferred item. I have successfully implemented actions within one tree using the 'dropped' event, but strugg ...

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

What steps can be taken to restrict a user's access to the main page unless they are logged in?

I have created sign up and login pages using JavaScript, HTML, and PHP with a database. After a user successfully logs in on the login page, the following code is executed: sessionStorage.setItem('logged','loggedIn'); The user is then ...

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

Efficiently Reload a Page Without a 404 Error and Pass in a Route Variable using Vue Router and Laravel

Is there a way to ensure that my single page application's URL loads correctly after a reload, rather than throwing a 404 error? My tech stack includes Laravel 5.6, Vue.js 2.6, and MAMP. I attempted the following code, but since I am loading differen ...

What steps can be taken to guarantee that React updates occur in the correct order?

I'm currently working on developing a multi-select dropdown and facing the issue of hiding the options once a user selects one. The problem arises when I try to update the selectedCategoriesData state and then hide the dropdown using setShowCategories ...

"Is it possible for a Python project to automatically download all of its dependencies on its

For a college project, I have been tasked with creating an automated test suite for a feature of a web application. Using Selenium, the automation project will generate reports for the tests conducted. One requirement is that there should be no manual ad ...