python - Selenium (Python): Element is not clickable

Question

我正在尝试在网站上选择付款方式。我有三个选择:SEPA、信用卡/借记卡、PayPal。我想点击贷方/借方。

It looks like this

这些选择在一个主 div 中，每个选择都在另一个包含输入( radio 类型)和标签的 div 中。

问题是我无法点击这个选项，因为我有以下错误:

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

使用此代码:

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

我找到了一个可行的解决方法，但由于某些原因，它弄乱了表单并使其无效。 这是我尝试过的:

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

我尝试了其他解决方案，例如等待元素可见、xpath 等，但没有任何结果。 我想知道为什么我的元素不可点击，而我可以用javascript点击它？

感谢任何帮助!谢谢

HTML 代码:

<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

添加等待条件

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