找不到选择器的节点，但是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});

这是我得到的错误：

  

UnhandledPromiseRejection警告：错误：未找到选择器的节点：#creditCardNumber

Answer 1

当您尝试重点关注DOM元素时，该元素可能当时未呈现。

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

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中。

由于you are receiving和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()或使用{{3 }}，以验证该页面是否正在返回您期望的结果。