获取在Puppeteer中悬停的链接的href

基础概念

Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。它非常适合用于自动化和测试网页，因为它可以模拟用户交互，比如点击、滚动和悬停。

类型

Puppeteer 的操作主要分为以下几类：

页面导航
元素选择和操作
网络请求拦截
截图和 PDF 生成
性能监控

应用场景

自动化测试
网页抓取和数据提取
性能测试
生成网页截图和 PDF

获取悬停链接的 href

在 Puppeteer 中，要获取悬停的链接的 href 属性，你可以使用以下步骤：

导航到目标网页。
使用 page.hover() 方法悬停在链接上。
使用 page.evaluate() 方法在页面上下文中获取链接的 href 属性。

下面是一个示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // 假设我们要悬停的链接的选择器是 'a.target-link'
  const selector = 'a.target-link';

  // 悬停在链接上
  await page.hover(selector);

  // 获取悬停链接的 href 属性
  const href = await page.evaluate((sel) => {
    const element = document.querySelector(sel);
    return element ? element.getAttribute('href') : null;
  }, selector);

  console.log('悬停链接的 href:', href);

  await browser.close();
})();

可能遇到的问题及解决方法

问题：悬停操作没有按预期执行。

原因：可能是由于页面加载不完全或者选择器不正确。

解决方法：

确保页面完全加载后再执行悬停操作，可以使用 page.waitForSelector() 方法等待元素出现。
检查选择器是否正确，确保它能唯一地匹配到目标元素。

await page.waitForSelector(selector);

问题：获取到的 href 属性为空。

原因：可能是由于元素在悬停时没有正确加载 href 属性，或者元素本身就没有 href 属性。

解决方法：

在获取 href 属性之前，确保元素已经加载完毕。
检查元素是否真的有 href 属性。

const href = await page.evaluate((sel) => {
  const element = document.querySelector(sel);
  if (element && element.hasAttribute('href')) {
    return element.getAttribute('href');
  }
  return null;
}, selector);

通过以上步骤和代码示例，你应该能够在 Puppeteer 中成功获取悬停链接的 href 属性。如果遇到其他问题，可以参考 Puppeteer 官方文档获取更多信息。