Playwright测试Adyen支付：Safari Mobile输入框不可编辑原因排查

问题场景 #

使用Playwright测试基于Adyen Drop-in（iframe实现）的卡片支付功能时，所有浏览器仿真环境测试正常，唯独Safari Mobile仿真中卡号输入框无法填充测试数据。

相关代码与报错 #

卡号输入框HTML结构 #

<input id="adyen-checkout-encryptedCardNumber-1712080102156" data-fieldtype="encryptedCardNumber" type="text" inputmode="numeric" maxlength="24" autocomplete="cc-number" placeholder="1234 5678 9012 3456" aria-label="Kortnummer" aria-invalid="false" aria-required="true" aria-describedby="adyen-checkout-encryptedCardNumber-1712080102156-ariaContext" class="js-iframe-input input-field" data-type="gsf" style="display: block;">

Playwright定位与填充代码 #

const cardNumberInputField = cardNumberFrame.getByPlaceholder("1234 5678 9012 3456");
await expect(cardNumberInputField).toBeVisible();
await cardNumberInputField.fill("4111 1111 1111 1111");

报错信息 #

locator resolved to <input type="text" maxlength="24" data-type="gsf" reado…/>
elementHandle.fill("4111 1111 1111 1111")
waiting for element to be visible, enabled and editable
element is not editable - waiting...

临时解决方法 #

通过移除readonly属性让测试通过：

async function removeReadOnlySafariMobile(elementHandle) {
  await elementHandle.evaluate((node) => node.removeAttribute("readonly"));
}

为什么仅Safari Mobile仿真会出现这个问题？ #

1. Adyen组件的浏览器适配逻辑：Adyen Drop-in会针对不同浏览器/环境做特殊处理，Safari Mobile的输入交互有独特的行为限制（比如原生键盘适配、iframe内元素的安全策略），组件会给输入框动态添加readonly属性，转而通过JavaScript代理的方式处理输入（比如实时加密卡号），但这种逻辑只在识别到Safari Mobile环境时触发。
2. Playwright仿真与真实环境的差异：Playwright的Safari Mobile仿真会让Adyen组件识别为Safari Mobile环境，触发readonly的适配逻辑，但Playwright的fill方法是直接操作DOM元素，不像真实用户交互那样能触发组件的JS输入代理，导致Playwright认为元素不可编辑。
3. Safari Mobile的iframe输入限制：Safari Mobile对iframe内的表单元素有更严格的交互限制，Adyen为了兼容这种限制，采用readonly+JS模拟输入的方案，但自动化工具的操作逻辑无法适配这种非原生的输入方式。

内容的提问来源于stack exchange，提问作者Patrik Bergman