Stack Overflow

About
Products
For Teams
Search…

Join Stack Overflow to learn, share knowledge, and build your career.

Home
PUBLIC
Stack Overflow
Tags
Users
FIND A JOB
Jobs
Companies
TEAMS
What’s this?
Free 30 Day Trial
How to fill an input field using Puppeteer?
Asked 3 years, 1 month ago
Active 4 months ago
Viewed 60k times

60

12
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', '[email protected]');

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?

javascript
node.js
google-chrome-devtools
puppeteer
e2e-testing

Share
Improve this question
Follow
edited Mar 11 '20 at 1:01

Grant Miller
17.5k1515 gold badges9595 silver badges123123 bronze badges
asked Dec 25 '17 at 7:13

choasia
7,84644 gold badges3232 silver badges5050 bronze badges
add a comment
4 Answers

91
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.waitFor('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();
})();

Share
Improve this answer
Follow
edited Dec 31 '17 at 9:06
answered Dec 29 '17 at 8:36

Everettss
12.6k66 gold badges6161 silver badges8888 bronze badges
Thanks for your answer! – choasia Dec 30 '17 at 13:49
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
Great job,really saved me a lot of time. – Anilm Sep 26 '19 at 7:41
add a comment

53

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'

Share
Improve this answer
Follow
answered Apr 11 '18 at 5:05
Andrew
1,85011 gold badge1212 silver badges99 bronze badges
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
2
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. – Andrew Sep 25 '18 at 4:20
1
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 5
'19 at 20:02
add a comment

45

another way doing

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

Share
Improve this answer
Follow
answered Jun 26 '19 at 12:03

Sarath Ak
4,3363131 silver badges3535 bronze badges
4
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
add a comment

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

Share
Improve this answer
Follow
answered Mar 11 '20 at 0:57

Grant Miller
17.5k1515 gold badges9595 silver badges123123 bronze badges
add a comment
Your Answer
Sign up or log in
Post as a guest
Name
Email
Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy
and cookie policy

Not the answer you're looking for? Browse other questions tagged javascript node.js
google-chrome-devtools puppeteer e2e-testing or ask your own question.
The Overflow Blog
Podcast 309: Can’t stop, won’t stop, GameStop
Sequencing your DNA with a USB dongle and open source code
Featured on Meta
Opt-in alpha test for a new Stacks editor
Visual design changes to the review queues
Remote jobs

Javascript Full Stack Developer

iFitNo office location
REMOTE
javascriptreactjs

Senior Full Stack Software Engineer

The Washington PostNo office location
REMOTE
javascriptpython

Senior Front-End Engineer

Huddle HQNo office location
$65K - $140KREMOTE
node.jsreactjs

Senior Frontend Software Engineer

ChaturbateNo office location
REMOTE
javascriptangular

Senior Fullstack Web Developer

Airtm, IncNo office location
$150K - $200KREMOTE
javascriptnode.js

Full Stack Developer

Science Suite Inc. (BioRender)Toronto, ON, Canada
REMOTE
node.jsreactjs

Full Stack JavaScript Developer (Remote)

GitStartNo office location
REMOTE
node.jsreactjs

Expert Full Stack Developer

OnePak IncNo office location
REMOTE
javascriptphp
View more jobs on Stack Overflow
Linked
3
Unable to type after click with Puppeteer
1
ReferenceError: document is not defined although I am using puppeteer
0
Puppeteer write in input field
Related
7632
How do JavaScript closures work?
8010
How do I check if an element is hidden in jQuery?
6450
How do I remove a property from a JavaScript object?
1382
How do I find out which DOM element has the focus?
7717
How do I redirect to another webpage?
7421
How to check whether a string contains a substring in JavaScript?
1624
How do I debug Node.js applications?
2957
How to check if an object is an array?
2194
How to decide when to use Node.js?
9073
How can I remove a specific item from an array?
Hot Network Questions
How could I have prevented this long drawn out game?
What is a good approach to handling exceptions?
Why is SAT so important in theoretical computer science?
Why do Space X starship launches need permission from the FAA?
Three racist queens
Do missiles need anti-icing?
How should I prevent a player from instantly recognizing a magical impostor without
making them feel cheated?
If the gravitational force were inversely proportional to distance (rather than
distance squared), will celestial bodies fall into each other?
Could you negate a Beholder's antimagic cone by covering up its eye?
Ticket to Ride United Kingdom, should the technology cards be in a stack or do we
get to choose?
Change a mesh to a specific number of faces
How does everyone not become poor over time?
How soon can we realize that we stopped aging?
Why do banks have capital requirements on deposits?
Is becoming an Amazon seller profitable? Is it worth paying for a course?
What are some fun projects for non-CS majors?
Advantage of RS-232 over 20mA current loop
How to make an arrow between arrows that is not sloped?
Why was the Balrog beneath Moria
One time sourdough starter
How do I remove this wall plate with no visible screws?
Is there still a Belgian vs. French distinction between "quatorze jours" and
"quinze jours"?
How does paying off the mortgage work if I demolish a home and rebuild another home
on the property?
Good alternative to a slider for a long list of numeric values
Question feed

STACK OVERFLOW
Questions
Jobs
Developer Jobs Directory
Salary Calculator
Help
Mobile
Disable Responsiveness
PRODUCTS
Teams
Talent
Advertising
Enterprise
COMPANY
About
Press
Work Here
Legal
Privacy Policy
Terms of Service
Contact Us
STACK EXCHANGE
NETWORK
Technology
Life / Arts
Culture / Recreation
Science
Other
Blog
Facebook
Twitter
LinkedIn
Instagram
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc
by-sa. rev 2021.2.4.38498

765 watchers 7.5k questions

Chrome DevTools are the web developer tools built into Google Chrome. View tag