Puppeteer 悬停不触发弹出窗口

Question

我正在尝试使用 puppeteer 将鼠标悬停在 Twitter 个人资料名称上，以便显示包含个人资料信息的弹出窗口。

这是我的代码：

const puppeteer = require('puppeteer');

const selector =
  '#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010 > main > div > div > div > div > div > div:nth-child(2) > div > section > div > div > div:nth-child(1) > div > div > article > div > div > div > div.css-1dbjc4n.r-18u37iz.r-15zivkp > div.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-1777fci > div > div > div > div.css-1dbjc4n.r-1wbh5a2.r-dnmrzs > a > div';

async function testHover() {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();

  await page.goto('https://twitter.com/ProthomAlo/status/1373513365331574785');

  await page.waitForTimeout(1000);

  await page.hover(selector);

  // Or, with ElementHandle
  // const el = await page.$(selector);
  // await el.hover();

  await page.waitForTimeout(10000);
}

testHover();

我可以确认选择器有效，但弹出窗口从未出现。控制台也没有错误。

AFAIK，当调用

.hover

时，傀儡师会将鼠标光标移动到元素上，因此所有鼠标事件都应该被触发。没有出现弹出窗口的原因可能是什么？

Answer 1

简单地你就可以使用

const selector =
      '#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010 > main > div > div > div > div > div > div:nth-child(2) > div > section > div > div > div:nth-child(1) > div > div > article > div > div > div > div.css-1dbjc4n.r-18u37iz.r-15zivkp > div.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-1777fci > div > div > div > div.css-1dbjc4n.r-1wbh5a2.r-dnmrzs > a > div';

await page.waitForSelector(selector);
const ProfileElement = await page.$$(selector);
ProfileElement.hover();