puppeteer - how to submit form

Question

How do I submit the form? I have a simple search bar and a search button. The following enters the search string, but the click event is not fired. When headless is set to false and I manully click enter in the serachfield, the search is working. How to submit the button?

  const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('http://localhost:3000', {waitUntil: 'networkidle'});

await page.focus('#search');

// Type our query into the search bar
await page.type('michael');

// Submit form
await page.press('Enter');

await page.screenshot({path: './screenshots/search3.png'});

browser.close();
})();

My searchbar

search(e) {
 e.preventDefault();
this.props.onClick(this.props.value);}

render() {
return (<form className="form-inline" id="search-form" onSubmit
{this.search}>
  <div className="form-group">
    <input
      type="text"
      className="form-control"
      id="search"
      value={this.props.value}
      placeholder={this.props.placeHolder}
      onChange={this.props.onChange}
    />

    <button primary type="submit" >
      {this.props.buttonText}
    </button>
  </div>
</form>);
}

UPDATE

This is not working:

const searchForm = await page.$('#search-form'); 
await searchForm.evaluate(searchForm => searchForm.submit());

It does a postback and the text in the form was cleared, even though it should trigger the function with preventDefault.

So the issue seems to be this line of code await

searchForm.evaluate(searchForm => searchForm.submit());

This is working:

I changed the code to:

await page.click('#search-button'); 
await page.waitForNavigation();

what the screenshot look's like, if the problem not solved yet. Please consider attaching it. — Adi Prasetyo, Oct 16 '17 at 00:29

score 9 · Accepted Answer · answered Oct 19 '17 at 08:01

9

I solved it by using this instead of submitting the form:

await page.click('#search-button'); 
await page.waitForNavigation();

answered Oct 19 '17 at 08:01

Kristoffer

264
2
4
16

When clicking a button gives validation errors, how to go back to previous page? – RN Kushwaha Mar 27 '18 at 10:57

score 4 · Answer 2 · answered May 28 '21 at 17:17

4

You can submit the form by sending:
await page.click("button[type=submit]");

Found here: https://stackoverflow.com/a/46965168/8839237

answered May 28 '21 at 17:17

Peter

323
4
15

score 0 · Answer 3 · answered Sep 13 '17 at 07:35

0

Assuming your search bar has "search" as its ID,

Basically you need to use the selector expression to get a handle to your search bar and then using the evaluate function you can do the form submission,

You need to have the below snippet to submit your form,

const searchForm = await page.$('#search');
await searchForm.evaluate(searchForm => searchForm.submit());

Hope this helps

answered Sep 13 '17 at 07:35

David R

14,711
7
54
72

well now the form is triggered, but my onSubmit function is not used. I have added the form code to the question. When the form is submitted, the search string disappears and my url turns into `localhost:3000/?`. When doing it manually the searchString is stored in the searchfield and the url turns into `localhost:3000/?searchString=michael` – Kristoffer Sep 13 '17 at 08:43
@Kristoffer Did you try adding my suggestions?.. (or) your code has started working now? – David R Sep 13 '17 at 10:19
I added your suggestions, and now puppeteer seems to run (it doesn't break), but I don't get the expected output. It doesn't seem like the right onSubmit function is triggered. – Kristoffer Sep 13 '17 at 11:16
@Kristoffer Can you please remove your `onSubmit` handler and check if it is running as expected? – David R Sep 13 '17 at 11:46
without my onSubmit handler `
` it still empties the search input box. If I do it manually I don't get any search result due to a missing onSubmit handler.
– Kristoffer Sep 13 '17 at 12:06
@Kristoffer Please change your `` and see if it is working. – David R Sep 13 '17 at 15:08
Same result with `
` But then it also do a postbak, because I'm missing e.preventDefault(). It's the same result with `
`
– Kristoffer Sep 13 '17 at 19:24
If I change it to do the same search on stackoverflow (changing the id's/classnames) the search is working. So it's something with my form/setup? – Kristoffer Sep 13 '17 at 19:44
This is working: `await page.click('#search-button'); await page.waitForNavigation();` This is not working: `const searchForm = await page.$('#search-form'); await searchForm.evaluate(searchForm => searchForm.submit());` So the issue seems to be this line of code `await searchForm.evaluate(searchForm => searchForm.submit());` – Kristoffer Sep 14 '17 at 06:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154403/discussion-between-david-r-and-kristoffer). – David R Sep 14 '17 at 06:27
Great! Please update your post with what you've debugged, Hope it will definitely help someone! – David R Sep 14 '17 at 06:29

score 0 · Answer 4 · answered Sep 27 '17 at 13:01

0

first follow this link

puppeteer-how-to-submit-a-form

your question

when you press an enter than screenshot it, this is the questions.

// this code just await press event finished, but not form submitted finished,
//in this way, you can not screenshot form submit finished status
await page.press('Enter'); 
await page.screenshot({path: './screenshots/search3.png'});
// form submitting ...

This is why your code not works.

hopes to help you

answered Sep 27 '17 at 13:01

Carson

152
11

The issue was not the screenshot, but submitting the form. If I disabled the screenshot it still didn't submit the form correct. I tried to run it without headless so I could see that the form was not submitted properly even after the screenshot. – Kristoffer Oct 17 '17 at 07:35

puppeteer - how to submit form

4 Answers4