Puppeteer hover not triggering popup

Question

I'm trying to hover a Twitter profile name with puppeteer so that the popup with profile information appears.

Here's my code:

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();

I can confirm that the selector is valid, but the popup never appears. There's no error in the console either.

AFAIK, the puppeteer will move the mouse cursor to the element when .hover is called, so all mouse events should be triggered. What could be the reason the popup is not appearing?

Puppeteer hover not triggering popup

0 Answers