[英]No node found for selector, but selector is there on HTML page
I am having some trouble trying to type text into an input field with Puppeteer. 我在尝试使用Puppeteer在输入字段中键入文本时遇到了一些麻烦。 Here is the HTML for the website I am using, and it shows that the
id
of the field is creditCardNumber
: 这是我正在使用的网站的HTML,它显示该字段的
id
为creditCardNumber
:
When I try to use page.focus
and page.type
, it say that there is no node for selector. 当我尝试使用
page.focus
和page.type
,它说没有选择器节点。 Is this code wrong, or is there something better I can do? 这段代码是错误的,还是我可以做得更好?
await page.waitFor(1500);
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});
This is the error I get: 这是我得到的错误:
UnhandledPromiseRejectionWarning: Error: No node found for selector: #creditCardNumber
UnhandledPromiseRejectionWarning:错误:未找到选择器的节点:#creditCardNumber
DOM element might not be rendered at the time, when you trying to make a focus on it. 当您尝试重点关注DOM元素时,该元素可能当时未呈现。
Try to use page.waitForSelector
before the page.focus
call: 尝试在
page.focus
调用之前使用page.waitForSelector
:
await page.waitFor(1500);
await page.waitForSelector('#creditCardNumber');
await page.focus('#creditCardNumber');
await page.focus('#creditCardNumber', '1234', {delay: 5});
You need to wait for the #creditCardNumber
element to be added to the DOM using page.waitForSelector()
. 您需要等待使用
page.waitForSelector()
将#creditCardNumber
元素添加到DOM中。
Since you are receiving a TimeoutError
, you can extend (or even disable) the maximum navigation time using the timeout
option: 由于您收到了
TimeoutError
,因此可以使用timeout
选项延长(甚至禁用)最大导航时间:
await page.waitForSelector('#creditCardNumber', {timeout: 60000});
Also, it appears that you are attempting to type into the input field using page.focus()
, but you should be using page.type()
instead. 同样,您似乎正在尝试使用
page.focus()
键入输入字段,但是应该改用page.type()
。
await page.type('#creditCardNumber', '1234', {delay: 5});
As a result, your new code should look something like this: 结果,您的新代码应如下所示:
await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await page.type('#creditCardNumber', '1234', {delay: 5});
Furthermore, you can also use elementHandle.type()
to simplify your code even more: 此外,您还可以使用
elementHandle.type()
进一步简化代码:
const credit_card_number = await page.waitForSelector('#creditCardNumber', {timeout: 60000});
await credit_card_number.type('1234', {delay: 5});
Note: If you are still receiving a
TimeoutError
after the above changes, you may want to inspect thepage.content()
or take a screenshot of the page withpage.screenshot()
to verify that the page is returning the results that you are expecting.注:如果您仍然收到
TimeoutError
上述更改后,您可能需要检查page.content()
或采取与页面的截图page.screenshot()
以验证该页面返回了你的结果期待。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.