在 Facebook Messenger 上使用 puppeteer 时没有选择器节点

Question

我正在使用 Puppeteer 为我的家庭项目制作一个 Facebook Messenger api（有点）。

至此，我可以使用puppeteer成功登录我的账户了。

当我想在登录后自动执行时，真正的问题开始了。

我无法点击任何元素。

例如:

我想点击小'i'图标:

然后我复制了选择器像:

我在控制台中收到以下错误le:

(node:4771) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): AssertionError [ERR_ASSERTION]: No node found for selector: #cch_feb64f1b00e628 > div._5742 > ul > li:nth-child(4) > a > div > svg
(node:4771) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

代码:

const puppeteer = require('puppeteer');

(async function() {

    // This function is used to login into the account.
    async function login() {
        console.log('=====In Login=====');
        const email = '#email';
        const pass = '#pass';
        const submit = '#loginbutton';
        await page.waitFor(3000);
        await page.click(email);
        await page.waitFor(2000);
        await page.keyboard.type('not_a_real_email@mail.com');
        await page.waitFor(2000);
        await page.click(pass);
        await page.waitFor(2000);
        await page.keyboard.type('not_a_real_password');
        await page.waitFor(2000);
        await page.click(submit);
        return 0;
    }

    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();


    page.on('load', () => console.log('=====Page loaded!====='));

    await page.goto('https://messenger.com');
    await login();
    await page.waitForNavigation();
    await page.waitFor(3000); // I'm waiting just for safe side to make sure the element is loaded.

    // This is the line where the 'i' is clicked.
    // This is the line error occurs.
    await page.click(
        '#cch_feb64f1b00e628 > div._5742 > ul > li:nth-child(4) > a > div > svg'
    );

})();

所以，根据上面的错误，我知道选择器是错误的。那么正确的选择器是什么？不仅如此，当我在表情符号元素等其他元素上尝试时，我也遇到了同样的错误。

Answer 1

问题似乎是 select 或者您正在使用的是在运行时动态生成的，并且每次刷新页面都会更改。假设您只想单击 I（信息）按钮，以下 click/selector 使用 data-testid 对我有用：

await page.click(
    '[data-testid="info_panel_button"]'
);

如果您想测试顶部的其他图标，不幸的是它们似乎没有相同的 data-testid，这意味着它们对 select 更具挑战性。

完整示例

const puppeteer = require('puppeteer');

(async function() {

  // This function is used to login into the account.
  async function login() {
    console.log('=====In Login=====');
    const email = '#email';
    const pass = '#pass';
    const submit = '#loginbutton';
    await page.waitFor(3000);
    await page.click(email);
    await page.waitFor(2000);
    await page.keyboard.type('not_a_real_email@mail.com');
    await page.waitFor(2000);
    await page.click(pass);
    await page.waitFor(2000);
    await page.keyboard.type('not_a_real_password');
    await page.waitFor(2000);
    await page.click(submit);
    return 0;
  }

  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();


  page.on('load', () => console.log('=====Page loaded!====='));

  await page.goto('https://messenger.com');
  await login();
  await page.waitForNavigation();
  await page.waitFor(3000); // I'm waiting just for safe side to make sure the element is loaded.

  // This is the line where the 'i' is clicked.
  // This is the line error occurs.
  await page.click(
      '[data-testid="info_panel_button"]'
  );})();

在 Facebook Messenger 上使用 puppeteer 时没有选择器节点

No node for selector while using puppeteer on facebook messenger

javascript

automation

facebook

node.js

puppeteer