Puppeteer如何快速查找主页面或iFrame中同ID的目标元素

你现有代码的问题在于递归逻辑仅遍历了当前传入frame的子iframe，没有对当前frame本身执行选择器查询：当你传入page.mainFrame()时，函数只会检索它的所有子iframe，完全跳过了主页面的上下文查询，所以元素在主页面时找不到结果。

直接调整递归逻辑，优先查询当前传入的frame本身，再递归查询子iframe即可，调整后的代码如下：

async function recursiveFindInFrames(inputFrame, selector) {
  // 先查询当前frame本身是否有目标元素
  const el = await inputFrame.$(selector);
  if (el) return el;

  // 再递归查询所有子iframe
  const childFrames = inputFrame.childFrames();
  const results = await Promise.all(
    childFrames.map(async frame => {
      return await recursiveFindInFrames(frame, selector);
    })
  );
  return results.find(Boolean);
}

async function findInFrames(page, selector) {
  const result = await recursiveFindInFrames(page.mainFrame(), selector);
  if (!result) {
    console.log('The selector ',selector,' could not be found in main page or any child frames.')
  }
  return result;
}

// 调用方式保持不变
const element = await findInFrames(page2, 'input[name="myField"]');
await element.click();

• 如果需要兼容元素未完成渲染的场景，可以把inputFrame.$(selector)替换为inputFrame.waitForSelector(selector, {timeout: 3000})，最多等待3秒让元素加载完成，避免因渲染时序问题查询失败
• 代码默认返回第一个匹配到的元素，搜索优先级是：主页面优先于所有iframe，子iframe按DOM中出现的顺序深度优先检索，如果需要返回所有匹配元素，可以调整返回逻辑把所有命中结果收集后统一返回

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