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

时间:2018-11-05 03:59:29

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

尝试使用Puppeteer在输入字段中键入文本时遇到麻烦。这是我正在使用的网站的HTML,它显示该字段的idcreditCardNumber

HTML

当我尝试使用page.focuspage.type时,它说没有选择器节点。这段代码是错误的,还是我可以做些更好的事情?

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

这是我得到的错误:

  

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

2 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:0)

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

由于you are receivingTimeoutError,您可以使用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 }},以验证该页面是否正在返回您期望的结果。