找不到选择器的节点，但是HTML页面上有选择器

Question

我在尝试使用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

Answer 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});

Answer 2

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

由于您收到了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()以验证该页面返回了你的结果期待。