Selenium (Python) : Element is not clickable

Question

I'm trying to select a payment on a website. I have three choices : SEPA, Credit/debit, PayPal. I want to click on Credit/Debit.

It looks like this

Those choices are inside a main div, and each choice is inside another div that contains input (radio type) and label.

The problem is that I can't click on this choice because I have the following error:

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (466, 1613)

with this code:

element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
element.click()

I found a workaround that works, but for some reasons it mess up the form and invalidate it. Here is what I tried:

element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
driver.execute_script("arguments[0].click();", element)

I tried other solutions, such as waiting until element visible, xpath, ... but got no result. I would like to know why my element is not clickable, while I can click on it with javascript?

Any help appreciated! Thanks

HTML Code :

<div id="place-order" class="has-shadow">
    <div class="white-box">
        <div class="recurly-payment-fields mb-4">
            <div class="recurly-payment-buttons row my-4">
                <div class="recurly-payment-buttons__item col method-sepa" data-target="method-sepa">
                    <input type="radio" id="input-method-sepa" name="method" value="sepa" checked="" class="sr-only">
                    <label class="sr-only" for="method-sepa">SEPA</label>
                    <div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
                        <div class="logo"></div>
                    </div>
                </div>
                <div class="recurly-payment-buttons__item col method-cc active" data-target="method-cc">
                    <input type="radio" id="input-method-cc" name="method" value="cc" class="sr-only">
                    <label class="sr-only" for="method-cc">Credit Card</label>
                    <div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
                        <div class="logo"></div>
                    </div>
                </div>
                <div class="recurly-payment-buttons__item col method-paypal" data-target="method-paypal">
                    <input type="radio" id="input-method-paypal" name="method" value="paypal" class="sr-only">
                    <label class="sr-only" for="method-paypal">PayPal</label>
                    <div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
                        <div class="logo"></div>
                    </div>
                </div>
            </div>
            <div id="recurly-payment-methods" class="recurly-payment-methods">
                <div id="field-method-sepa" class="recurly-payment-methods__field method-sepa collapse" style="">
                    <p>
                        <label for="iban">IBAN</label>
                        <input type="text" id="iban" name="iban" class="form-control" placeholder="e.g. FR1420041010050500013M02606" data-recurly="iban">
                    </p>
                </div>
                <div id="field-method-cc" class="recurly-payment-methods__field method-cc collapsed collapse show" style="">
                    <div id="recurly-card-field" name="card">
                        <div data-recurly-element-id="HYOmiZxK5SgiQBEk" class="recurly-element recurly-element-card">
                            <iframe allowtransparency="true" frameborder="0" scrolling="no" name="recurly-element--HYOmiZxK5SgiQBEk" allowpaymentrequest="true" style="background: none; width: 100%; height: 100%;" src="https://api.recurly.com/..." tabindex="0"></iframe>
                        </div>
                    </div>
                </div>
                <div id="field-method-paypal" class="recurly-payment-methods__field method-paypal collapsed collapse" style="">
                    <span class="text-md-3">You will be directed to PayPal when checkout is complete.</span>
                </div>
            </div>
        </div>
        <div class="woocommerce-terms-and-conditions-wrapper">
            <div class="terms-and-conditions-text mr-4">
                <a data-toggle="collapse" href="#terms-and-conditions" class="terms-and-conditions-link" target="">
                    Clicking 
                    <strong>Submit</strong>
                     means that you agree to the 
                    <span class="text-link">terms and conditions</span>
                    .
                </a>
            </div>
            <div id="terms-and-conditions" class="terms-and-conditions collapse rounded">
            </div>
        </div>
    </div>
</div>

Answer 1

Add a wait condition

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

element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.CSS_SELECTOR, "input[type='radio'][id='input-method-cc'][value='cc']")))

element.click();