Selenium（Python）：元素不可點擊

Question

我正在嘗試 select 在網站上付款。 我有三個選擇：SEPA、信用卡/借記卡、PayPal。 我想點擊信用卡/借記卡。

看起來像這樣

這些選項位於主 div 中，每個選項位於另一個包含輸入（無線電類型）和 label 的 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();

Answer 2

有時，它是屏幕的大小。 即使在無頭模式下，屏幕放大功能似乎也能解決錯誤。

javascript：

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

python：

driver.maximize_window()

java：

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