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.
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>
2
Answers
Add a wait condition
Sometime, it’s a size of screen.
The screen magnification feature even with headless mode seems to resolve errors.
javascript :
python :
java :