[🐛 Bug]: Chrome headless: ElementClickInterceptedException when try to click input element inside iframe #15383
Closed as not planned
Description
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):
Error (see below) says, that click will be intercepted by the "section" element, which actually serves as outer container for the iframe
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&..... 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