如何使用Puppeteer获取下拉菜单选项的目标URL？

从你提供的HTML代码来看，当前<i>标签没有直接显示跳转URL的属性（比如href或routerLink），但Puppeteer依然可以通过两种方式获取目标URL，具体取决于页面的跳转逻辑：

情况1：选项通过属性绑定跳转（如Angular的routerLink或普通href） #

如果页面里的“Edit”选项实际带有跳转属性（可能渲染时动态添加，或HTML代码未完整展示），可以直接定位元素并提取属性值：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的页面URL');

  // 先展开下拉菜单（替换为实际触发下拉的元素选择器）
  await page.click('触发下拉菜单的选择器');

  // 定位Edit选项并提取跳转属性
  const editUrl = await page.$eval('i.dropdown-item:has-text("Edit")', el => {
    // 优先检查普通href属性
    if (el.href) return el.href;
    // 检查Angular的routerLink属性，转换为完整URL
    const routerLink = el.getAttribute('routerLink');
    if (routerLink) return new URL(routerLink, window.location.href).href;
    return null;
  });

  console.log('Edit选项的目标URL:', editUrl);
  await browser.close();
})();

情况2：选项通过点击事件触发跳转 #

如果“Edit”是通过JavaScript点击事件触发页面跳转（无直接跳转属性），可以监听页面导航事件，模拟点击后捕获目标URL：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的页面URL');

  // 监听主框架的导航事件
  let targetUrl = null;
  page.on('framenavigated', frame => {
    if (frame === page.mainFrame()) {
      targetUrl = frame.url();
    }
  });

  // 展开下拉菜单
  await page.click('触发下拉菜单的选择器');

  // 等待Edit选项加载完成
  await page.waitForSelector('i.dropdown-item:has-text("Edit")');
  // 点击Edit选项
  await page.click('i.dropdown-item:has-text("Edit")');

  // 等待页面跳转完成
  await page.waitForNavigation();

  console.log('Edit选项跳转的目标URL:', targetUrl);
  await browser.close();
})();

注意事项 #

• 如果下拉菜单是动态渲染的，必须添加page.waitForSelector确保元素加载完成后再操作，避免找不到元素的错误。
• 替换代码中的触发下拉菜单的选择器为实际触发下拉菜单显示的元素选择器（比如按钮、图标等）。

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