在 puppeteer 的 headless true 模式下找不到选择器的节点答案

【问题标题】：No node found for selector in headless true mode of puppeteer在 puppeteer 的 headless true 模式下找不到选择器的节点
【发布时间】：2019-09-26 10:53:50
【问题描述】：

我的环境：

傀儡版本：1.20.0
平台/操作系统版本：Ubuntu 18.04.3 LTS
Node.js 版本：8.10.0
Chrome/78.0.3882.0

这个错误内容是在终端打印出来的：

(node:18157) UnhandledPromiseRejectionWarning: Error: No node found for selector: #identifierNext
    at assert (/home/hoangdd3/node_modules/puppeteer/lib/helper.js:279:11)
    at DOMWorld.click (/home/hoangdd3/node_modules/puppeteer/lib/DOMWorld.js:366:5)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
  -- ASYNC --
    at Frame.<anonymous> (/home/hoangdd3/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.click (/home/hoangdd3/node_modules/puppeteer/lib/Page.js:1037:29)
    at puppeteer.launch.then (/home/hoangdd3/pupperteer/example.js:15:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
(node:18157) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:18157) [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');

puppeteer.launch({
    headless: true
}).then(async browser => {
    const page = await browser.newPage();
    await page.setViewport({width: 1920, height: 1080});
    await page.goto('https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin',  {"waitUntil" : "networkidle0"});

    await page.waitFor(2000);

    await page.click('input[type=email]');
    await page.keyboard.sendCharacter('phamvancuong4584sg@gmail.com');
    await page.click('#identifierNext');

    await page.waitFor(2000);

    await page.evaluate(() => document.querySelector('#password > div > div > div > input').click());
    await page.keyboard.sendCharacter('test');
    await page.evaluate(() => document.querySelector('#passwordNext').click());

    await page.screenshot({path: 'example.png'});

    await browser.close();
});

【问题讨论】：

我和你有同样的问题。请告知您是否已解决。我相信一定有某种混淆来防止点击这个按钮。
@user2481095：请参考以下domlas的答案。我也这样做了，而且成功了。

标签： javascript node.js puppeteer google-chrome-headless headless-browser

【解决方案1】：

您面临的问题是选择器，它们根本不存在:)。 headless: true 中的 html 与 headless: false 中的不同

您的 sn-p 在headless: false 上使用时可以正常工作

有代码可以在headless: true中使用

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
    });
    const page = await browser.newPage();

    await page.goto('https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin',  {"waitUntil" : "networkidle0"});
    await page.waitFor(2000);

    await page.click('#Email');
    await page.keyboard.sendCharacter('phamvancuong4584sg@gmail.com');

    await page.click('#next');

    await page.waitFor(2000);

    await page.click('#Passwd');

    await page.keyboard.sendCharacter('test');
    await page.click('#signIn');

    await page.screenshot({path: 'example.png'});

    await browser.close();
})();

在屏幕example.png 上，您可以看到密码错误的信息（测试）。

【讨论】：

对于headless: true，你如何确定选择器（即page.click('#next')？
@RizaKhan 在给定的时间，我使用 docker 并通过活动 Web 套接字连接到 chrome 实例以某种骇人听闻的方式做到了这一点。有更快的方法来获取无头谷歌页面的 DOM。看看：developers.google.com/web/updates/2017/04/headless-chrome
await page.waitFor(2000); 是一个糟糕的解决方案——这是一种竞争条件，可能会在选择器可见之前错误地停止阻塞，或者阻塞时间超过必要的时间。 waitForSelector（或更通用的waitForFunction）是在元素可见性上紧密绑定循环的首选方法。

【解决方案2】：

看起来在 await page.click('#identifierNext'); 中没有 id=identifierNext 的元素

await page.click('#identifierNext');

尝试使用

const next = await page.waitForSelector('#identifierNext');
await next.click();

click('#identifierNext')waitForSelector and click之间不同

waitForSelector - 可以等待一个元素 30,000 秒才能将一个元素添加到 DOM

click - 如果现在 DOM 中没有元素，click 将拒绝 Promise

【讨论】：