0

So I am trying to click a element that is not a button element, the html code is below:

<div class="menu-item-header">
   <span class="header-title"><span class="icon-wrapper"><i class="icon-helper"></i></span>Help
   </span> <!--When a client clicks this it redirects them to the appropriate place (this is a React website)-->
</div>

The original website looks something like this:

<div class="menu-item-header">
   <span class="header-title"><span class="icon-wrapper"><i class="icon-helper"></i></span>Help
   </span> <!---->
</div>
<div class="menu-item-header">
   <span class="header-title"><span class="icon-wrapper"><i class="icon-helper2"></i></span>Help2
   </span> <!---->
</div>
...

I have tried the following method to click the element:

WebElement element = browser.findElement(...);
element.click();

however that did not work.

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Aasil
  • 103
  • 5

2 Answers2

1

The desired element is a React element so to click on the element with text as Help you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following based Locator Strategy:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@class='menu-item-header']/span[@class='header-title' and contains(., 'Help')]"))).click();
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
0

You can always default to JavaScript.

driver.execute_script("document.getElementById('#<id>').click()");

Or, if it only has a class identifier:

driver.execute_script("document.getElementsByClassName('.<classname>')[0].click()")

That being said, it does not meet accessibility standards to use spans or divs as buttons for functionality, so if you have access to the codebase, or can influence it, I would strongly suggest using a button instead.

javier123454321
  • 61
  • 4