No node found for selector, but selector is there on HTML page

Question

I am having some trouble trying to type text into an input field with Puppeteer. Here is the HTML for the website I am using, and it shows that the id of the field is creditCardNumber:

When I try to use page.focus and page.type, it say that there is no node for selector. 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

Answer 1

You need to wait for the #creditCardNumber element to be added to the DOM using page.waitForSelector().

Since you are receiving a TimeoutError, you can extend (or even disable) the maximum navigation time using the timeout option:

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.

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:

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 the page.content() or take a screenshot of the page with page.screenshot() to verify that the page is returning the results that you are expecting.

Answer 2

DOM element might not be rendered at the time, when you trying to make a focus on it.

Try to use page.waitForSelector before the page.focus call:

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