How to fill an input field using Puppeteer?

Question

I'm using Puppeteer for E2E test, and I am now trying to fill an input field with the code below:

await page.type('#email', 'test@example.com');

It worked, but I found the email address was typed into the field one character by one character as if a real human being was typing.

Is it possible to fill the input field with the email address all at one time?

The slow typing is actually (usually) a good thing, because it generates trusted events, triggers change handlers and is less prone to detection. The idea is to emulate a human typing into the field. Why do you want to fill it all in at one time? — ggorlen, Apr 04 '22 at 16:06

Everettss · Accepted Answer · 2021-07-29T15:00:59.153

146

Just set value of input like this:

await page.$eval('#email', el => el.value = 'test@example.com');

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

edited Jul 29 '21 at 15:00

answered Dec 29 '17 at 08:36

Everettss

15,475
9
72
98

Thank you! I wasted a bunch of time trying to get the 'type' method to work on a login. It looked like it worked, but the login always failed. – Gerry Feb 19 '19 at 15:56
1

btw. waitFor method is deprecated – meerkat Jul 28 '21 at 07:38
This didn't work for me. Also, there are simpler ways to do this using page.type(). See my answer below – Nikolay Advolodkin Sep 01 '21 at 18:37
1

Setting `el.value =` doesn't fire change handlers so this won't work on all input fields. – ggorlen Apr 04 '22 at 15:49

score 116 · Answer 2 · answered Jun 26 '19 at 12:03

116

another way doing

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

answered Jun 26 '19 at 12:03

Sarath Ak

7,903
2
47
48

17

This worked. The thing is, in some forms, there is a trigger on keypress that does something. If you just set the input field value, this trigger is not run and the form submit does not work correctly. – marlar Jan 26 '20 at 13:41
this is a better solution. specially on react webpages because there are usually states attached to the input fields will will not be set with just setting the value. – jameshwart lopez Dec 18 '22 at 12:34

score 90 · Answer 3 · answered Apr 11 '18 at 05:05

90

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'

answered Apr 11 '18 at 05:05

Andrew

2,390
1
15
9

Hello, dear Andrew! Could you please point me to the source where I can read more about this syntax? – JacekDuszenko Sep 24 '18 at 23:18
3

Hi Mrrobot, it's been a while since I've looked at this and can't really remember where I got it from. A quick look at the docs shows the prototype expected for this and the optional '...args'. None of the examples show it that clearly but it is documented [here](https://pptr.dev/#?product=Puppeteer&version=v1.8.0&show=api-pageevalselector-pagefunction-args-1). – Andrew Sep 25 '18 at 04:20
3

This is super useful. I was totally confused why simply changing the string value to a local variable didn't work. Great extension and super helpful. – miken Aug 05 '19 at 20:02
this should be the accepted answer, static values are little to no use – tonnoz Nov 20 '21 at 18:40

score 7 · Answer 4 · answered Mar 11 '20 at 00:57

7

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 = 'test@example.com';
});

answered Mar 11 '20 at 00:57

Grant Miller

27,532
16
147
165

score 7 · Answer 5 · answered Sep 01 '21 at 18:36

The selected answer didn't work for me in the latest version of Puppeteer(10.x). Instead what worked for me were the following commands.

test('should login', async () => {
const page = await browser.newPage();
page.setDefaultTimeout(6000);
await page.goto('https://www.saucedemo.com/');
await page.waitForSelector('#user-name');
await page.type('#user-name', 'standard_user');
await page.type('#password', 'secret_sauce');
await page.click('#login-button');
await page.waitForSelector('#contents_wrapper');});

score 1 · Answer 6 · answered Apr 19 '21 at 14:26

For Puppeteer Sharp, the syntax is a little different, and there are 2 ways to do it, but one is better than the other. Here is a full example:

static async Task Main(string[] args)
{
    await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);

    await using (var browser = await Puppeteer.LaunchAsync(new LaunchOptions { Headless = true, Product = Product.Chrome }))
    await using (var page = await browser.NewPageAsync())
    {
        try
        {
            await page.GoToAsync(urlString);
            await page.WaitForSelectorAsync("#btnSubmit");

            await ReplaceText(page, "#inputUsernameId", usernameString);
            await ReplaceText(page, "#inputPasswordId", passwordString);

            await page.ClickAsync("#btnSubmit");
            await page.WaitForNavigationAsync();  // Optional, if the page is changing          
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
            // Handle me / Log me
            throw;
        }
    }
}

private static async Task ReplaceText(Page page, string selector, string replacementValue)
{
    await page.WaitForSelectorAsync(selector).ConfigureAwait(false);
    await page.EvaluateExpressionAsync($"document.querySelector(\"{selector}\").value = \"{replacementValue}\"").ConfigureAwait(false);

    // Alternative older method below (not as reliable with async, but works):
    // await ele.FocusAsync().ConfigureAwait(false);
    //
    // await page.Keyboard.DownAsync("Control").ConfigureAwait(false);
    // await ele.PressAsync("A").ConfigureAwait(false);
    // await page.Keyboard.UpAsync("Control").ConfigureAwait(false);
    // await ele.PressAsync("Backspace").ConfigureAwait(false);
    //    
    // await ele.TypeAsync(replacementText).ConfigureAwait(false);
    // await ele.PressAsync("Tab").ConfigureAwait(false);
}

score 0 · Answer 7 · answered Mar 28 '23 at 07:16

0

Using Page.$()

You can just get Element Handler using page.$() and then type your email using type() property of the Handler

const input = await page.$('#email')
await input?.type('test@example.com')

answered Mar 28 '23 at 07:16

Sardar Badar Saghir

65
8

Alex · Answer 8 · 2023-04-05T06:18:42.453

0

await page.focus(".email"); //class name
await page.keyboard.type("email"); 
await page.focus(".password"); //class name
await page.keyboard.type("password");
await page.evaluate(() => {
  document.querySelector(".submit").click();
});

edited Apr 05 '23 at 06:18

answered Apr 05 '23 at 06:17

Alex

11
2

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Apr 09 '23 at 16:54

score 0 · Answer 9 · answered Jun 29 '23 at 13:41

0

Puppeteer already supports page.fill in their last versions.

https://github.com/puppeteer/puppeteer/pull/10220/files

answered Jun 29 '23 at 13:41

andy

2,362
2
18
19

How to fill an input field using Puppeteer?

9 Answers9

page.evaluate()

Using Page.$()

Linked