4

I am getting an error:

Cannot read property 'click' of undefined

while trying to click a button using java script executor. I have tried many different approach to click the button using action classes, webdriverwait etc but none seems to work.Java Script is working in console but when i am using in my code i am unable to click the button and getting the mentioned error

The html dom looks as below:

<div>
    <a class="button button--new-resource" href="/admin/certificate_types/new">
        <img src="/assets/icon-add-user-e2a98953aa1855b15304eb16415b536ee92e579ce89f429bcdd062faa855e261.svg" alt="Icon add user"> New Certificate Type
    </a>
</div>

My selenium script is as below

JavascriptExecutor js=(JavascriptExecutor) driver;        
js.executeScript("var x= document.getElementsByClassName('button button--new-resource')[0];"+"x.click();");
1
  • 1
    Why are you using a javascript executor instead of findElements and the click() method? Commented Dec 2, 2020 at 4:20

5 Answers 5

2

This error message...

Cannot read property 'click' of undefined

...implies that the click() method can't be executed as the WebElement haven't completely rendered within the DOM Tree and the element is still in undefined state.


Details

As you mentioned that the "Java Script is working in console" that implies the JavaScript is perfecto. The main issue is the element haven't rendered completely within the HTML DOM.


Solution

As a solution, you need to induce you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use either of the following Locator Strategies:

  • Using cssSelector:

    new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.cssSelector(".button.button--new-resource")));
    ((JavascriptExecutor) driver).executeScript("var x= document.getElementsByClassName('button button--new-resource')[0];"+"x.click();");
    
  • Using xpath:

    new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//*[@class='button button--new-resource']")));
    ((JavascriptExecutor) driver).executeScript("var x= document.getElementsByClassName('button button--new-resource')[0];"+"x.click();");
    

Best practices

However, as per best practices to click on the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

  • Using CSS_SELECTOR:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.button.button--new-resource[href='/admin/certificate_types/new']>img[alt='Icon add user']"))).click()
    
  • Using XPATH:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='button button--new-resource' and @href='/admin/certificate_types/new']/img[@alt='Icon add user']"))).click()
    
  • Note: You have to add the following imports :

    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support import expected_conditions as EC
    
Sign up to request clarification or add additional context in comments.

Comments

1

This is the wrong way to pass element into the JSExecutor, you need to combine it with FindElement call. In your case, the script might be executed before the element can be found, resulting 'undefined' error.

// find the element
var element = new WebDriverWait(driver, 20).until(ExpectedConditions.ElementToBeClickable(By.xpath("//*[@class='button button--new-resource']")));

// execute the click on the element you have found
((JavascriptExecutor)driver).ExecuteScript("arguments[0].click();", element);

Comments

0

the problem is in quotation marks

js.executeScript("document.getElementsByClassName('button button--new-resource')[0].click();");

should do the job

if there is only one button

<a class="button button--new-resource" href="/admin/certificate_types/new">

use document.getElementByClassName and do not use index:

js.executeScript("document.getElementByClassName('button button--new-resource').click();");

2 Comments

The second one is throwing syntax error and first one isnt working
Do you necessary find the element using js? Why not using: WebElement element = driver.findElement(By. ... ?
0

your locator is wrong , its a multi class element use '.' instead of space

js.executeScript("var x= document.getElementsByClassName('button.button--new-resource')[0];"+"x.click();");

Comments

0

Why do you use js executor? Try

WebElement element = driver.findElement(By.className(CLASS_NAME));
element.click();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.