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>

Mate Mrše · Accepted Answer · 2021-04-12 09:33:17Z

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();

answered Apr 12, 2021 at 9:33

Mate Mrše

8,52413 gold badges52 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Babago Over a year ago

Hey, I have the same error unfortunately "selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (466, 1612)". I added some HTML code if it can help :)

Mate Mrše Over a year ago

The element is not clickable probably because another element obscures it. That's why you can click it with javascript but not selenium. Is the window maximized? It could be the element is not in view.

Sacha Durand · Accepted Answer · 2021-09-03 09:59:02Z

0

Sometime, it's a size of screen. The screen magnification feature even with headless mode seems to resolve errors.

javascript :

driver.manage().window().maximize();

python :

driver.maximize_window()

java :

driver.manage().window().maximize();

answered Sep 3, 2021 at 9:59

Sacha Durand

6301 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Selenium (Python) : Element is not clickable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related