How to fill an input field using Puppeteer?

Just set value of input like this:

await page.$eval('#email', el => el.value = '[email protected]');

Here is an example of using it on Wikipedia:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', {waitUntil: 'networkidle2'});

    await page.waitForSelector('input[name=search]');

    // await page.type('input[name=search]', 'Adenosine triphosphate');
    await page.$eval('input[name=search]', el => el.value = 'Adenosine triphosphate');

    await page.click('input[type="submit"]');
    await page.waitForSelector('#mw-content-text');
    const text = await page.evaluate(() => {
        const anchor = document.querySelector('#mw-content-text');
        return anchor.textContent;
    });
    console.log(text);
    await browser.close();
})();

another way doing

await page.focus('#email')
await page.keyboard.type('test54')

To extend the accepted answer above, you can use $eval with locally scoped variables too,

const myLocalValue = 'Adenosine triphosphate';    
await page.$eval('input[name=search]', (el, value) => el.value = value, myLocalValue);

This will take 'myLocalValue' from the local scope, and pass it into the browser scope as 'value'

page.evaluate()

You can use page.evaluate() to assign the email string to the value attribute of the element:

await page.evaluate(() => {
  const email = document.querySelector('#email');
  email.value = '[email protected]';
});