Puppeteer如何选中iframe内非隐藏的信用卡号输入框输入内容

解决方案 #

你可以通过Puppeteer内置的可见性过滤参数，结合精准选择器解决该问题，两种实现方式如下：

方案1：使用官方可见性参数过滤（通用方案）

Puppeteer的waitForSelector方法支持传入{ visible: true }配置项，会自动过滤不可见的元素，只返回可交互的可见元素，直接对返回的元素句柄调用输入方法即可：

const frame = getFrame(this.page, "FrameCCPay")
// 仅等待匹配选择器的可见元素加载完成
const visibleCardInput = await frame.waitForSelector(".placePan input", { visible: true })
// 直接对可见元素输入，无需重复查询选择器
await visibleCardInput.type(mynumber)

方案2：结合DOM结构做精准匹配（适配当前场景更稳妥）

观察你提供的DOM结构，隐藏的输入框id固定以_bin结尾，你可以用CSS属性选择器直接排除该类元素，再结合可见性过滤，双重保障匹配正确：

const frame = getFrame(this.page, "FrameCCPay")
// 排除id以_bin结尾的隐藏输入框，同时校验可见性
const cardInput = await frame.waitForSelector(".placePan input:not([id$='_bin'])", { visible: true })
await cardInput.type(mynumber)

原理解释 #

• 你之前的代码失效的核心原因是默认情况下Puppeteer的选择器会匹配所有DOM中存在的元素，不会自动过滤不可见元素，如果匹配到display: none的隐藏元素，调用type输入不会生效
• { visible: true }参数会自动排除display: none、visibility: hidden、宽高为0、被遮挡的不可交互元素，保证操作的是用户实际可输入的元素
• :not([id$="_bin"])是CSS属性后缀匹配选择器，直接过滤掉该场景下固定的隐藏输入框，适配性更强

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