没有找到选择器的节点，但选择器在 HTML 页面上答案

【问题标题】：No node found for selector, but selector is there on HTML page没有找到选择器的节点，但选择器在 HTML 页面上
【发布时间】：2019-04-08 10:38:42
【问题描述】：

我在尝试使用 Puppeteer 在输入字段中输入文本时遇到了一些问题。这是我正在使用的网站的 HTML，它显示该字段的 id 是 creditCardNumber：

当我尝试使用page.focus 和page.type 时，它说没有选择器节点。这段代码是错误的，还是有更好的办法？

await page.waitFor(1500);
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});

这是我得到的错误：

UnhandledPromiseRejectionWarning：错误：找不到选择器的节点：#creditCardNumber

【问题讨论】：

Do not post images of code or errors! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您还复制并粘贴或直接在帖子中输入实际代码/消息。

标签： javascript html node.js google-chrome-devtools puppeteer

【解决方案1】：

当您尝试聚焦时，DOM 元素可能不会被渲染。

尝试在page.focus 调用之前使用page.waitForSelector：

await page.waitFor(1500);
await page.waitForSelector('#creditCardNumber');
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});

【讨论】：

当我尝试得到这个错误时：TimeoutError: waiting for selector "#creditCardNumber" failed: timeout 30000ms exceeded
这意味着你的 DOM 元素没有被渲染或者它在 iFrame 中。对于 iFrame，您可以使用 page.frames 找到它，然后使用您的选择器在 iFrame 元素上调用 frame.focus。
我已经尝试过但没有任何效果，我该怎么做？
如果你尝试了这两个选项，那么你的元素可能没有被渲染，你需要找出原因:(

【解决方案2】：

您需要等待使用page.waitForSelector() 将#creditCardNumber 元素添加到DOM。

由于you are receiving a TimeoutError，您可以使用timeout 选项延长（甚至禁用）最大导航时间：

await page.waitForSelector('#creditCardNumber', {timeout: 60000});

此外，您似乎正在尝试使用page.focus() 在输入字段中输入内容，但您应该改用page.type()。

await page.type('#creditCardNumber', '1234', {delay: 5});

因此，您的新代码应如下所示：

await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await page.type('#creditCardNumber', '1234', {delay: 5});

此外，您还可以使用elementHandle.type() 来进一步简化您的代码：

const credit_card_number = await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await credit_card_number.type('1234', {delay: 5});

注意：如果您在上述更改后仍然收到TimeoutError，您可能需要检查page.content() 或截取带有page.screenshot() 的页面以验证页面正在返回您期望的结果。

【讨论】：