Question

你好，我想创建一个可以在instagram上每天发布内容的机器人，我想使用来自Facebook的Creator Studio

当我做到这一点时一切正常：


(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]'）; 等待ig.click（'[role = menuitem]'）;

我收到此错误：“节点不可见或不是HTMLElement”

感谢所有会帮助我的人！

Answer 1

在 click 上调用的 hover 和 ElementHandle 方法导致的错误可以通过确保元素与方法分开“在视图中”来减轻（尽管 {{3}声明该方法“在需要时将其滚动到视图中”，似乎有时元素不可见）。

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

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

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

  await elem.click();
};

请注意，示例使用 elementHandle 的 scrollIntoView 方法，而不是 Page 的方法。由于您在点击之前调用了 click，因此请使用返回的 elementHandle:

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

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

人偶错误节点不可见或不是HTMLElement

1 个答案: