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

Solution 1

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

Solution 2

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.

Comments

[Tyler Algigi]

When I try that I get this error: TimeoutError: waiting for selector "#creditCardNumber" failed: timeout 30000ms exceeded

[Sergii Rudenko]

That's means that your DOM element wasn't rendered or it inside of iFrame. For the iFrame you can find it with page.frames, and then call frame.focus on the iFrame element with your selector.

[Tyler Algigi]

How would I go about that because I have tried and nothing is working?

[Sergii Rudenko]

If you tried both options, than your element probably wasn't rendered and you need to figure out why :(