How to click a javascript enabled anchor element using Selenium and Python

Question

This is the html of the element I am trying to click:

<a id="sd3" class="node"
href="/cgi-bin/luci/;stok=753940cb907c7e8524cfaf3c5227614c/expert/configuration/network/wlan" 
target="mainFrame" onclick="javascript: d.s(3);">Wireless LAN 2.4G</a>

This is the error raised:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element

From the F12 inspection screen, this is the xpath:

//*[@id="sd3"]

This is the selector:

#sd3

This is the full xpath:

/html/body/div[3]/div/ul/li[2]/div/ul/li/div/ul/li[3]/div/div/div[2]/div[2]/div[2]/a

I tried all of these:

driver.find_element_by_link_text(url).click()
driver.find_element_by_xpath("//dTreeNode[3]").click()
driver.find_element_by_partial_link_text('url').click()
driver.find_element_by_css_selector('a.node').click()
driver.find_element_by_xpath("//dd1[2]").click()
driver.find_element_by_css_selector('a#sd3').click()
driver.find_element_by_css_selector(".node[id='sd3']").click()
driver.find_element_by_xpath("//a[@id='sd3']").click()
driver.find_element_by_link_text('Wireless LAN 2.4G').click()
driver.find_element_by_xpath("//div[@id='dd1']/div[2]/a[1]").click()
driver.find_element_by_xpath("//div[@id='dd1']/div[2]/a[@id='sd3']").click()
driver.find_element_by_xpath("//a[@id='sd3']").click()
driver.find_element_by_id("sd3").click()
driver.find_element_by_link_text('Wireless LAN 2.4G').click()
driver.find_element_by_xpath("/html/body/div[3]/div/ul/li[2]/div/ul/li/div/ul/li[3]/div/div/div[2]/div[2]/div[2]/a").click()
driver.find_element_by_xpath("//*[@id='sd3']").click()

Conclusion: I must admit that I find myself completely clueless to find that despite all my different attempts, it is this very same exception being raised. And yet I'm using the same line of codes earlier in my script and it works like a dime. I even tried to give the content time to generate (3 seconds) cause it's dynamically generated. I'm led to 2 conclusions. I'm either the problem which I couldn't find, or the fact that this is some dynamically generated content is adding a layer of complexity for Selenium that I didn't get.

Answer 1

The <a> element is a JavaScript enabled element. So 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 LINK_TEXT:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Wireless LAN 2.4G"))).click()
  

• Using PARTIAL_LINK_TEXT:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.PARTIAL_LINK_TEXT, "Wireless LAN 2"))).click()
  

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.node[href$='/expert/configuration/network/wlan']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[@class='node' and contains(@href, 'expert/configuration/network/wlan')][contains(., 'LAN 2.4G')]"))).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
  

Note: You can find a relevant discussion in Selenium “selenium.common.exceptions.NoSuchElementException” when using Chrome