Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐛 Bug]: Chrome headless: ElementClickInterceptedException when try to click input element inside iframe #15383

Open
kool79 opened this issue Mar 6, 2025 · 1 comment

Comments

@kool79
Copy link
Contributor

kool79 commented Mar 6, 2025

What happened?

When I try to click an element inside iFrame (credit card number input field) in headless mode, I got the error ElementClickInterceptedException

  • It is not reproduced in headed mode
  • no other element overlaps the control, which I try to click on it (screenshot was made in headless mode):
Image

Error (see below) says, that click will be intercepted by the "section" element, which actually serves as outer container for the iframe

Image

How can we reproduce the issue?

iframe content:

<body>
<input id="shiftTabField" tabindex="-1" autocomplete="off" aria-hidden="true">
<script>...removed for clarity....<script>
<script>...removed for clarity....<script>

<div class="gsf-holder" style="display: block;">
    <input id="adyen-checkout-encryptedCardNumber-1741281868620"
           data-fieldtype="encryptedCardNumber" type="text"
           inputmode="numeric" maxlength="24" autocomplete="cc-number"
           placeholder="" aria-label="Card number" aria-invalid="false"
           aria-required="true"
           aria-describedby="adyen-checkout-encryptedCardNumber-1741281868620-ariaContext"
           class="js-iframe-input input-field" data-type="gsf"
           style="display: block;">
    <span class="aria-error aria-context" id="adyen-checkout-encryptedCardNumber-1741281868620-ariaContext"></span>
    <div>
        <input class="autocomplete-field" type="text" id="acDtField" name="cc-exp" autocomplete="cc-exp"
               aria-hidden="true" tabindex="-1">
        <input class="autocomplete-field" type="text" id="acNmField" name="cc-name" autocomplete="cc-name"
               aria-hidden="true" tabindex="-1">
    </div>
</div>
</body>


main content with embedded iframe:

Relevant log output

Exception (I cut-of some of the elements  attributes):

qa.ok.fw.core.exceptions.StepTerminatedException: Step [CreditCardWidgetAdyen.fillForm()]. 
Error: element click intercepted: Element 
<iframe src="https://checkoutshopper-test.adyen.com/checkoutshopper/securedfields/test_36SISQ457BAL3COSOO53VRHJEURIUUTX/4.9.0/securedFields.html?type=card&amp;..... class="js-iframe" title="Iframe for card number" allowtransparency="true" referrerpolicy="origin" cd_frame_id_="964f9c9a3472449d05b827fc62b7eac3">...</iframe> 

is not clickable at point (879, 711). Other element would receive the click: 

<section data-widget="paymentAccordionItemAdyenScheme" data-widget-event-closeallitems="closeItems" .... >...</section>
  (Session info: chrome=134.0.6998.45)
Build info: version: '4.26.0', revision: '8ccf0219d7'
System info: os.name: 'Mac OS X', os.arch: 'aarch64', os.version: '15.3.1', java.version: '23.0.1'
Retry count: 3
Driver info: org.openqa.selenium.chrome.ChromeDriver
Command: [9eff8b9f077f307b81d5c87d3745c105, clickElement {id=f.84103BD6C3064D6931C7601B969D2DFF.d.C1A6AF395AB33B17230B1338447CE9EA.e.2}]
Capabilities {acceptInsecureCerts: true, browserName: chrome, browserVersion: 134.0.6998.45, chrome: {chromedriverVersion: 134.0.6998.35 (ea6ef4c2ac15..., userDataDir: /var/folders/97/xjm0tzyj139...}, fedcm:accounts: true, goog:chromeOptions: {debuggerAddress: localhost:58645}, networkConnectionEnabled: false, pageLoadStrategy: normal, platformName: mac, proxy: Proxy(), se:cdp: ws://localhost:58645/devtoo..., se:cdpVersion: 134.0.6998.45, setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:extension:credBlob: true, webauthn:extension:largeBlob: true, webauthn:extension:minPinLength: true, webauthn:extension:prf: true, webauthn:virtualAuthenticators: true}
Element: [[[[ChromeDriver: chrome on mac (9eff8b9f077f307b81d5c87d3745c105)] -> css selector: body]] -> css selector: input[id^='adyen-checkout-encryptedCardNumber-']]

Operating System

macOS bigSur

Selenium version

Java23 selenium 4.25

What are the browser(s) and version(s) where you see this issue?

chrome 134.0.6998.45

What are the browser driver(s) and version(s) where you see this issue?

chromedriver (downloaded by selenium driver manager)

Are you using Selenium Grid?

no

Copy link

github-actions bot commented Mar 6, 2025

@kool79, thank you for creating this issue. We will troubleshoot it as soon as we can.


Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

If the issue requires changes or fixes from an external project (e.g., ChromeDriver, GeckoDriver, MSEdgeDriver, W3C), add the applicable G-* label, and it will provide the correct link and auto-close the issue.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

@kool79 kool79 changed the title [🐛 Bug]: Chrome headless: ElementClickInterceptedException when try to click element iframe [🐛 Bug]: Chrome headless: ElementClickInterceptedException when try to click input element inside iframe Mar 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant