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

Posted 2023-03-07

【中文标题】没有找到选择器的节点，但选择器在 HTML 页面上

【英文标题】：No node found for selector, but selector is there on HTML page

【发布时间】：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! 图片和屏幕截图可以很好地添加到帖子中，但请确保帖子在没有它们的情况下仍然清晰有用。如果您发布代码或错误消息的图像，请确保您还复制并粘贴或直接在帖子中输入实际代码/消息。

【参考方案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() 的页面以验证页面正在返回您期望的结果。