Puppeteer无法点击frameset框架内表单表格链接，是否可通过坐标点击解决？

问题原因 #

Puppeteer 的 page 对象默认只能操作顶层页面的 DOM 树，而 frameset 下的每个 frame 都是独立的 DOM 上下文，你要操作的链接在 name=rightmiddle 的 frame 内，直接在顶层 page 上查询选择器当然找不到元素。

推荐解决方案（切换 Frame 上下文，稳定性最高） #

优先用切换frame上下文的方案，和直接操作顶层页面逻辑一致，受页面布局变动影响最小：

1. 等frameset加载完成后，匹配到name属性为rightmiddle的frame
2. 获取该frame的可操作上下文，后续所有对该frame内元素的操作都基于这个上下文执行

替换你代码中失效部分的示例：

// 等待rightmiddle frame加载完成
const rightMiddleFrame = await page.waitForFrame(frame => frame.name() === 'rightmiddle', {timeout: 15000});
// 等待frame内部页面DOM加载完成
await rightMiddleFrame.waitForNavigation({waitUntil: 'domcontentloaded'});

// 在rightMiddleFrame上下文里查询元素、执行点击
await rightMiddleFrame.waitForSelector("td[class='summarydata'] a[class='hyperlinkclick']");
await rightMiddleFrame.click('#ScrollingTable > tr.summaryrow > td:nth-child(2) > span > a');

兜底方案：坐标点击 #

如果特殊场景下无法切换frame，可以用坐标点击实现，但要保证元素在可视区域内，否则点击会失效：

// 计算元素在整个页面的绝对坐标
const clickPos = await page.evaluate(() => {
  const targetFrame = document.querySelector('frame[name="rightmiddle"]');
  const frameDoc = targetFrame.contentDocument || targetFrame.contentWindow.document;
  const targetEl = frameDoc.querySelector('#ScrollingTable > tr.summaryrow > td:nth-child(2) > span > a');
  // 元素相对于frame内部的坐标
  const elRect = targetEl.getBoundingClientRect();
  // frame相对于整个页面的坐标
  const frameRect = targetFrame.getBoundingClientRect();
  // 返回元素中心点的绝对坐标
  return {
    x: frameRect.left + elRect.left + elWidth / 2,
    y: frameRect.top + elRect.top + elHeight / 2
  }
});
// 执行坐标点击
await page.mouse.click(clickPos.x, clickPos.y);

额外注意事项 #

• 不要使用超长的层级选择器，尽量用id、class组合的短选择器，页面结构稍有变动超长选择器就会失效
• 如果frame加载速度慢，可以给waitForFrame调整超时参数适配你的页面加载速度

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