How to wait until element is interactable in Selenium using Javascript

Question

I am trying to develop an automated test in a Single Page Application that uses VueJs, when I click on the register button the page loads a form with the elements but as the elements are loaded as needed they are not present there automatically I can solve the problem placing a driver.sleep after the registration button is clicked but I was looking for a workaround I tried ImplicitWaits and elementIsEnabled but I couldn't get results, check my code here:

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

async function teste() {

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

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

let element = (By.xpath('//*[contains(text(), "Faça seu cadastro")]'))
let query = await robo(element,driver)
await query.click()

await driver.sleep(2000)

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

element = (By.xpath('//input[contains(@title, "CPF")]'))
query = await robo(element, driver)
await query.sendKeys("11043017844")

element = (By.xpath('//*[contains(@class,"v-select__selections")]'))
query = await robo(element, driver)
await query.click()

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

element = (By.xpath('//*[contains(@title, "Data de Nascimento")]'))
query = await robo(element, driver)
await query.sendKeys("06031997")

element = (By.xpath('//*[contains(@title, "E-mail")]'))
query = await robo(element, driver)
await query.sendKeys("teste@email.com")

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

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

element = (By.xpath('//*[contains(text(), "Aceito e Cadastre-me")]'))
query = await robo(element, driver)
await query.click()

}

teste()

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

}

user_11270766 · Answer

This is a Java solution.

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

Please do similar with JS.

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

How to wait until element is interactable in Selenium using Javascript

1 Answers