如何修复 Puppeteer 抛出的“节点不可见或不是 HTMLElement”错误？答案

【问题标题】：How to fix "Node is either not visible or not an HTMLElement" error thrown by Puppeteer?如何修复 Puppeteer 抛出的“节点不可见或不是 HTMLElement”错误？
【发布时间】：2020-09-19 18:09:30
【问题描述】：

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

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]');

我收到此错误：

“节点要么不可见，要么不是 HTMLElement”

【问题讨论】：

你确定 [role=menuitem] 存在于 DOM 中
它在正文中，逻辑上是的：/

标签： javascript node.js instagram puppeteer chromium

【解决方案1】：

在ElementHandle 上调用的click 和hover 方法引起的错误可以通过确保元素与方法分开“在视图中”来缓解（尽管the docs 声明方法“滚动它如果需要，进入视图”，有时该元素似乎不可见）。

假设元素确实附加到 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);
//...

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

【讨论】：