NoSuchElementException: Message: Unable to locate element while trying to click on the button VISA through Selenium and Python

Question

I can't click on this button to create a checkout on my bot. I want to click the image to get another page.

<label for="VISA" class="choiceLabel">
            
<input type="radio" class="visuallyhidden" name="cardTypeRadio" id="VISA" value="VISA" title="VISA" onclick="validateAndSubmit('VISA');">
<span class="imgElt xh-highlight" onclick="validateAndSubmit('VISA');">
              <img src="/static/2.15.0.1/images/type-carte/visa.png" alt="VISA" title="Visa">
            </span>
            <span class="txtElt">Visa</span>
          </label>

Answer 1

The button to create a checkout on my bot seems to be a Credit Card related field and historically Credit Card related fields resides within <iframe>.

You can find a couple of relevant discussions in:

• Unable to locate element of credit card number using selenium python
• org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element when trying to locate card-fields-iframe by CssSelector

So if the the desired element is within an <iframe> so you have to:

• Induce WebDriverWait for the desired frame to be available and switch to it.
• Induce WebDriverWait for the desired element to be clickable.

• You can use either of the following solutions:

  • Using CSS_SELECTOR:

    WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"iframe_css_selector")))
    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "label[for='VISA']"))).click()
    

  • Using XPATH:

    WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe_xpath")))
    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[@for='VISA']"))).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