Selenium Unable to locate element (Python)

Question

I am trying to click the button with selenium headless webdriver

<button data-qa="STREAKS-QA_claim-button" class="css-19g9d2g" disabled=""><span class="css-kqn307"><span class="css-z2sz3e">Claim</span>&nbsp;<span class="css-1k2c4a5"><span class="infl-fe__styles__icon___3YFBO infl-fe__styles__coins___BelNu" aria-hidden="true"></span></span>&nbsp;2&nbsp;<span class="css-1f8ibv"><span class="infl-fe__styles__icon___3YFBO infl-fe__styles__check___l-v5z" aria-hidden="true"></span></span></span></button>

My Code

element = browser.find_element_by_css_selector("button[data-qa=STREAKS-QA_claim-button]")
element.click()

It's not working :(, need some advice. Thanks in advance

Answer 1

Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath/css and see, if your desired element is getting highlighted with 1/1 matching node.

If this is a unique button[data-qa=STREAKS-QA_claim-button] then you need to check for the below conditions as well.

1. Check if it's in any iframe/frame/frameset.

2. Check if it's in any shadow-root.

3. Make sure that the element is rendered properly before interacting with it. Put some hardcoded delay or Explicit wait and try again.

4. If you have redirected to a new tab/ or new windows and you have not switched to that particular new tab/new window, otherwise you will likely get NoSuchElement exception.

5. If you have switched to an iframe and the new desired element is not in the same iframe context then first switch to default content and then interact with it.

Mostly if it is just an element rendered issue:

Code trial 1:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[data-qa=STREAKS-QA_claim-button]"))).click()

Imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

Answer 2

You are missing ' in your locator.
Also you are probably missing a delay.
If so adding a dummy sleep of

time.sleep(5)

Before

element = browser.find_element_by_css_selector("button[data-qa='STREAKS-QA_claim-button']")
element.click()

Should work.
However it is recommended to use Expected Conditions explicit waits here, something like this:

wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "button[data-qa='STREAKS-QA_claim-button']"))).click()

You will need these imports:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

To initialize the wait object you will have to do

wait = WebDriverWait(driver, 20)

Answer 3

The element is a dynamic 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 CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[data-qa='STREAKS-QA_claim-button']>span[class^='css']>span[class^='css']"))).click()
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@data-qa='STREAKS-QA_claim-button']//span[text()='Claim']"))).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