javascript - 如何修复 Puppeteer 抛出的 "Node is either not visible or not an HTMLElement"错误？

Question

我正在创建一个每天在 Instagram 上发布内容的机器人，我想使用 Facebook 的创作工作室。下面的脚本工作正常:

const puppeteer = require('puppeteer');

(async () => {
  var username  = require('./config')
  var password  = require('./config')
  const browser = await puppeteer.launch();
  const ig = await browser.newPage();
  await ig.setViewport({
    width: 1920,
    height: 1080
  })
  await ig.goto('https://business.facebook.com/creatorstudio/');
  await ig.click('.rwb8dzxj');
  await ig.waitForSelector('#email');
  await ig.type('#email', username.username);
  await ig.type('#pass', username.password);
  await ig.click('#loginbutton');
  await ig.waitForSelector('#media_manager_chrome_bar_instagram_icon');
  await ig.click('#media_manager_chrome_bar_instagram_icon');
  await ig.waitForSelector('[role=presentation]');
  await ig.click('[role=presentation]');
  await ig.screenshot({path: 'example.png'});
  await browser.close();
})().catch(err => {
  console.log(err.message);
})

但是当我继续并添加:

await ig.waitForSelector('[role=menuitem]');
await ig.click('[role=menuitem]'); 

我收到这个错误:

"Node is either not visible or not an HTMLElement"

Answer 1

在 ElementHandle 上调用 click 和 hover 方法引起的错误可以通过确保元素单独“在 View 中”来缓解从该方法(尽管 the docs 声明该方法“在需要时将其滚动到 View 中”，似乎有时该元素不会变得可见)。

假设元素确实附加到 DOM - 你可以通过 isConnected 检查属性，尝试使用类似这样的东西(示例在 TypeScript 中)- scrollIntoView应该确保元素居中于:

const safeHover = async <E extends ElementHandle<Element>>(
  elem: E
) => {

  await elem.evaluate((e) =>
    e.scrollIntoView({ block: "center", inline: "center" })
  );

  await elem.click();
};

请注意，示例使用 elementHandle 的 click方法，而不是 Page 的。因为你调用waitForSelector单击之前，使用返回的 elementHandle:

//...
const pres = await ig.waitForSelector('[role=presentation]'); 
pres && await safeHover(pres);
//...

此外，这些问答可能很有用:

1. Puppeteer in NodeJS reports 'Error: Node is either not visible or not an HTMLElement'
2. Puppeteer throws error with "Node not visible..."