javascript error: a.tagName.toUpperCase is not a function error clicking on a button using Selenium and Java

Question

I am using Selenium Webdriver with testng. On one of the WebElements I am trying to perform click on button action. I am picking the locator "ID" and performing the below action.

WebDriver webDriver = this.getWebDriver();
webDriver.findElement(By.id("addTagBtn")).click();

and i am getting below error -

javascript error: a.tagName.toUpperCase is not a function error

HTML code looks like below

question from:https://stackoverflow.com/questions/66068563/javascript-error-a-tagname-touppercase-is-not-a-function-error-clicking-on-a-bu

Answer 1

This error message...

javascript error: a.tagName.toUpperCase is not a function error

...implies that the WebDriver instance attempted to invoke click() on the desired element even before the element was completely rendered with in the DOM Tree.

---

The desired element is a Angular element. So to click() on the element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• id:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.id("addTagBtn"))).click();
  

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("td > button#addTagBtn"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//td/button[@id='addTagBtn' and text()='Add']"))).click();