How to make click action to wait before input box is filled with value?

Question

I am using Puppeteer to filled the input box and click the button and go to next page. But problem is that sometimes input value is too long and before value is completely inserted in input box, button is clicked. How to solve this problem.

await page.keyboard.type('input value'); //input 
await page.click('#btn'); //button to clicked
await page.waitForNavigation({ waitUntil: 'networkidle2' });
await page.waitFor(1000);

Answer 1

Sorry I cant add a comment, I really need to know what is before the first line of code but I assume is a focus on your input so will give you a hint.

The problem is in the keyboard.type we don't have a promise and the test continue running. So we need to remove focus and keyboard.type , and use page.type(selector, text[, options]) :

await page.type('#id_input', 'long input value');

This issues will be common over time so I also added a slow down in my project of 20 milliseconds; isn't a huge impact.

puppeteer.launch({slowMo: 20}).then(async browser => {...}