如何用Playwright触发元素hover并获取动态生成的href属性？

当然可以，下面几种方案都能帮你拿到目标链接hover时才生成的href属性：

方案一：用Playwright原生hover后等待属性 #

你现有代码已经用到了hover方法，只要在hover后等待href属性出现，再提取即可，注意要给page.goto加上await，避免页面未加载完成就执行后续操作：

const browser = await webkit.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');

await page.waitForSelector('.selectorClassName');
const linkElement = page.locator('a[data-type=linkto]');
await linkElement.hover();
// 等待href属性被添加到元素上
await linkElement.waitFor({ state: 'attached' });
const href = await linkElement.getAttribute('href');
console.log(href);

await browser.close();

方案二：直接在浏览器中触发mouseover事件 #

如果Playwright的hover方法没能正确触发href生成逻辑，可以直接在浏览器上下文里触发元素的mouseover事件，模拟真实hover状态，还能通过MutationObserver监听属性变化，确保拿到生成后的href：

const browser = await webkit.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com');

await page.waitForSelector('.selectorClassName');
const href = await page.evaluate(() => {
  const link = document.querySelector('a[data-type=linkto]');
  // 触发mouseover事件
  link.dispatchEvent(new MouseEvent('mouseover', { bubbles: true, cancelable: true }));
  
  // 监听href属性变化，确保拿到生成后的值
  return new Promise(resolve => {
    if (link.href) {
      resolve(link.href);
    } else {
      const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
          if (mutation.attributeName === 'href') {
            resolve(link.href);
            observer.disconnect();
          }
        });
      });
      observer.observe(link, { attributes: true });
    }
  });
});
console.log(href);

await browser.close();

方案三：调用页面自定义的hover处理函数 #

有些网站会给元素绑定自定义的hover处理函数来生成href，你可以先通过浏览器开发者工具找到对应的函数，然后直接调用它：

const href = await page.evaluate(() => {
  const link = document.querySelector('a[data-type=linkto]');
  // 假设页面定义了handleHover作为hover事件的处理函数
  link.handleHover();
  // 给一点时间让href生成，时长根据页面实际情况调整
  return new Promise(resolve => setTimeout(() => resolve(link.href), 100));
});
console.log(href);

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