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

Posted 2023-03-31

【中文标题】如何修复 Puppeteer 抛出的“节点不可见或不是 HTMLElement”错误？

【英文标题】：How to fix "Node is either not visible or not an HTMLElement" error thrown by Puppeteer?

【发布时间】：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 中

它在正文中，逻辑上是的：/

【参考方案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);
//...

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

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