如何在JavaScript（Puppeteer）中查找指定坐标附近近似宽高的最近元素

可以通过以下步骤实现需求：

• 定义宽高近似阈值：先确定允许的宽高误差范围，比如±10px，根据实际场景调整这个值。
• 筛选符合宽高条件的元素：在页面上下文里执行JS，遍历所有可见元素，用getBoundingClientRect()获取每个元素的宽高、位置，筛选出宽高落在目标值±阈值范围内的元素。
• 计算距离并选出最近元素：对筛选后的元素，计算其中心坐标到目标(x,y)的距离（用平方和比较即可，无需开根号，效率更高），最终选出距离最小的元素。

代码示例 #

async function findNearestElementWithApproxSize(page, targetX, targetY, targetWidth, targetHeight, threshold = 10) {
  return page.evaluate((x, y, width, height, threshold) => {
    // 获取所有可见元素，排除隐藏元素
    const elements = Array.from(document.querySelectorAll('*')).filter(el => {
      const rect = el.getBoundingClientRect();
      return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).display !== 'none';
    });

    // 筛选宽高近似的元素
    const candidates = elements.filter(el => {
      const rect = el.getBoundingClientRect();
      return Math.abs(rect.width - width) <= threshold && Math.abs(rect.height - height) <= threshold;
    });

    if (candidates.length === 0) return null;

    // 计算每个候选元素的中心到目标坐标的距离平方，找出最小的
    let nearestElement = candidates[0];
    let minDistanceSquared = Infinity;

    candidates.forEach(el => {
      const rect = el.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;
      const distanceSquared = Math.pow(centerX - x, 2) + Math.pow(centerY - y, 2);

      if (distanceSquared < minDistanceSquared) {
        minDistanceSquared = distanceSquared;
        nearestElement = el;
      }
    });

    // 返回元素（Puppeteer会自动序列化返回）
    return nearestElement;
  }, targetX, targetY, targetWidth, targetHeight, threshold);
}

// 使用示例
// const element = await findNearestElementWithApproxSize(page, 100, 200, 50, 50, 10);

注意事项 #

• 可按需调整筛选范围，比如只查找特定标签的元素，将document.querySelectorAll('*')替换为document.querySelectorAll('button, input')这类指定选择器。
• 阈值需贴合实际场景设置，避免过严导致无匹配元素，或过松筛选出大量无关元素。
• 若页面包含iframe，需先切换到对应iframe上下文再执行上述逻辑。

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