移动端模拟下Puppeteer无法点击iFrame内元素的问题排查

你的移动端脚本无法点击弹窗关闭按钮，核心原因是响应式设计下，移动端弹窗的DOM结构和桌面端不同，你使用的选择器在移动端不生效。

具体问题点 #

桌面端的关闭按钮选择器#edrone-onsite-popup-content > div > div > div:nth-child(2)是基于桌面端的DOM层级定位的，但移动端页面会根据屏幕尺寸重构弹窗布局，导致这个选择器找不到对应的关闭元素。

修复步骤 #

1. 确认移动端弹窗的实际选择器
   在Chrome开发者工具中切换到iPhone 7的移动端模式，打开目标页面，找到弹窗的关闭按钮，右键复制其正确的CSS选择器。通常移动端的关闭按钮会用更简洁的结构，比如带特定class的选择器，而非依赖nth-child的层级选择器。

2. 替换脚本中的选择器
   在移动端脚本的Step 3中，把原选择器替换为你找到的移动端专属选择器。

3. 优化等待逻辑（可选但推荐）
   不要用固定的7秒等待，改用iframe内的waitForSelector方法，确保元素完全加载并可见后再点击，避免因加载延迟导致的失败：

   if (frame) {
       page_frame = frame;
       // 等待关闭按钮出现并可见
       await page_frame.waitForSelector('你的移动端选择器', { visible: true });
       element = await page_frame.$('你的移动端选择器');
   }
   

4. 验证元素状态
   如果替换选择器后仍无法点击，可添加日志查看元素是否存在，或检查元素是否可见：

   const isVisible = await page_frame.evaluate(el => el.offsetParent !== null, element);
   console.log('元素是否可见:', isVisible);
   

示例修改后的Step 3代码片段 #

假设你找到的移动端选择器是.edrone-popup-close，修改后的代码如下：

// STEP 3           
page_frame = page;
found = false;
element = null;
step = 3;
                
frames = await page.frames();
frame = frames.find(f => f.name() === 'edrone-onsite-popup-iframe');
    
if (frame) {
    page_frame = frame;
    try {
        // 等待元素可见
        await page_frame.waitForSelector('.edrone-popup-close', { visible: true, timeout: 10000 });
        element = await page_frame.$('.edrone-popup-close');

        if (element !== null) {
            await page_frame.click('.edrone-popup-close');
            found = true;
        }
    } catch (e) {
        console.log('点击关闭按钮失败:', e.message);
    }
}

if (found === false && 0 === 0) {
    console.log ('RESULT:PROCESS (4)');
    browser.close(); process.exit();
} 

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